ページをSNSでシェアしたとき、タイトルや画像が意図通りに表示されず「素っ気ないリンク」になってしまった経験はないでしょうか。検索結果やSNSカードでの見え方は、HTMLの <head> に入れるメタタグ（title・description・OGP・Twitter Card）で決まります。ここを整えるだけでクリック率が変わることもある一方、後回しにされがちな部分でもあります。この記事では、メタタグを生成し、実際の見え方を確認し、faviconとクロール制御まで含めて、公開前に押さえておきたい設定を順番に紹介します。
1. タイトル・ディスクリプション・OGPタグを作る
まずは <head> に入れる基本セットを用意します。title と meta description は検索結果に表示される最重要項目です。検索結果では文字数ではなく表示幅で切られ、日本語は1文字の幅が広いので、要点を前半に書くのが確実です。なお description はそのまま表示されるとは限らず、Google がページの本文から説明文を作り直すこともあります。あわせて OGP（og:title / og:description / og:image / og:url）と X（旧Twitter）用の Twitter Card（summary_large_image など）を設定すると、SNSでシェアされたときにカード形式で表示されます。Meta Tag Generator は基本・OGP・Twitterの3タブで各項目を入力でき、文字数を見ながらコードを生成できます。og:image は https:// から始まる絶対URLで書く必要があり、相対パスにすると多くのSNSで画像が出ません。大きさは 1200×630px を基準にすると、多くのSNSで綺麗に表示されます。meta keywords は Google が検索順位に使っていないので、書かなくても困りません。
この手順で使うツール
Meta Tag Generator
title / OGP / Twitter Card の meta タグを GUI で生成・コピー
2. SNSでの実際の見え方をプレビューで確認する
生成したタグが意図通りに表示されるかは、実際のカード表示で確認するのが確実です。OG Tag Preview にページのURLを入れると、公開中のページから OGP のメタタグを取得し、X・Facebook・Slack でどう見えるかを並べて確認できます。「画像が出ない」「タイトルが途中で切れる」といった問題は、コードを眺めるだけでは気づきにくいものです。もう1つよくあるのが「直したのに古い画像のまま」で、これはSNS側が以前に取得したカードをしばらく保存しているためです。このプレビューで新しい画像が出ているのにSNSでは古いままなら、原因はSNS側の保存なので、Facebook のシェアデバッガーのような各SNSの確認ツールで取得し直させます。公開後に一度チェックしておくと、シェアされてから表示崩れに気づく事故を防げます。
この手順で使うツール
OG Tag Preview
URLを入力してSNSシェア時のOGPプレビューを確認
3. ファビコン（アイコン）を用意する
ブラウザのタブやブックマーク、検索結果の一部に表示される favicon も、サイトの印象を左右する小さなメタ要素です。用意されていないとデフォルトの汎用アイコンになり、他サイトとの見分けがつきにくくなります。大きさには用途ごとの決まりがあり、ブラウザのタブは 16・32px、Google の検索結果に表示されるファビコンは 48px の倍数（48・96px など）、iPhone のホーム画面に追加されたときのアイコンは 180px（apple-touch-icon）が使われます。Favicon Generator を使えば、絵文字やテキストからこれらの大きさの PNG をすぐに作れ、背景色・文字色も変えられます。まだ用意していないサイトは、この工程でアイコンを作って <head> に link rel="icon" として追加しておきましょう。ICO・SVG を含めた一式のそろえ方は、ファビコンとアプリアイコンのガイドで詳しく扱っています。
この手順で使うツール
Favicon Generator
絵文字・テキストから favicon PNG を即生成・ダウンロード
4. クローラーの制御を設定する（robots.txt）
メタタグで見え方を整えたら、検索エンジンのクローラーに「どこをクロールしてよいか」を伝える robots.txt も用意します。検索や絞り込みで無数にできるURLなど、クロールさせても意味のないパスを Disallow で外し、Sitemap の場所を明記しておくとクロールが効率化されます。ここで一番誤解されやすいのが、Disallow は「クロールしないで」という指示であって、「検索結果に出さないで」という指示ではない点です。Disallow したページでも、他のページからリンクされていれば、中身を読まれないままURLだけが検索結果に出ることがあります。そして Disallow したページはクロールされないので、ページに書いた noindex も読まれません。検索結果に出したくないページは、Disallow にせずクロールさせたうえで noindex を付けます。本当に見せたくない管理画面などは、認証で守ってください。robots.txt は誰でも読めるので、管理画面のパスを書くと、かえって場所を教えることになります。Robots.txt Generator は User-agent / Allow / Disallow / Crawl-delay / Sitemap を組み立ててプレビューでき、Disallow を書くとこの注意が表示されます。Crawl-delay は Bing などは従いますが、Google は無視します。
この手順で使うツール
robots.txt Generator
User-agent ルール・Sitemap URL を GUI で設定して robots.txt を即生成
まとめ
OGP・メタタグの設定は「生成 → プレビューで実際の見え方を確認 → favicon → クロール制御」の流れで、公開前に一度通しておくと安心です。特に「og:image は絶対URLで」「SNSの古いカードは各SNSの確認ツールで取り直す」「検索結果から外すのは robots.txt の Disallow ではなく noindex」の3点は、知らないと直したつもりで直っていない状態になります。公開後は必ず一度、実際のSNSカードでプレビューして、画像とタイトルが意図通りに出ているかを確認しましょう。