こんにちは！たねなえドットコムです。
今日はたねなえドットコムオンラインストアの商品紹介をもっと簡単に
という目的でFacebookやTwitterに商品ページのURLを記載すると
商品写真と説明文が表示されるリンクが現れるOGPの設定に四苦八苦・・・。
発端は友人の指摘からでした。
「tanenae.com側の商品リンク貼ろうとしたんだけど、画像が出てきてくれなかった」
「meta の og:image がセットされてないと思う」
おお、そういえばヤフーは対応していたけどtanenae.comのリンクを入れても
ただリンクが表示されるだけだった！meta情報にそれ入れればいいんだな。
そんな軽いノリで手を付けたもののプログラムに疎い私は大苦戦。
そもそもOGPってなんなのか
OGPというのは、FacebookやTwitterなどにWebページをシェアする際に、そのページの記事のタイトル、画像、商品説明といった情報を各ソーシャルメディアに伝えるためのHTMLの内に追加するメタ要素
とまぁ概要はこうです。
実際に実装してみようと思って手を付けたのですが、オンラインショップ側は単に追加するメニューなどが無くtwigというPHPのテンプレートブロックのようなものを直接編集という事に。
ある程度自分で組める方ならちょちょいのちょいでやれてしまうんでしょうが大変でした。
最初に引っかかったのは試しに編集して更新、反映・・・されない？なんで？？？
という初歩的なところからでした。
ECCUBE3でオンラインショップを構築していたんですが、キャッシュが残っていたことが原因でした。これについては
/app/cache/twig/production/default/
この中に格納されているキャッシュファイルを削除する事で問題なく解決。
編集⇒アップロード⇒キャッシュ削除⇒反映結果確認を何度も繰り返し
その後試行錯誤の末SNSサービスへの投稿にURLを入力、商品名・商品情報まで表示される事ができ、ようやっと出来た！と思ったのも束の間、今度は画像が表示されません・・・・。
商品ページのソースコードを確認して見ると確かに商品画像のURLを参照出来ていません。
商品ページの detail.twig を見てみると画像を引っ張ってくるコードとして
<img src="{{ app.config.image_save_urlpath }}/{{ ProductImage|no_image_product }}"/>
<img src="{{ app.config.image_save_urlpath }}/{{ ''|no_image_product }}"/>
この辺なのですが、さっぱり上手くいきません。
うーーーーん、と悩み悩んで1日目終了。
2日目の今日もこの問題と向き合ってこちらも何とかクリアする事ができました。
そして更なる問題、Facebookは成功しましたがTwitterでは反映されません・・・。
しかしこちらは単純、一行加えればOKだという事で早速下記の行を追加しました。
<meta name="twitter:card" content="summary">
・・・。これだけではダメでした。
<meta property="og:description" content="{{ PageLayout.description }}" />
このog:descriptionという行も必要なんですね。これは商品説明や概要を指すものです。
汚いソースコードかとは思いますが備忘録として残す意味で最終的なコードがこちらです。
<meta name="twitter:card" content="summary">
<meta property="og:description" content="{{ PageLayout.description }}" />
<meta property="og:site_name" content="{{ BaseInfo.shop_name }}"/>
<meta property="og:title" content="{{ Product.name }}"/>
<meta property="og:image" content=
{% if Product.ProductImage|length > 0 %}{% for ProductImage in Product.ProductImage %}
"http://www.tanenae.com{{ app.config.image_save_urlpath }}/{{ ProductImage|no_image_product }}"/>
{% endfor %}
{% else %}
"http://www.tanenae.com{{ app.config.image_save_urlpath }}/{{ ''|no_image_product }}"/>
{% endif %}
このような形で解決となり、TwitterやFacebookへ商品紹介しやすくなりました。
また、商品を追加したら自動的に商品情報を反映しますのでもう弄らなくて良さそうです。
大変でしたがいい勉強になりました。
長文失礼しました。それではまた！