Open Graphタグの解説
ホーム Open Graphタグの解説とライブタグ作成ツール | We.Inc
必須の4つのOpen Graphタグ、画像のプロパティ、og:typeの値、記事用のタグを注釈付きで解説します。head用のマークアップを書き出す作成ツールも用意しています。
Open Graphタグの解説
Open Graphタグは、ページのヘッド部分に置くメタ要素で、リンクが共有されたときの見た目を決めます。プロトコルで必須とされているのは、og:title、og:type、og:image、og:urlの4つです。いずれもproperty属性を使い、たとえばmeta property="og:title" content="..."のように書きます。より良いプレビューにするには、og:description、og:site_name、画像の幅、高さ、代替テキストも追加しましょう。
必須の4つのプロパティ
og:type オブジェクトの種類。websiteやarticleなど 共有時のプレビューは、ほんの数個のタグから作られますが、細かいところで間違えやすいものです。相対パスの画像、幅と高さの指定漏れ、title要素にしかないタイトルなどがその例です。作成ツールに入力して正しいマークアップを手に入れ、それから各プロパティの役割を読んでみてください。
作成ツールに、タイトル、説明文、ページのURL、画像のURLを入力します。 種類を選びます。ほとんどのページはwebsite、ブログ記事はarticleです。 おおよそのプレビューカードを確認し、生成されたタグをページのheadにコピーします。 各SNSはプレビューをキャッシュするため、公開中のページを各プラットフォーム公式のシェアデバッガーでテストしましょう。 og:imageとog:urlには、httpsで始まる絶対URLを使いましょう。相対パスは、プレビューに画像が表示されないよくある原因です。 og:image:widthとog:image:heightを含めましょう。そうすればアプリはファイルを計測しなくても、タグから画像の形を把握できます。 SNSでスクリーンリーダーを使う人のために、og:image:altを書きましょう。 画像を変更するときは、新しいファイル名を使いましょう。プラットフォームは画像をキャッシュするため、古いURLを使い回すと以前の画像が表示され続けることがあります。 よくある質問
Open Graph画像のサイズはどれくらいにすべきですか？
プロトコルではサイズは定められていません。1200×630ピクセルは広く使われている横長のサイズで、Next.jsのドキュメントの例でも使われています。アプリによっては画像を切り抜くため、重要な文字は端から離して配置しましょう。
Open GraphタグはSEOに効果がありますか？
その役割は共有カードであり、検索順位ではありません。わかりやすいタイトルと画像があれば、チャットやフィードでリンクが共有されたときに、より多くのクリックを得られます。og:titleはtitle要素と一致させ、どこで表示されてもページが同じように説明されるようにしましょう。
Open Graphタグはなぜnameではなくpropertyを使うのですか？
このプロトコルはproperty属性を使うRDFaをベースにしているからです。ogp.meの例ではmeta property="og:title"と書かれています。一方Twitterカードのタグは、meta name="twitter:card"のようにname属性を使います。
Twitterカードのタグはまだ必要ですか？
少なくともtwitter:cardは追加し、大きな画像のレイアウトにしたい場合はsummary_large_imageを指定しましょう。多くのアプリは、対応するtwitterタグがない場合にタイトル、説明文、画像としてogの値を読み取ります。ただしプラットフォームのルールは変わるため、このフォールバックが機能すると決めつける前に、公開中のURLでテストしてください。
1つのページに複数のog:imageを設定できますか？
はい。プロトコルでは配列が認められています。og:imageタグを繰り返し、各画像の幅、高さ、代替テキストは、対応する画像のすぐ後に置きます。値が矛盾する場合、プロトコルでは上にある最初のタグが優先されます。
構造化プロパティは直前のタグに属する
og:image:widthのようなプロパティは、その前に宣言された直近のog:imageを説明します。順序が重要で、まず画像を宣言し、次にその幅、高さ、種類、代替テキスト、そして次の画像という順に並べます。 og:image:secure_urlは、同じ画像の追加のhttpsアドレスです。og:imageがすでにhttpsを使っていれば不要です。 種類と追加のタグ
websiteは、特定の種類のオブジェクトではないページ向けのデフォルトです。記事型（article）を指定すると、article:published_time、article:modified_time、article:author、article:section、article:tagが使えるようになります。 プロトコルではbook、profile、さらにmusicとvideoのグループも定義されています。これらはページが本当にそのオブジェクトである場合にだけ使いましょう。商品ページは通常、ウェブサイト型（website）です。 全プロパティの注釈付き一覧
任意および構造化のOpen Graphプロパティ
og:description タイトルの下に表示する1〜2文 Leeds全域で即日の屋根修理 og:site_name サイト全体の名前 Northside Roofing og:locale 言語と地域。デフォルトはen_US en_GB og:locale:alternate ページが存在する他の言語 fr_FR og:determiner 文中でタイトルの前に付く語 a、an、the、空、またはauto og:image:secure_url 画像のhttpsアドレス og:image:type 画像のMIMEタイプ image/jpeg og:image:alt 画像の説明 スレート瓦を取り付ける屋根職人 og:video / og:audio ページに添える動画または音声ファイル og:typeの値
プロトコルで定義されている種類
music.song, music.album, music.playlist, music.radio_station 音楽のページ video.movie, video.episode, video.tv_show, video.other 動画のページ コピーして使える例
企業ページ向けの完全なセット
まず必須のタグ、次に説明文、サイト名、そして構造化プロパティを伴う画像ブロックを置きます。
記事用タグ付きのブログ記事
prefix属性で名前空間を宣言します。日付はISO 8601形式を使います。
Leedsの屋根修理 | Northside Roofing
Leeds全域で即日の雨漏り修理と書面での無料見積もりを提供します。
テラスハウスにスレート瓦を取り付ける屋根職人
画像のURLは、https://で始まる絶対URLにしてください
ページのURLは、https://で始まる絶対URLにしてください
og:titleは必須です
Open Graphタグ作成ツール
項目を入力すると、タグとおおよその共有カードが生成されます。実際のアプリはそれぞれ独自にカードを描画するため、プレビューは目安としてご利用ください。
og:image（1200×630を想定）
共有カードのイメージ
画像エリア
head用のタグ
タグをコピー
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る