BloggerでOGP設定とTwitterカードを改めてなんとかしてみた。｜Bloggerカスタマイズ【備忘録】-Web-tonbori堂アネックス
ホーム / Lifehack /

BloggerでOGP設定とTwitterカードを改めてなんとかしてみた。｜Bloggerカスタマイズ【備忘録】

2018年8月22日水曜日

blog Lifehack

X f B! P L

　このWeb-tonbori堂アネックスをリブートして結構な時間が経ちました。宣言だけは2015年にしたものの放置状態が続き、実質的には2017年の4月からで1年と4か月が経過したことになります。その間もテーマ（テンプレート）の変更をしたり、Googleアドセンスを導入したりといろいろしたのでその辺りをちょっとまとめてみたいと思います。ということで最初はブログをするならよく出る話、OGP設定の話をしてみます。


プログラムイメージ画像
画像はイメージです｜プログラミング Html Css Java · Pixabayの無料写真

追記20190830：タイトルを変更『Blogger【ライフハック】』から『Bloggerカスタマイズ』に。


BloggerでOGPを導入する

　『Open Graph protocol』の略称でOGP、オープン・グラフ・プロトコルと言います。FacebookやTwitter、Google+などSNSでハイパーリンクを貼った時に、要約（サマリー）、写真（グラフィックオブジェクト）をまとめたリッチリンクを表示させるプロトコルです。

リッチリンクの例（Facebook）
Facebookで投稿にリンクを貼った時に表示されるOGPによる画像サマリー付きリッチリンクの例/画像

　要するにFacebookで気に入ったページのリンクを投稿するとサムネイル画像と記事の要約が出るアレです。このOGPは世界統一規格のプロトコルとしてHTMLでmetaタグのソースコードが決められています。例としては以下のようなmetaタグをテンプレートのHTML内に記述することで使えるようになります。


<meta property="og:title" content="Example title of article">
<meta property="og:site_name" content="example.com website">
<meta property="og:type" content="article">
<meta property="og:url" content="http://example.com/example-title-of-article">
<meta property="og:image" content="http://example.com/article_thumbnail.jpg">
<meta property="og:image" content="http://example.com/website_logo.png">
<meta property="og:description" content="This example article is an example of OpenGraph protocol.">
出典はWikipedia/Facebook Platform - Wikipediaより一般的OGPmetaタグ例。

　このようなmetaタグで記述されブログのテンプレートの＜haed＞以下に記述されます。

元々Facebookのプラットフォーム上でそういった画像入り要約を表示させるプロトコルだったのですがTwitterも独自にTwitterカードというオープン・グラフ様式のmetaタグを策定したためこの両者を設定しなくてはならないという、いささか面倒な事になりました。

OGPを設定する意味

　RSSリーダーでの購読者も大切ですが直接ページに見に来てくれるユニークユーザーがお馴染みさんになってくれた時に更新のお知らせする場合や更新告知として外部へのお知らせする場合、テキストデータだけやリンクだけではなかなか見に来てくれないのが現状です。そういった場合にこういうOGP設定をしておけば、くどくど説明しなくとも画像付きで見れば一発で分かるという、そういう利便さはやはり得難いものがあります。そのため入り口として導入しました。

OGPを設定する。

　tonbori堂が使っているテーマはデフォルトのものから途中で変更しています。現在も使用しているテーマ（テンプレート）はBloggerのデフォルトで用意されているテンプレートではなく有志の方が作成されたテンプレートです。それについては以前こちらのエントリで書きました。

リンク：【お知らせ】隙あらばテーマ変更17.10.01|Web-tonbori堂アネックス

テンプレート作成及び配布先/トーマスイッチ｜Vaster2|レスポンシブ対応済みのblogger日本語テンプレート

