[{"data":1,"prerenderedAt":292},["ShallowReactive",2],{"\u002Fogp-checker\u002Fja":3},{"id":4,"title":5,"body":6,"description":271,"extension":285,"meta":286,"navigation":287,"path":288,"seo":289,"stem":290,"__hash__":291},"content\u002Fogp-checker\u002Fja.md","Ja",{"type":7,"value":8,"toc":270},"minimark",[9,14,30,33,36,54,57,60,150,153,156,161,175,178,182,190,193,197,200,221,224,227,241,244],[10,11,13],"h2",{"id":12},"ogpチェッカーとは","OGPチェッカーとは？",[15,16,17,18,22,23,22,26,29],"p",{},"指定した URL から OGP と Twitter Card のメタデータを取得し、X と Facebook での見え方を確認できるツールです。",[19,20,21],"code",{},"og:title","、",[19,24,25],{},"og:description",[19,27,28],{},"og:image"," などの値を一覧で見ながら、シェアカードのプレビューも確認できます。",[15,31,32],{},"公開前の OGP 確認、画像差し替え後の見え方チェック、タイトルや説明文の調整確認をしたいときに便利です。",[10,34,35],{"id":35},"使い方",[37,38,39,43,46,49],"ol",{},[40,41,42],"li",{},"確認したいページ URL を入力します。",[40,44,45],{},"チェックを実行します。",[40,47,48],{},"抽出されたメタデータ一覧を確認します。",[40,50,51,53],{},[19,52,28],{}," がある場合は、X と Facebook のプレビューを確認します。",[15,55,56],{},"プレビューは X では複数のカード表示とテーマ、Facebook では PC \u002F モバイル表示を見比べられます。",[10,58,59],{"id":59},"確認できる主な項目",[61,62,63,68,73,77,81,86,91,96,100,105,110,115,120,125,130,135,140,145],"ul",{},[40,64,65],{},[19,66,67],{},"title",[40,69,70],{},[19,71,72],{},"description",[40,74,75],{},[19,76,21],{},[40,78,79],{},[19,80,25],{},[40,82,83],{},[19,84,85],{},"og:site_name",[40,87,88],{},[19,89,90],{},"og:url",[40,92,93],{},[19,94,95],{},"og:type",[40,97,98],{},[19,99,28],{},[40,101,102],{},[19,103,104],{},"og:image:width",[40,106,107],{},[19,108,109],{},"og:image:height",[40,111,112],{},[19,113,114],{},"og:image:alt",[40,116,117],{},[19,118,119],{},"og:locale",[40,121,122],{},[19,123,124],{},"twitter:card",[40,126,127],{},[19,128,129],{},"twitter:site",[40,131,132],{},[19,133,134],{},"twitter:creator",[40,136,137],{},[19,138,139],{},"twitter:title",[40,141,142],{},[19,143,144],{},"twitter:description",[40,146,147],{},[19,148,149],{},"twitter:image",[15,151,152],{},"基本の title \u002F description と OGP \u002F Twitter Card の差を一度に見たいときに向いています。",[10,154,155],{"id":155},"プレビューで見られる内容",[157,158,160],"h3",{"id":159},"x","X",[61,162,163,166,169,172],{},[40,164,165],{},"PC Large Image",[40,167,168],{},"モバイル Large Image",[40,170,171],{},"PC Summary",[40,173,174],{},"モバイル Summary",[15,176,177],{},"ライト \u002F ダークブルー \u002F ダークのテーマ切り替えもできます。",[157,179,181],{"id":180},"facebook","Facebook",[61,183,184,187],{},[40,185,186],{},"PC",[40,188,189],{},"モバイル",[15,191,192],{},"ライト \u002F ダークのテーマで見え方を比較できます。",[10,194,196],{"id":195},"参考-ogp画像サイズとアスペクト比","参考: OGP画像サイズとアスペクト比",[15,198,199],{},"OGP画像の見え方を安定させたい場合は、X と Facebook の両方で使いやすい横長画像を基準にすると確認しやすくなります。",[61,201,202,209,215,218],{},[40,203,204,205,208],{},"目安にしやすいサイズは ",[19,206,207],{},"1200 × 630px"," 前後",[40,210,211,212],{},"アスペクト比の目安は ",[19,213,214],{},"1.91:1",[40,216,217],{},"X の Large Image と Facebook のシェア画像をまとめて確認したいときは、この比率を基準にすると比較しやすくなります",[40,219,220],{},"画像内の重要な要素や文字は中央寄りに配置すると、切り取りの影響を受けにくくなります",[15,222,223],{},"実際の表示はプラットフォーム側の仕様変更やキャッシュの影響を受けることがあるため、最終確認はプレビューを見ながら行うのがおすすめです。",[10,225,226],{"id":226},"活用シーン",[61,228,229,232,235,238],{},[40,230,231],{},"公開前に OGP 設定の抜けを確認したいとき",[40,233,234],{},"シェア画像や説明文を差し替えたあとに見え方を見直したいとき",[40,236,237],{},"X と Facebook でどのように切り取られるかを確認したいとき",[40,239,240],{},"他ページの OGP 設定を整理して確認したいとき",[10,242,243],{"id":243},"使うときの注意点",[61,245,246,249,259,262,265],{},[40,247,248],{},"取得できるのは対象ページに実際に書かれているメタタグです",[40,250,251,254,255,258],{},[19,252,253],{},"http"," \u002F ",[19,256,257],{},"https"," の URL が必要で、アクセスできないページは確認できません",[40,260,261],{},"同じ URL を短時間で再確認した場合、このツール側のキャッシュにより直前の取得結果がしばらく表示されることがあります",[40,263,264],{},"OGP を変更しても、SNS 側のキャッシュにより実際の表示更新が遅れることがあります",[40,266,267,269],{},[19,268,28],{}," がない場合は、画像付きプレビューは表示されません",{"title":271,"searchDepth":272,"depth":272,"links":273},"",2,[274,275,276,277,282,283,284],{"id":12,"depth":272,"text":13},{"id":35,"depth":272,"text":35},{"id":59,"depth":272,"text":59},{"id":155,"depth":272,"text":155,"children":278},[279,281],{"id":159,"depth":280,"text":160},3,{"id":180,"depth":280,"text":181},{"id":195,"depth":272,"text":196},{"id":226,"depth":272,"text":226},{"id":243,"depth":272,"text":243},"md",{},true,"\u002Fogp-checker\u002Fja",{"description":271},"ogp-checker\u002Fja","xViTVZ1aJejUvK7fCG4En0Fhs9IFidUv0s7GwB_zE3U",1778928546345]