ソーシャルメディアとウェブサイトを同時に運営している皆さん、ウェブサイトの記事やページの質問をソーシャルメディアに投稿し、ウェブサイトの露出を増やすことがよくあると思います。しかし、ページ内にOGP（Open Graph Tags）を設定するだけで、表示するサムネイルを指定できることをご存知でしたか？以下の手順に従って、この機能をどのように設定するかをご紹介します。
OGP（Open Graph Tags）とは何ですか？
OGP（Open Graph Tags）は、元々Facebookが提唱したプロトコルで、ウェブページにOGPタグを挿入することで、ソーシャルメディアがページを共有する際に、ページ内のOGP情報に基づいて対応する情報を表示することができます。その後、TwitterやLinkedInなどの他のソーシャルメディアプラットフォームもこのプロトコルを採用し、OGPは次第にウェブサイトを建設する際に重視する機能の一つとなりました。
詳細な説明はOGP公式ドキュメントを参照してください：https://ogp.me/
OGPの一般的な属性：
OGPには多くの属性があり、ウェブサイト管理者は以下の項目を覚えておくことをお勧めします：
– og:title：ウェブページのタイトル。推奨される最大文字数は50文字（100文字）で、それを超えるとシステムにより省略されます。
– og:description：ウェブページの説明。ここでは最大80文字（16文字）を推奨し、それを超えるとシステムにより省略されます。
– og:type：ウェブページのタイプ、例えば “article”、”website”、”video” など。
– og:url：ウェブページのURL、ページをそのまま貼り付けます。
– og:image：ウェブページのプレビュー画像のURL。ただし、以下の規定を遵守する必要があります。
– 許容される画像サイズの下限は200 x 200ピクセルです。
– 画像ファイルのサイズは8MBを超えてはなりません。
– 高解像度デバイスで最適な表示を得るためには、最低でも1200 x 630ピクセルの画像を使用することをお勧めします。
– 画像が大きく表示されるリンクのファンページの投稿では、最低でも600 x 315ピクセルの画像を使用する必要があります。
OGPはどのように設定しますか？
OGPタグはウェブサイト構築の基本項目として、以下の方法でOGP設定を変更することができます。
ウェブサイトの管理画面でOGPを変更する
例えば、WordPressでは、管理画面でYoastプラグインをインストールすることができます。このプラグインは、一般的なSEO設定の他に、記事を編集する際に、編集ページの最下部にYoastの設定ブロックが表示され、その中の「ソーシャルネットワーキングサービス」がOPGのフィールドを制御します。ウェブサイト管理者は、指示に従って情報と写真を入力するだけで、OPGの設定を完了することができます！
直接ソースコードを変更する
管理画面から変更できない場合は、ソースコードから変更する必要があります。エンジニアに依頼して、ページの<head>にOGPタグを追加してもらう必要があります。
実際に追加するコードは非常に直感的で、以下の例のように、<meta>に新たにproperty=””を追加し、指定するOPGタグを入力します。
その後、content=””を追加し、対応するデータを入力するだけで完了します。
ウェブサイトにOGPタグが追加されていることをどのように確認しますか？
最も簡単な方法は、F12キーを押して対応するOGPタグを検索することです。しかし、今回はMeta for Developersのデバッグツールをシェアします。これにより、FBでリンクを共有した際にウェブサイトがどのように表示されるかを確認するとともに、どのコードが欠けているかを直接確認することができます。
ページにあなたのページのURLを入力して「フェッチ」をクリックするだけで、下の画像のようにOGP情報が表示されます。
これだけ読んでいただければ、OGPタグについてある程度理解していただけたと思います。私の記事が気に入った方や、これからSEOについて詳しく知りたい方は、私のウェブサイトをフォローしてください。知識を皆さんにシェアするために頑張ります。
Last Updated on 2月 4, 2024 by 己見室