先日SNSで知人のサイトを紹介するためにURLを張り付けたら、大体のSNSはカード形式に装飾され見た目が良くなる機能が多いのだが、中にある写真がサイトとはあまり関係ない画像を適用されていた。
別のサイトを同じように張り付けるとロゴだったり、その記事の最初に表示される画像だったりとまちまち。
何か基準でもあるのかSNS側の仕様があるのか分からないと思ってたんだけど、実はサイト側でもいくらか予め設定って出来るんだって気づきました。
それは「OGP」（Open Graph Protocolの略）。
SNSでWEBサイトをシェアしたときに概要や画像を用いてカード式に装飾して表示する仕組みのことだそう。
そのOGPはHTMLのheadタグ内で設定が可能なんだそうだ。もはや標準でもあるらしいですｗ
ということで、標準的なものは以下のような内容でまずは十分らしい。
最初にheadタグよりもっと上のHTMLタグに一つ加えます。
<html lang="ja" prefix="og: http://ogp.me/ns#">
そして次にheadタグ内にmetaタグを使って以下のものを追加します。
<meta property="og:title" content="ページタイトル">
<meta property="og:description" content="ページ概要">
<meta property="og:url" content="ページURL">
<meta property="og:image" content="画像の絶対パス">
上記の４つでSNSにリンク貼った時のカード式表示の装飾に必要な情報は揃っているんだそう。次二つは別になくても良いみたいなんだけど、あると親切なんだとか。
<meta property="og:site_name" content="サイトの名前">
<meta property="og:type" content="website">
というわけで、WPに組み込むとしたら以下のようにheadタグ内に入れておくと、編集も管理画面内でサイトの名前、概要も変更できるし、タイトルも自動で変わるので助かります。
<meta property="og:title" content="<?php echo get_the_title(); ?>">
<meta property="og:description" content="<?php echo get_bloginfo("description"); ?>">
<meta property="og:site_name" content="<?php echo get_bloginfo("name"); ?>">
<meta property="og:type" content="website">
<meta property="og:url" content="<?php echo get_bloginfo("url"); ?>">
<meta property="og:image" content="<?php echo get_bloginfo('template_url'); ?>/img/logo.png">
表示する画像はロゴにしておけばFTPなどで変更できるけど、独自にカスタマイズで変更できるようにするのも良いけど今回は割愛。