1. マニュアル

OGP(Open Graph Protocol)表示

OGPとは

OGPとは「Open Graph Protcol」の略で、FacebookやTwitterなどのSNSでwebページやブログの記事がシェアされた時、設定したWEBページのタイトルやイメージ画像、詳細などを表示させる仕組みのことです。




OGP(Open Graph Protocol)設定について

OGPタグを有効にすることで以下のページにOGPタグを設置することができます。
・TOPページ
・商品詳細ページ
・カテゴリページ
・フリーページ
・LPフォーム


OGPタグを有効にする手順

1. OGP用のメイン画像をアップロード
メイン画像(TOPページ等)アップロード先: upload/ogp_image/top/main(.jpg|.png|.gif)
例: upload/ogp_image/top/main.jpg

メイン画像が存在しない場合、全てのページでOGPタグが設置されません。
まずはメイン画像をアップロードしてください。

2. ogp.tpl を読み込む記述を追加
・templates/テンプレートディレクトリ名/site_frame.tpl
・smp/templates/テンプレートディレクトリ名/site_frame.tpl
上記テンプレートファイルのmetaタグ付近にogp.tplを読み込む記述を追加
※pr_default ディレクトリ直下の site_frame.tpl を参考に以下のタグを挿入してください。
<!--{include file=$smarty.const.FTPROOTPATH|cat:"/ogp_template_files/ogp.tpl"}-->
3. 優先するOGP画像をアップロード(任意)
商品詳細ページ・カテゴリページ・フリーページ・LPページで、
優先して設定したいOGP画像がございましたら下記を参考にアップロードして下さい。


OGP用優先画像アップロード先

【商品詳細】
表示優先順位
upload/ogp_image/product/【商品ID】(.jpg|.png|.gif)>商品の「詳細-メイン拡大画像」>商品の「詳細-メイン画像」
例: upload/ogp_image/product/27.jpg

【カテゴリーページ】
表示優先順位
upload/ogp_image/category/【カテゴリID】(.jpg|.png|.gif) > メイン画像
例: upload/ogp_image/category/13.png

【フリーページ】
表示優先順位
upload/ogp_image/free_page/【http://■■/pages/●●の●●部分】(.jpg|.png|.gif)>メイン画像
例: upload/ogp_image/free_page/access_map.jpg

【LP】
表示優先順位
upload/ogp_image/lp/【LPフォームキー】(.jpg|.png|.gif)>メイン画像
例: upload/ogp_image/lp/rice.jpg


titleやdescription等の記述

titleやdescription等の記述は、/ogp_template_files/tpl/common.tpl 内の記述をベースに、
他のtplファイル内の記述を行っていただけますようお願いいたします。

注意 FacebookにてOGPタグが反映されない場合は、FacebookのDebuggerでFacebook側のキャッシュ削除をお試しください。

この記事の目次

  1. OGPとは
  2. OGP設定について

ありがとうございました。
よろしければ、ご意見をお聞かせください。

件名、コメントをご入力いただき、『送信』ボタンをクリックしてください。

ご意見を送られない場合は、『閉じる』ボタンをクリックしてください。

件名:

お問い合わせ内容:

閉じる