　あくまでも使用感とかそういう事だけを書いているので技術的なことは分からないので一切ふれていません。ただレスポンシブ対応（スマートフォンでの閲覧に可変で対応してくれる）というのが便利であり自由度が高いということでありがたく使用させていただいております。ちなみに、このVaster2テーマは実は後述するTwitterカードもサマリーラージカードという私がつかってるサマリーカードより大きなサムネイル画像が表示されるニュースサイトやニュースブログがよく使っているキャッチ―なタイプのHTMLタグが既に実装されており、必要な部分を自分の情報に書き換えるだけで使用可能になっていますがFacebookに対応させるにはこのOGPを設定しないといけません。


　HTMLタグはGoogleで『Blogger　Facebook　OGP』で検索すればHTMLタグの例を挙げておられるブログが数多く見つかると思います。ここでは私の実装しているタグをここに挙げておきます。

　まずBlogger設定ページのメニューからテーマを開きます。開いたら次にテーマの『HTMLを編集』ボタンでHTML編集を開きます。開いたら「Ctrl+F」で＜head＞を探しましょう。

＜head＞が見つかったらまずOGPの書式を記述します。（実はheadに記述しなくてもいいそうなんですけど型から入るtonbori堂は記述しました。

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">

　次は各OGPのmetaタグを記述していきます。


<!-- OGP 共通 -->
<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta content='article' property='og:type'/'>
<b:else/'>
<meta expr:content='data:blog.title' property='og:title'/'>
<meta content='website' property='og:type'/'>
</b:if'>
 
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
 
<meta expr:content='data:blog.url' property='og:url'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='ja_JP' property='og:locale'/>
 
<!-- og:image -->
<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>
<meta expr:content='"http://blogger-entry-image.appspot.com/?s=s900&u=" + data:blog.url' property='og:image'/>
<b:else/>

</b:if>
<!-- Facebook用設定 -->
<meta content='15桁の数字' property='fb:app_id'/>

　以上がOGPの基本設定のmetaタグです。最後のFacebook用の設定が難関で、これはapp-IDというコードで15桁の数字を入れるんですが、これを取得するにはちょっとひと手間必要ですし、最近規約が（EU圏の個人情報保護の改定について）変わったのか、確か数字だけを取得していればいい感じに書いてあったのが、いつの間にかさらに手順が増えていました。もしかすると見逃しただけかもしれませんが。Facebookにはadmin-IDというものもあるんですが、これは個人のページに紐づけされているので、個人に紐づけされていないとされる、app-IDを使用するのが推奨されています。個人情報が気になる向きには煩雑な処理のあるIDコード取得は置いておいて、Facebookでのリンク時にサマリーのみでいいならばここは放置でも良いかもしれません。（本気でブログ運営をやるならまた別ですが。）ちなみにapp-IDの取得もGoogleで検索すれば沢山出てきますので出来得る限り最近のやり方でアップデートされているエントリで手順を確認するのがいいでしょう。


　そしてタグを記述したらちゃんと表示されるかどうかをFacebookのデバッカーページで確認します。このデバッカー、キャッシュをクリアにしてくれるのでページの画像を更新したり加えたときに使うとその画像に変更になるとか。なかなかの優れものです。このページで見え方を確認したらそれで作業は終了です。警告が出た場合はその指示に沿って修正するようにします。

デバッガー - 開発者向けFacebook

　実はこのmetaタグに行きつくまでにはいろいろ試行錯誤を繰り返しました。見るところでちょっとずつ記述が違っていたり、画像URLはそれぞれ違うので、今でもちょっと不安定ではあるんですが、今の設定でなんとか落ち着いたのもつい最近の話なのです。大元のOGPのmetaタグは同じなのでまずheadタグ直下に貼り付ける前にテキストエディタで必要な要素を集めて編集してから貼り付ける方が良いかもしれません。

Twitterカード

　Twitterカードはいろいろ手段がありますが簡単なのは以下のmetaタグのコードをhead以下に記述します。tonbori堂は先ほどのOGPのmetaタグ直下に貼っています。


