こんにちは!WEB制作会社のスタッフ、R.T.です。
社内で突然「今日から君がWEB担当ね!」と任命されてしまい、右も左も分からないまま自社サイトの更新やSNSの運用を任されている……そんなお悩みをお持ちだったりしませんか?
一生懸命ブログ記事を書いて、いざX(旧Twitter)やFacebookでURLをシェアしてみたら、「あれ?文字のリンクだけで、サムネイル画像が表示されない」「タイトルが途中で切れてしまっている」と焦った経験がある方は非常に多いはずです。 せっかく良い記事を書いても、SNS上で魅力的に表示されなければ、誰にもクリックしてもらえません。

そんな「SNSでの見栄え問題」をブラウザ上でサクッと解決してくれるのが、「Meta Tags Toolkit(metatags.io)」という無料のオンラインサービスです。
今回は、WEB制作の現場でもよく使われているこのツールの使い方を通して、WEB集客の基本である「メタ情報(メタタグ)」や「OGP設定」とは一体何なのか、そしてそれがどうSEO(検索エンジン最適化)に繋がっていくのかを、初心者の方に向けて分かりやすく解説していきます。
もくじ
私たちが普段ブラウザで見ているWEBページには、実は「人間の目には見えないけれど、コンピューター(検索エンジンやSNS)には見えている裏側の情報」が埋め込まれています。
これを総称してメタ情報(メタタグ)と呼びます。
メタ情報は、HTMLというWEBページを作る言語の中で、「head」と呼ばれる裏側の設定領域に書き込まれます。 例えば、「このページのタイトルはこれです」「このページはこんな内容について書かれています」といった要約情報を、Googleの検索ロボットなどに伝えるための、いわば自己紹介カードのような役割を果たしています。
代表的なものとして、以下の2つがあります。
これらを適切に設定しておくことで、Googleが「この記事は誰のどんな悩みを解決するものなのか」を正確に理解できるようになります。
そして、このメタ情報の中でも、特にSNS(X、Facebook、LINE、Slackなど)でシェアされた時の見栄えをコントロールするための専用の仕組みが「OGP(Open Graph Protocol)」です。
OGPを設定しておくと、URLがシェアされた時に、指定した「サムネイル画像」や「タイトル・説明文」がカード状になってパッと画面に表示されます(これをリッチカードと呼んだりもします)。
皆さんも、SNSを利用する過程で見たことがあるのではないでしょうか。
逆に言えば、このOGP設定をサボってしまうと、SNS側が勝手にサイト内の関係ない画像を拾ってしまったり、ただの青い文字リンクだけが表示されたりして、非常に寂しい印象になってしまうのです。
「見栄えが良くなるのは分かったけれど、それってそんなに重要なの?」「とにかくGoogleの検索順位(SEO)を上げたいんだけど……」と思う方もいるかもしれません。 実は、OGP設定やメタ情報は、サイトへのアクセス数を増やす上で極めて重要な役割を担っています。
検索結果でもSNSのタイムラインでも、ユーザーは画面をスクロールしながら「この記事を読むかどうか」をわずか数秒で判断しています。 文字だけのリンクと、目を引く大きな画像付きのリンク。どちらがクリックされやすいかは一目瞭然です。
どんなに検索順位で1位を獲得しても、タイトルや説明文(メタディスクリプション)が魅力的でなければクリックされません。SNSでも同じで、OGP画像が設定されているだけで、クリック率(CTR)は数倍から十数倍も跳ね上がると言われています。 アクセスを稼ぐためには、「表示されること」と同じくらい「クリックしたくなる魅せ方を作ること」が重要なのです。
実は、Googleは「Twitterでたくさんシェアされたから、検索順位を上げよう」という直接的な評価はしていません。 しかし、OGPをしっかり設定してSNSで記事が広く拡散されると、結果として多くの人の目に留まり、他の個人のブログや企業のサイトで「この記事、参考になりますよ」とリンクを貼ってもらえる確率が高まります(これを被リンクを獲得すると言います)。
質の高い被リンクがたくさん集まることは、GoogleのSEOにおいて非常に強いプラスの評価に繋がります。つまり、OGPを設定してSNSでの反響を高めることは、回り回ってGoogle検索での上位表示(SEO対策)にも大きく貢献するのです。
メタ情報やOGPの重要性が分かったところで、「じゃあ、実際にどうやって設定すればいいの?」という疑問が湧いてきますよね。 そこで大活躍するのが、ブラウザ上で直感的に使えるオンラインツール「Meta Tags Toolkit」です。インストールは一切不要で、誰でもすぐに使い始めることができます。

使い方は驚くほど簡単です。 ツールの画面を開き、上部の入力欄にあなたのサイトのURL(今回は、弊社HPのURL)をコピー&ペーストするだけです。
すると、左側のメニューからGoogle、Twitter、Facebook、LinkedInなどを切り替えることで、「今の設定のままだと、それぞれのプラットフォームでどんな風に表示されるか」を実際の画面そっくりにプレビューしてくれます。
もし「画像が表示されていない」「タイトルを変えたい」と思ったら、画面左側にある編集パネル(Title、Description、Imageの欄)のテキストを直接書き換えたり、画像をアップロードしてみてください。 右側のプレビュー画面がリアルタイムで変化し、理想の見栄えをシミュレーションすることができます。

そして最も便利なのが、画面右上にある「Generate Meta Tags(コードを生成)」というボタンです。
プレビューで完璧な状態を作ったら、このボタンをクリックするだけで、あなたのサイトの裏側に貼り付けるべきHTMLコード(メタタグとOGPタグのセット)を自動で作成してくれます。
あとはこれをコピーして、自社サイトに設定するだけで完了です。
ちなみにコードの上に表示されている「Warning: Be sure to upload your image to your CMS or host.」は、画像は必ず自分の管理するCMSやサーバー上にアップしてください、という注意書きですね。
今回は、ブラウザ上で使える便利なオンラインサービス「Meta Tags Toolkit」の使い方と、その背景にあるメタ情報・OGP設定、そしてSEOとの関係性についてお話ししました。
WEBサイトは「作って終わり」ではなく、その魅力を検索エンジンやSNSを通して「どうユーザーに届けるか」が勝負になります。 特に未経験からWEB担当になったばかりの方は、目に見えない裏側の設定に難しさを感じるかもしれませんが、今回ご紹介したような便利なツールを利用すれば、見えなかった部分の可視化が可能になります。
まずは自社のトップページや、一番読んでほしいブログ記事のURLを、Meta Tags Toolkitに入力してプレビューを確認してみてください。「もったいない表示」になっていたら、それがアクセスを劇的に伸ばすための最初の改善ポイントです!
ただ、「使っているシステム(CMS)の都合で、どうしても自分でメタタグを編集できない」「自社サイトのテーマファイルが古くて、OGP設定のプラグインがうまく動かない」といった、システムの壁にぶつかってしまうこともあるかもしれません。
そんな時は、ぜひ私たちのようなWEB制作会社にお気軽にご相談ください。システムの裏側を整え、担当者様が「記事を書くこと・集客すること」に専念できる環境作りを、しっかりサポートさせていただきます!
当社サービスに関するご相談・お見積もりなど、お気軽にお問い合わせください。