EC AIエージェント対応診断 > 記事

OGPの書き方【ネットショップ向け・コピペ用】商品ページを共有したときの画像と題名を整える

商品ページのURLがSNSやメッセージで共有されると、題名・説明・画像が入った「カード」が表示されることがあります。このカードの中身を決めているのがOGP(Open Graph Protocol)です。もともとFacebookで作られた決まりで、ページの<head>に<meta>タグを数行足すだけで設定できます。OGPが無いと、カードにどの画像や文が使われるかを店の側で決められません。お客さんが友だちに商品を紹介するとき、そのカードが「店の顔」になります。

必須は4つだけ

OGPの公式仕様(ogp.me)では、すべてのページに必要な項目を次の4つとしています。

• og:title … 題名。商品ページなら商品名。
• og:type … ページの種類。
• og:image … 共有されたときに出す画像のURL。
• og:url … そのページの正式なURL。

あわせて、og:description(1〜2文の説明)、og:site_name(店名)、og:locale(言語と地域。日本語のページならja_JP)も、一般に推奨されています。

商品ページ用のコピペ例

<meta property="og:title" content="本革の二つ折り財布 ブラウン">
<meta property="og:type" content="website">
<meta property="og:url" content="https://あなたの店/products/wallet-brown">
<meta property="og:image" content="https://あなたの店/images/wallet-brown-1200x630.jpg">
<meta property="og:image:alt" content="ブラウンの本革二つ折り財布を開いて置いた写真">
<meta property="og:description" content="牛革を一枚ずつ縫い上げた二つ折り財布。カードは12枚まで入ります。">
<meta property="og:site_name" content="(店名)">
<meta property="og:locale" content="ja_JP">

• og:titleには店名を付けない … Metaは、題名に店名などの飾りを付けないよう勧めています。店名はog:site_nameに書きます。
• og:urlは「素のURL」 … セッションIDや、利用者を見分けるための付け足しが付いていないURLを書きます。
• 中身はページと合わせる … 題名・説明・画像は、そのページで実際に見えている商品と同じにします。

テーマ(テンプレート)を編集できるカートなら、商品名・説明・メイン画像が自動で入る形で一度書いておけば、全商品に反映できます。カートやテーマによっては最初から出力されていることもあるので、まずは今の状態を確かめましょう(確かめ方は下で説明します)。

og:typeは何にする？

ogp.meが定める種類(website・article・profile・bookなど)には、商品専用のものがありません。仕様には「印の無いページはwebsiteとして扱う」と書かれていて、Metaの説明でも、指定が無い場合はwebsiteになります。迷ったらwebsiteで構いません。

画像は横長で1200×630ピクセル以上

• Metaは、高解像度の画面できれいに表示するため、1200×630ピクセル以上の画像を勧めています。最小は200×200ピクセルです。
• 縦横の比率は1.91:1にできるだけ近づけると、画像が切れずに表示されやすくなります。
• ファイルの大きさは8MBまでです。
• og:imageを書いたら、画像の中身を説明するog:image:altも書くよう、仕様で勧められています。キャッチコピーではなく「何が写っているか」を書きます。

うまく出ないときの確かめ方

• まずページのソースを見る … ブラウザでページを右クリックし「ページのソースを表示」を選ぶと、og:で始まるタグがあるかを確認できます。
• Facebookは「シェアデバッガー」で … MetaのシェアデバッガーにURLを入れると、読み取ったタグとエラーや警告が表示され、同時にページの読み直しもされます。ただし、すでに投稿されている共有のプレビューは、画像を変えても自動では変わりません。
• XやLINEは実際に送って確かめる … 表示のしかたは各サービスが決めています。自分宛てに送ってみるのが確実です。

トップページのOGPは診断の採点対象

当サイトの無料診断は、トップページのtitle・description・og:title・og:imageがそろっているかを「店の名刺」の項目として採点します。有料版で作る修正コードも、商品ページのog:title・og:description・og:imageなどを材料に使います。あなたの店の現状は、URLを入れるだけで60秒で確認できます(登録不要)。

トップへ戻る ｜ 特定商取引法に基づく表記