<meta content='summary_large_image' name='twitter:card'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image:src'/>
<b:else/>
<meta expr:content='data:blog.homepageUrl' name='twitter:url'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta content='Image URL' name='twitter:image:src'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
</b:if>

　上に記述したのはVaster2のソースコードにデフォルトで入っているのものです。これでも問題ないはずですが、tonbori堂は下に記述したmetaタグを貼っています。これはTwitterのデペロッパーサイトにあるmetaタグとその他のmetaタグを組み合わせたものです。


<meta content='summary' name='twitter:card'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<b:else/>
<meta expr:content='data:blog.homepageUrl' name='twitter:url'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta expr:content='"http://blogger-entry-image.appspot.com/?s=s900&u=" + data:blog.url' name='twitter:image'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
</b:if>

　この辺りはTwitterカードでもよく出てくるのでトライ＆エラーを繰り返してやるのもいいでしょう。ここでTwitterカードでちゃんと表示されるかどうかを確認するためTwitterカードのデバッカーページで確認します。

Card Validator | Twitter Developers（現在停止中/Twitterの仕様が変り停止はしていますがcardのタグが入っていれば表示はされます）

ここでエントリのURLを入れて問題なく表示されればOKです。以前のググった時はここで申請をするような話をよく読んだんですが私がしたときはそういうページに行き当たりませんでした。




Twitterカードを貼ったツイート/tonbori堂

　実はtonbori堂、最初の頃、Card Validatorで検証するとリダイレクトしていますと警告が出て？ってなってたんですが、Bloggerの投稿管理ページの各記事のリストの表示ボタンはhttpsじゃなくてhttpになってるんです。そのためリダイレクトしているぞと言われていました。元リンクを貼って検証すれば警告が出なくなって一安心しましたが、全部英語だと色々不安になります(^^;で、ともかく今のところは問題なく運用できています。(今はhttpsになっていますが統計ページの記事リンクはhttpのままですのでご注意を:2019.08.12）


　タグの内容は何度か直しています。今の設定は有志の方が立ち上げられた外部アプリを使用させていただいています。これは前回のエントリでも紹介させていただいたものです。実は最近Bloggerのmetaタグで内部処理できそうなのではとトライしてみたんですが、Facebookは表示に問題なくても、Twitterカードで表示できないものが出てきて戻しました。

参考リンク｜BloggerをTwitterカードに対応させる際のtwitter:imageを正しく設定する : たき備忘録

　OGP側だけはまた変更するかもしれません。（FB側に影響を及ぼすみたいなので）ちなみにFB側は200ピクセル以下の画像は表示出来ないので注意してください。そのためにOg:imegeで絶対パスで固定の画像を設定するのもいいかもしれません、私はヘッダーに画像をいれてそれを読み込ませるようにしました。当然これをそのままでは他では使用できないのでご使用なさる場合はそれぞれご自分のサイトの仕様に合わせて変更した上で自己責任でお願い致します。ちなみにする前には必ずテーマのバックアップを！私もそれを忘れて2度ほど（ヲイヲイ）、最初からタグ打ち直しにテーマのセット変更をしています。

最後に

　OGP設定はいろいろ手順も煩雑ですが根気よくGoogleで検索すれば何かしら解決法があります。ですが、そのものズバリじゃない場合もあるしもしかしたら上手くいかないかもしれません。そんな時は少し視点を変えるため途中で一度手を止めても再度トライするのがいいでしょう。それと取り掛かる前にはしつこいようですが必ずバックアップをして下さい。そして肝心の効果は抜群かどうかはあまり分からないんですが、リンクを貼った時にけっこう見映え良くなってtonbori堂は満足しています(笑)

ファイブスター物語/F.S.S第17巻絶賛発売中

ファイブスター物語/F.S.S第17巻絶賛発売中
永野護著/KADOKAWA刊月刊ニュータイプ連載『ファイブスター物語/F.S.S』第17巻絶賛発売中（リンクはAmazon）

このブログを検索

アーカイブ

QooQ