プラグインを使わずにOGP、Twitter Cardsを設定する

のんびりと作っているサイトがほとんど完成に近づいてきました。

Facebook用のOGPタグとTwitter Cards用のタグを設置します。Twitter Cardsのほうがテキスト量の上限が少ないこと以外はOGP用のタグを設定しておけばTwitter Cards用にも使われます。

記事の内容

1 Open GraphとTwitter Cards
2 WordPressに設置する
3 Joomla!に設置する
4 バリデーター
- 4.1 Open Graph
- 4.2 Twitter Cards

Open GraphとTwitter Cards

FacebookやTwitterでウェブサイトをシェアした時に、どのように見えるかを指定するための指示書のようなものです。

Twitter Cardsは一部を除き、Twitter Cards用の設定がなくてもOpen Graphの設定を使う用になっていますので、記載は最低限で良いです。

設定すると、ツイッターの140文字制限を超えてコンテンツを盛ったツイートをすることが出来ます。（海外では、テキストを書いた画像を使って140文字制限をなくすのが流行っているようです。検索できないので辛いですよね）

WordPressに設置する

WordPress用のプラグインはたくさん出回っていますし、このサイトで使っているテーマのSimplicityでは自動的に設置してくれます。

ただ、サイトに応じた設定を突き詰めるなら、自分で設置するほうがベターです。（突き詰める意味があるかは置いておいて・・・）

WordPressにプラグインを使わずに設置する方法を詳しく書かれた記事を見つけました。

http://millkeyweb.com/wordpress-ogp/

使っているテーマのPHPファイル内で設定します。編集するファイルは、ヘッダ部分を生成するheader.phpと、複雑な場合はfunction.phpで関数にします。

Joomla!に設置する

例によって、お気に入りCMSのJoomla!です。プラグインライブラリ（JED)を検索するといくつか出てくるものの、今のところ満足行く出来のものはないと思います。

Joomla!の場合は、テンプレート内もしくは記事表示ファイルをオーバーライドすることで設置します。

Joomlaテンプレート

Joomla!のテンプレートは、テンプレートごとに内部構造が大きく違うので、どこを改変すると何が起こるのか調べるのは大変です。以前使っていたT3系列の場合は、テンプレートフォルダ内tplsに表示用ルーチンが入っていて、

tpls/スタイルファイル.php
tpls/blocks/設定したブロック
tpls/blocks/mainbody/複数カラム構造の場合のサイドバー設定など

をいじれば大体なんとかなりましたが、テンプレートフォルダ外にもT3フレームワークがインストールされていて、すべてを操るのは私には無理でした。

今回の新サイト用に選択したGantryはもっと意味がわかりません。

com_contentのオーバーライド

幸い、OGなどのメタタグを設置するだけなら、テンプレートをいじり倒さなくてもJoomlaのコンテンツ表示部分であるcom_contentにオーバーライド（WordPressでいう子テーマ？）を作成すれば大丈夫です。

WordPressの子テーマと同じく、元ファイルがアップデートされた場合に消えてしまうことがないので便利です。

“article”のオーバーライドを行うと個別記事の設定、”category”でカテゴリー新着記事ページの設定を出来ます。（タグなどのページに設定する方法がわかりません）

FLEXIcontentでの設定

最近お気に入りのFLEXIcontentはcom_component全体をオーバーライドしてしまうのと、記事表示にcom_contentを使わないので、上記のcom_contentをオーバーライドする方法は（恐らく）無効です。

FLEXIcontentでは、FLEXIcontentコンテンツ用の「テンプレート」が備わっているので、その中でitem.phpもしくはitem_html5.phpを編集すれば実現出来ます。

OGP・Twitter Cardsタグを設置するためのコード

上記のいずれの方法を採る場合でも、設置用のコードはほとんど共通です。

$doc = JFactory::getDocument();
$doc->addCustomTag('
<meta name="twitter:card" content="summary">
<meta property="og:type" content="article"/>
.....
.....
.....
');

JoomlaのフレームワークAPIであるJFactory::getDocumentを使ってドキュメントオブジェクトを取得し、カスタムタグをHTMLヘッダ内に送り込む関数addCustomTagを呼び出します。

記述のメインであるdescriptionには大体の文字数制限があって、Facebookなどで使われるOpen Graph（OG）は300文字、Twitterで使われるTwitter Cardsは200文字のようです。日本語のような文字でも1文字は1文字として扱われるのでTwitter Cardsの200文字でも結構余裕がありますが、英文だと短く感じる数字ですので、私はdescriptionはTwitter Cards用とOpen Graph用と分けています。

設定するタグ

コンテンツタイプ

<meta property=”og:type” content=”article”/>
<meta property=”og:type” content=”website”/>

Open Graphタグ

<meta property=”og:title” content=””/>
<meta property=”og:url” content=””/>
<meta property=”og:site_name” content=””/>
<meta property=”og:description” content=””/>
<meta property=”og:image” content=””/>
<meta property=”fb:app_id” content=”302**405**773**” />

必須タグはog:titleとog:typeのみですが、設定しておいたほうが良さそうなタグは上記になります。

og:typeとしてarticleを選んだ場合には、article:publisher（フェイスブックページのURLもしくはID）、article:author（フェイスブックプロフィールのURLもしくはIDのリスト）、article:tag（関連するタグのリスト）といった追加出来ます。

https://developers.facebook.com/docs/reference/opengraph/object-type/article/

Twitter Cardsタグ

<meta name=”twitter:card” content=””>
<meta name=”twitter:site” content=””>
<meta name=”twitter:creator” content=”” />
<meta property=”twitter:description” content=””/>

twitter:siteは混乱を招く名前だと思うのですが、twitter:siteはサイト名のことではなくて、関連するツイッターアカウントのID（twitter:site:id）もしくはユーザー名（twitter:site）で、必須です。Twitter Cardsに対応する場合にはこれだけでも設定しなくてはいけません。

https://dev.twitter.com/cards/markup

FLEXIcontent用コード

FLEXIcontentで使っていくコードは、

$doc = JFactory::getDocument();
$canonical = $doc->base;
$title = urlencode($doc->getTitle());

$doc->addCustomTag('
<meta property="og:type" content="article"/>
<meta property="og:title" content="' . htmlspecialchars($item->title) . '"/>
<meta property="og:url" content="' . $canonical . '"/>
<meta property="og:site_name" content="TITLE OF SITE"/>
<meta property="og:description" content="' . htmlspecialchars(strip_tags($item->introtext)) . '"/>
<meta property="fb:app_id" content="YOUR APP ID" />
<meta property="article:published_time" content="' . $item->publish_up . '" />
<meta property="article:modified_time"  content="' . $item->modified . '" />
<meta property="og:locale" content="' .( ($item->language=="*")?"en_us":$item->language ). '" />
<meta name="twitter:site" content="@YOURTWITTER" />
<meta name="twitter:card" content="summary" />
');

こんな感じになりました。