Developer SEO Utility
Open Graphプレビュー
タイトル、説明、URL、代表画像URLを入力すると、KakaoTalk・Facebook・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の設定によって変わります。
共有カードの主要タイトルです。長すぎると省略される可能性があるため、短く明確に書くことをおすすめします。
共有カードの説明欄に表示されます。ページ内容を簡潔に要約すると、クリック率の改善に役立ちます。
リンク共有時に最も大きく表示される画像です。1200×630pxの横長サムネイルをおすすめします。
ヘルプ
Open Graphプレビューとは？
Open Graphプレビューは、リンクをKakaoTalk、Facebook、Twitterなどに共有したときに表示されるカードを確認し、metaタグを生成する開発者向けSEOユーティリティです。
ブログ記事、ユーティリティページ、ランディングページ、商品ページの共有タイトル・説明・代表画像がどのように表示されるか確認できます。
推奨OG画像サイズ
- 推奨比率: 1.91:1の横長画像
- 例: 1200 × 630px
- 重要なテキストは画像の中央付近に配置することをおすすめします。
- 画像URLは外部からアクセス可能な絶対URLを使用することをおすすめします。
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で管理できます。