オープングラフのメタタグ：知っておくべきことすべて

この記事はAhrefs公式ブログの日本語訳です。
原文：Meta Tags for SEO: A Simple Guide for Beginners
（著者：Michal Pecánek / 原文の最終更新日：January 14, 2020）
※フルスピード註：この記事は2020年1月14日時点の記載をもとに翻訳しています。Ahrefs公式ブログの記事は今後追記・再公開されることがありますことをご了承ください。

ソーシャルメディアでコンテンツをよりクリックしやすく、共有しやすく、目立つようにするにはどうすればいいか悩んでいませんか？

オープングラフのメタタグは、その解決策です。

オープングラフのメタタグを使ってFacebookで共有した場合の、とある記事の見え方は以下の通りです：

そして、メタタグなしの場合はこんな感じです：

このガイドで、あなたは以下を学べます：

Open Graph（オープングラフ）メタタグとは？

Open Graphメタタグは、ソーシャルメディア上で共有されるURLの表示方法を制御する、コードのスニペットです。

これはFacebookのOpen Graphプロトコルの一部であり、LinkedInやTwitter（Twitter Cardsがない場合）など、他のソーシャルメディアサイトでも使用されています。

Open Graphメタタグは、ウェブページの<head>セクションで見つけることができます。プロパティ名の前にog:が付いているタグは、Open Graphタグです。

SEOエキスパートになるためのガイドから、いくつかの例を紹介しましょう。：

<meta property="og:title" content="How to Become an SEO Expert (8 Steps)" />
<meta property="og:description" content="Get from SEO newbie to SEO pro in 8 simple steps." />
<meta property="og:image" content="https://ahrefs.com/blog/wp-content/uploads/2019/12/fb-how-to-become-an-seo-expert.png" />

そのタグは、Facebookではこのように表示されます：

Open Graphタグはなぜ重要なのですか？

OGタグが最適化された共有コンテンツは、人々が見てクリックする可能性が高く、あなたのウェブサイトへのソーシャルメディアを経由したトラフィックが増加することを意味します。

その理由は3つあります：

ソーシャルメディアのフィードで、コンテンツをより目立たせることができます。
コンテンツが何であるかを、一目で伝えることができます。
Faceboo（またはほかのソーシャルメディア）kがコンテンツの内容を理解するのに役立ち、検索によるブランドの認知度を高めることができます。

最後のポイントは見落とされがちなので、もう少し触れておきましょう。

Facebookで「（Googleの）代替検索エンジン」と検索した結果を紹介します。

Facebookでシェアされた人気記事を表示します。各タイトルと画像は、Open Graphタグから取得しています。

また、検索結果で記事が表示されない場合でも、Facebookでは、フォローしているグループやページ、友人によって共有されたコンテンツが表示されます。

注釈：Open Graphタグは、Open Graphプロトコルをサポートするアプリ（FacebookのMessengerやWhatsAppはもちろん、iMessageやSlackなど）を使って、誰かがダイレクトメッセージでリンクを送ってきたときに、スニペットを作成するのにも役立ちます。

どのOpen Graphタグを使うべきか？

Facebookは公式ドキュメントで17のOGタグを挙げており、さらに数十のオブジェクトタイプも挙げています。これらすべてについて説明するつもりはありません。Facebookがあなたのページの基本を理解するために必要なのは4つだけで、その他に時々役立つものがいくつかあります。

これらを見ていきましょう。

og:title

ページのタイトルです。

シンタックス

<meta property="og:title" content="Open Graph Meta Tags: Everything You Need to Know" />

ベストプラクティス

すべての「共有可能」なページに追加する。
正確さ、価値、クリックしやすさを重視する。
文字数のオーバーフローを防ぐため、短くすること。これに関する公式なガイダンスはありませんが、モバイルでは40文字、デスクトップでは60文字がおおよそのスイートスポットです。
生のタイトルを使いましょうあ。ブランディング（例：サイト名）の記述は含めないようにします。

og:url

コンテンツのURLです。

シンタックス

<meta property="og:url" content="https://ahrefs.com/blog/open-graph-meta-tags/" />

ベストプラクティス

canonical URLを使用します。投稿された重複したURLのすべてに、いいね！などのつながりのあるデータを集約することができます。

og:image

ソーシャルスニペット用の画像URLです。

このタグは、ソーシャルフィードで最も重要な位置を占めているので、おそらく最も重要なOpen Graphタグでもあることに留意してください。

シンタックス

<meta property="og:image" content="https://ahrefs.com/blog/wp-content/uploads/2020/01/fb-open-graph-1.jpg" />

ベストプラクティス

「共有可能な」ページ（ホームページ、記事など）には、その記事を表すカスタム画像を使いましょう。
その他のページには、ロゴまたはその他ブランドを示す画像を使用してください。
すべてのデバイスで最適な鮮明さを得るために、1.91:1の比率と最小推奨サイズである1200×630の画像を使用してください。

og:type

共有するオブジェクトの種類。(例：記事、ウェブサイト、など)

シンタックス

<meta property="og:type" content="article" />

ベストプラクティス

記事にはarticleを、それ以外のページにはwebsiteを使用します。
必要に応じて、オブジェクトの種類をさらに説明しましょう（オプション項目です）。

og:description

コンテンツの簡単な説明を行うメタタグです。

シンタックス

<meta property="og:description" content="Learn about 13 features that set Ahrefs apart from the competition." />

ベストプラクティス

