CMS「すぐ使えるCGI」の開発者がご質問にお答えします

 

Open Graph Tagのimgタグについて (記事ごとに画像を変える) (No. 1248)

回答日: 2012-10-29

質問

製品名 :すぐ使えるCGI 画像付 ウェブページ更新ツール 大容量版 shift_jis
バージョン:Ver 4.3 

お世話になっております。早速ではございますが、

Open Graph Tagの

<meta property="og:image" content="☆☆☆" />

の「☆☆☆」の部分に(画像付 ウェブページ更新ツール)を使ってアップロードした画像を指定したいのですが、
「%_article_image_1_% 」で試した所うまく表示できません。
作成したページ事に画像URLを変更する事は可能でしょうか?

お手数ではございますが、ご教授の程よろしくお願い致します。

WEBに関して素人のためうまくお伝えできていないかもしれません。
情報に不足がございましたらお申し付け下さい。
投稿日時: 2012-10-28 23:32

回答

「すぐ使えるCGI」のご利用ありがとうございます。

■概要
Open Graph Tag の画像を記事ごとにアップロードした画像にするには、以下のように編集して下さい。

1.
templates/article/article_image_1.txt に Open Graph Tag のメタタグを設定

2.
templates/article/article.html の編集では、「%_article_image_1_%」をヘッダ内に移動。


■サンプルコード
例えば、以下のようになります。
URL情報などは、設置先のサイトに合わせて変更して下さい。

○templates/article/article_image_1.txt の内容(全体)

=================================
<meta property="og:image" content="http://www.example.com/path/to/webdir/%_d_%/%_filename_escaped_%" />
=================================


○templates/article/article.html の内容(例、一部分)

=================================
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>%_subject_% (%_yyyy_%-%_mm_%-%_dd_%)</title>
<!-- Open Graph Tag ここから -->
<meta property="og:title" content="%_subject_% - SITE NAME">
<meta property="og:type" content="article">
<meta property="og:url" content="http://www.example.com/path/to/webdir/%_d_%.html">
%_article_image_1_% <!-- 記事ごとにアップロードする画像を指定 -->
<meta property="og:site_name" content="SITE NAME">
<!-- Open Graph Tag ここまで -->
<link rel="alternate" type="application/rss+xml" title="NEWS" href="new.xml">
</head>
=================================


■確認

テンプレートを編集後、サーバに上書きアップロード → キャッシュをクリア → 再読み込みしてご確認下さい。
なお、一つのURLに対して既に Facebook の方に登録されてしまった画像がある場合、それが置き換わるのは数日かかるようです。

■参考サポート情報
「記事ページに Facebook の「いいね!」ボタンと Open Graph Tag を設定する方法」
http://sugutsukaeru.jp/support/244/


◆いただいた入力からの変更点
タイトルに詳細情報を追記しました
回答日: 2012-10-29