Twitterカードを導入してみた『続編』｜Bloggerカスタマイズ【備忘録】-Web-tonbori堂アネックス

　ブログのスキンを夏向けに変更したらそれまで記載していたTwitterカードのメタタグが消えてしまいました😓バックアップをとっていなかった自分が悪いのですがスキン毎にソースコードのコピーをとっておくのは基本中の基本。しかし悔やんでも仕方がないので自らの記事を元にざっとやり直してみました。

メタタグ消失

Twitterカード表示のあるツイート。/スクリーンショット

この部分が出てこなくなってしまいました。

　前回エントリ＞Twitterカードを導入してみた。【ライフハック】：Web-tonbori堂アネックス

メタタグ再投入

　Twitterのデペロッパーページでソースコードをコピペして記述してみましたが何故かうまくいきません。

Twitterデペロッパーページのソースコードの表示/スクリーンショット

　画像でマークしているサンプルコード、これの中身を自らのブログに合うように記述を変更するのですが全く元のとおりにならず、Twitterデペロッパーページにある、Cardの検証ページ（最初にページ登録するところでもあります）でも上手く表示されません。検証の結果、自分のブログがホワイトリストに登録はされているとは出てきているのでタグの問題というのはわかりました。そこで、まず「Twitterカード　Blogger」で検索してみました。

カードの利用開始 — Twitter Developers

Card Vaildator｜Twitter Developer

メタタグを探しにネットヘダイブ

　検索しても中々上手くいきません。というのもOGP設定というのがいるということらしいのです。最初のスキンはどうもそれが記述されていたようなのですがスキンをカスタマイズするにあたりその記述がまるっぽ抜け落ちたかどうにかしたか。つまり全然上手くいかずいくつかのサイトを渡り歩く結果になりました。そのサイトはエントリの下部にまとめて貼っておきますが基本的にOGP設定というのはFacebookなどでサムネイル画像を表示させるためのオープンソースコードのようです。OGPとはOpen Graph Protcolの略称で詳しくは専門的に解説されているブログさんを検索してみてください。重要なのはこのメタタグのコードがTwitterカードにも応用されており、Twitterのツイートでリンクを埋め込んだ時に表示させるためのメタタグというざっくりした理解でも十分だと思います。

　SEOなどを真剣にされている方ならさらに理解を深める必要があるかもしれませんが基本的に必要な情報をサンプルコードを基に記述しスキンのHTMLコードの＜ｈｅａｄ＞部分に貼り付けるだけです。幸いBloggerのHTMLライター機能はエラー検知してくれるので間違った場合はコードの見直しを行い正しく記述するようにすればいいでしょう。ただし自信の無い場合はしっかりとバックアップをとって、それまでのスキンに戻せるようにしてから自己責任でお願いします。一応こちらでつかっているコードはこんな感じです。

<head prefix='og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#'>
<!-- OGP 共通 -->
<b:if cond='data:blog.pageType == &quot;item&quot; or data:blog.pageType == &quot;static_page&quot;'>
 <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 != &quot;&quot;'>
 <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 == &quot;item&quot; or data:blog.pageType == &quot;static_page&quot;'>
 <meta expr:content='&quot;http://blogger-entry-image.appspot.com/?s=s900&amp;u=&quot; + data:blog.url' property='og:image'/>
<b:else/>

</b:if>
<!-- Facebook用設定 -->
<meta content='0000000000000000' property='fb:app_id'/>

<meta content='summary' name='twitter:card'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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='&quot;http://blogger-entry-image.appspot.com/?s=s900&amp;u=&quot; + 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>

　Facebook用設定の『0000000000000000』にはFacebookのappIDを取得してそれを入れます。その取得はまた面倒なのでここでは割愛しますが、この設定を飛ばしても基本的にはTwitterカードは動きますので大丈夫です。Facebookにサムネイルを表示させたい場合などには取得する方向で検討してみてください。ちなみに<haed>を<head prefix='og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#'>に書き換えていますがしなくとも大丈夫だそうです。

最後に

　以下のサイトのエントリが参考になりました。まだそれでも分からない場合は『Twitterカード　Blogger』や『ブログ OGP』『Twitterカード OGP設定』などの複数のキーワード検索で情報を集めてみましょう。詰まるとなかなか前に進みませんが調べれば道は開けると思います。また詰まったときには投げ出さず一晩寝て、翌日に改めて精査してみると、案外あらたな解決法が見つかるかも知れません。まずはトライ＆エラーでやってみましょう。ただし繰り返しになりますがバックアップをとる事とサイトをいじる場合は自己責任になりますので気を付けて行ってください。

~~あなたのサイトのアピール度が上がる！Twitterカードの設定方法 | ペケペケラボ~~（リンク先切れ。）http://www.xxlabs.net/2016/03/twitter.html

Twitterの画像つきURLこと「Twitter Cards（ツイッターカード）」をBloggerに設定してみた。 - Learninghacker

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

Blogger ブログを Twitter Cards に対応させる方法 | クリボウの Blogger Tips

OPG！Blogger（ブロガー）でTwitter Card（ツイッターカード）を設定する方法 | ふりむけばコウホウ

※やっぱり勉強しなくちゃならないかな😅

｜作って学ぶ　HTML＆CSSモダンコーディング | エビスコム | 工学 | Kindleストア | Amazon