タイトルを補完して、できるだけ魅力的でクリックしたくなるようなスニペットにします。
意味があれば、ここにmeta descriptionをコピーします。
短く、わかりやすい文章を心がけましょう。Facebookは2～4行の文を推奨していますが、それでは長すぎて切り捨てられることが多いです。

og:locale

コンテンツの言語を定義します。

シンタックス

<meta property="og:locale" content="en_GB" />

ベストプラクティス

アメリカ英語(en_US)で書かれていないコンテンツにのみ使用してください。Facebookは、このタグがないコンテンツはこの言語（en_US）で書かれているとみなします。

Open Graphタグの設定方法

以下のリストからウェブサイトのプラットフォームを選択するか、こちらのマニュアルに従ってください。

WordPressでOpen Graphタグを設定する

YoastのSEOプラグインをインストールします。投稿またはページのエディタに移動し、下にスクロールします。Yoast SEOのボックスが表示されるはずです。”Social “タブをクリックし、”Facebook “をクリックします。
og:title、og:description、og:imageタグを設定するために記入しましょう。

og:urlを手動で設定する必要はありません。Yoastがあなたの代わりにやってくれます。また、画像サイズなど他の便利なOGタグも追加されます。

注釈：OG画像を設定せず、投稿に強調したい画像が設定されている場合、Yoastはデフォルトでその画像を使用します。また、サイト名や画像サイズなど、手動で設定するのは時間の無駄となる他のOpen GraphやTwitter Cardのタグも追加されます。

サイトワイドのog:imageタグを設定するのもベストプラクティスです。これは、共有URLに対してカスタムタグが設定されていない場合に表示されます。

Yoastの設定欄で、このオプションを見つけることができます。

Yoast > ソーシャル > Facebook

トグルが「有効」に設定されていることを確認し、適切な画像をアップロードしてください。ブランドイメージの画像設定は、ここで最も効果的です。

ShopifyでOpen Graphタグを設定する

ほとんどのShopifyテーマは、タイトルタグをog:title、特集画像をog:imageなどの変数からOGタグを引き出します。

ShopifyのUIでカスタマイズできるタグは、サイトワイドのog:imageだけです。

オンラインストア＞テーマ＞カスタマイズ＞テーマ設定＞カスタマイズ＞ソーシャルメディア＞適切な画像を選択してください。

どのように設定されているかを確認したい場合は、オンラインストア＞テーマ＞アクション＞コードの編集＞スニペット＞スクロールバーのsocial-meta-tags.liquidにアクセスします。必要であれば、コードを編集することができます。

WixにOpen Graphタグを設定する

Wixは、ページのメタタイトルや説明文のような他の変数から、共通のOGタグを引き出します。

各ページのOGタイトル、説明文、画像は、「ソーシャルシェア」設定でカスタマイズできます。

また、サイト全体のカスタムOG画像を設定することも可能です。メインメニューの「設定」>「ソーシャルシェア」を開きます。

全体的に、Wixはハードコードする必要がないため、OGタグを簡単に追加することができます。

SquarespaceでOpen Graphタグを設定する

Squarespaceでは、og:titleとog:descriptionにページタイトルとmeta descriptionを使用しています。

ページごとにカスタムog:imageを設定することができます。

ページ設定」→「ソーシャル画像」→「アップロード」でOKです。

他のOGタグを追加したり、デフォルトの設定をカスタマイズする必要がある場合は、「ページ設定」>「詳細設定」>「ページヘッダーコードインジェクション」にアクセスしてください。タグを手動で追加するための次のセクションを読み、そこにコードをコピーペーストしてください。

Open Graphタグを手動で設定する

OGタグは、Webページの<head>セクションに貼り付けるだけで、簡単に追加することができます。

構文エラーを減らすために、Mega TagsやWeb Code Toolsのようなマークアップ生成ツールの利用を検討してください。

Open Graphタグのテストとデバッグの方法

すべてのタグ配置が完了したら、それらが期待通りに動作し、共有する準備ができていることを確認する必要があります。

そのためには、これらのツールを使ってください。

これらはすべて同じ働きをします。ページからタグを取り出し、共有されたときにどのように見えるかを表示します。

また、OGタグが正しく表示されなかったり、引き出されなかったりする問題を防ぐためにも、テストは有効です。

TIPS

og:image:width と og:image:height タグを使用すると、誰かが最初に共有するときに完璧なスニペットを確保することができます。WordPressでは、Yoastがこれらを自動的に追加します。これはその構文です。

<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

FBシェアリングデバッガーを実際に使ってみると、こんな感じです。

最も重要なのは、スニペットがどのように見えるかです。あまり重要でないタグを見逃したり、間違って設定したりしても、大した問題ではありません。fb:app_idのような重要でないタグに関する警告は無視してもかまいません。

何か不都合なことがあり、タグを更新した場合は、「Scrape Again」ボタンを使って新しいデータを取り出します。クロールしても変化が見られない場合は、「Batch Invalidator」を使ってキャッシュをクリアし、繰り返します。

Twitter Card ValidatorとLinkedIn Post Inspectorでこのプロセスを繰り返し、すべてのネットワークでコンテンツが意図したとおりに表示されるようにします。

注釈：robots.txtのディレクティブに従うのはTwitterbotだけということがわかりました。FacebookもLinkedInも、クロールを許可していなくても、クローラーがスクレイピングしてコンテンツを表示することができます。これは意外でしたが、Twitterのためだけでも、共有するURLはすべてクロールできるようにしましょう。