Developer SEO Utility
Open Graph プレビュー
タイトル、説明、URL、代表画像URLを入力すると、KakaoTalk、Facebook、X/Twitterの共有カードを確認し、OG/Twitter metaタグを生成できます。
Open Graph情報入力
共有プレビューに使うタイトル、説明、URL、代表画像の情報を入力してください。
0/60文字推奨
0/150文字推奨
og:urlとtwitter:urlに使用されます。
og:imageとtwitter:imageに使用されます。
og:site_nameに使用されます。
共有コンテンツの種類です。
共有プレビュー
各プラットフォームで共有カードがどのように見えるか確認できます。
共有説明がここに表示されます。
win-j.com共有説明がここに表示されます。
共有説明がここに表示されます。
https://example.com/page/生成結果
以下のコードをHTMLのhead領域に追加してください。
情報を入力してOGタグを生成ボタンをクリックしてください。
Open Graphチェック項目
共有プレビューの品質は、タイトル、説明、画像、正規URLの設定で変わります。
共有カードのメインタイトルです。長すぎると省略されるため、短く明確に書くのがおすすめです。
共有カードの説明欄に表示されます。ページ内容を簡潔に要約するとクリック率の改善に役立ちます。
リンク共有時に最も目立つ画像です。1200x630pxの横長サムネイルをおすすめします。
ヘルプ
Open Graph Previewとは？
Open Graph Previewは、リンクをKakaoTalk、Facebook、Twitterなどで共有したときのカード表示を確認し、metaタグを生成する開発者向けSEOユーティリティです。
ブログ記事、ユーティリティページ、ランディングページ、商品ページの共有タイトル、説明、代表画像の見え方を確認できます。
使い方
- 共有タイトル、説明、ページURL、代表画像URL、サイト名を入力します。
- 文字数チェック、画像URLチェック、Twitter Cardタグの有無を選択します。
- KakaoTalk、Facebook、Twitterタブで共有カードの見え方を比較します。
- OGタグを生成し、HTMLのhead領域に追加します。
推奨OG画像サイズ
推奨比率: 1.91:1の横長画像
例: 1200 x 630px
推奨テキスト長
タイトルは約60文字、説明は約150文字にすると、共有カードでの省略を減らせます。
推奨画像比率
代表画像には1200x630px、または1.91:1の横長画像がおすすめです。
Open GraphタグはSEOに直接影響しますか？
Open Graphタグは検索順位そのものより、SNSやメッセンジャーでの共有プレビュー品質に直接影響します。明確なタイトル、説明、画像は共有リンクのクリック率向上につながる可能性があります。
KakaoTalkで画像がすぐ更新されないのはなぜですか？
KakaoTalkやSNSは一度取得したOG情報をキャッシュすることがあります。変更がすぐ反映されない場合は、各プラットフォームの共有デバッガーでキャッシュを更新してください。
og:imageに相対パスを使えますか？
できるだけhttps://で始まる絶対URLを使ってください。相対パスは一部のプラットフォームで正しく取得されない場合があります。
Twitter Cardタグも必要ですか？
Open Graphタグだけでも多くのプラットフォームでプレビューできますが、X/Twitterでの共有品質も重視するならtwitter:card、twitter:title、twitter:description、twitter:imageを追加するのがおすすめです。
生成したタグはどこに入れますか？
生成したmetaタグはHTML文書のhead領域に追加します。Djangoテンプレートではbase templateのmeta block、または各ページのSEO blockで管理できます。