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

Joomla

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

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

Open GraphとTwitter Cards

ogp-me-open-graph-protocol

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

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

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

with-twitter-cards-tags

WordPressに設置する

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

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

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

SNSでリッチ表示してくれるOGPをWordPressに、プラグインを使わず設定する
FacebookやTwitter、mixiなどのSNSでシェアされたときに、Webサイトがリッチに表示されるようにWordPressにプラグインを使わずにOGPを設定する方法を紹介します。OGPについては深く触れず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(関連するタグのリスト)といった追加出来ます。

Update Your Browser | Facebook

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に対応する場合にはこれだけでも設定しなくてはいけません。

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" />
');

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

バリデーター

Open Graphを使うFacebookと、Twitter Cardsには表示されるはずの内容を取得してくれるバリデーターがあります。

特に自分で設置した場合はエラーが起こりやすいのでチェックします。

Open Graph

Update Your Browser | Facebook

最初、何回か503エラーになりました。原因は中身がないのにog:imageを設定していたことでした。(<meta property=”og:url” content=”” />になっていた)

Twitter Cards

Login on Twitter
Welcome back to Twitter. Sign in now to check your notifications, join the conversation and catch up on Tweets from the people you follow.

Twitter Cardsはエラーの内容が詳しく表示されないのでデバッグが面倒でした。掲示板にも多く質問がありますが、掲示板の回答で解決した例は少ない感じです。掲示板に出ていた回答は、

  • robots.txtの設定でブロックしていた
  • Content-Type: text/htmlを出力していなかった
  • クォート(’)が悪さをしていた(?)

などの理由が挙げられていましたが、同じコンテンツで本番サーバーでだけ作動しないという人もいて、闇が深いです。

私の場合は、以下の様な道順で治りました。

  1. メタタグの書式が間違っていました。
  2. <meta name=”twitter:site” content=”MY SUTE”>とスラッシュが一つ抜けていました。
  3. 直したらバリデーターを通りました。
  4. バリデーターが通っても、内容が表示されませんでした。
  5. “og:url”ではカノニカルURLを強制していたのですが、実際のページに向けた”twitter:url”タグを設定しました。

ということで、私の場合、最初に表示できなかった原因はHTMLコーディングが間違っていたことでした。twitter:urlタグは、後で消してみたのですが表示がなくならないので、単にタイミングの問題だったのかもしれません。

また、Facebookはページ上の画像を全部拾ってきて一つを選びサムネイルにしますが、Twitterは画像がないままなので、できれば設定したほうが良いと思います。

コメント

タイトルとURLをコピーしました