2018年6月9日土曜日

BloggerでTwitterカードを設定する方法

-----
・追記(2021-8-22)
画像の表示に利用していたウェブアプリケーションのサービス終了?により使えなくなりました。

新しい設定の方法はこちらから→「Bloggerで簡単にTwitterカードを設定する方法
-----

Twitterカードを設定してみました。

Twitterカードというのはリンクを記載した時に表示されるサムネイルのようなもののことです。


こういうのですね。

(出るサイトと出ないサイトがあるなぁとは思っていたんですけど、各サイトで設定が必要だったとは…不覚)


BloggerでのTwitterカードの表示には<header>タグ内に以下のコードを追加。

  • <meta content='カードの種類' name='twitter:card'/>
  • <meta content='ツイッターアカウント' name='twitter:site'/>
  • <meta expr:content='data:post.url' property='og:url'/>
  • <b:if cond='data:blog.pageType == &quot;index&quot;'>
  •   <meta expr:content='data:blog.title' property='og:title'/>
  • <b:else/>
  •   <meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title' property='og:title'/>
  • </b:if>
  • <meta expr:content='data:blog.metaDescription' property='og:description'/>
  • <meta expr:content='&quot;https://bloggerspice.appspot.com/postimage/&quot; + data:blog.url' property='og:image'/>

カードの種類は「summary」か「summary_large_image」になります。サムネイル画像のサイズが異なります。

ツイッターアカウントにはユーザー名(@nkkmdなど)を入力。

とりあえずこれで動くと思います。ちゃんと設定できているかはCard Validatorというページで確認できます。

タイトルは「【Blogger】Twitterカードの設定方法 - ファーマーズハウスさわ」という形式になってますので適宜ご変更ください。トップページの場合は「ファーマーズハウスさわ」だけになるよう分岐させています。


参考にさせていただいたページ
【2018年版】Twitterカードとは?使い方と設定方法まとめ - サルワカ

Blogger ブログを Twitter Cards に対応させる方法 | クリボウの Blogger Tips(TwitterカードだけでなくBloggerのカスタマイズついていろいろ書かれています。相当参考にさせていただいています。)

BloggerをOGPに対応させるときのog:imageをなんとかする : たき備忘録(画像はこの方のおかげで表示できてるんですね。ありがたや。)


***

Meijiの帽子

Meijiの帽子。

実は明治製菓はきのこの山だけじゃなく以前は本当にシイタケ種菌を作っていたんですね。ヤクルトやキッコーマンもシイタケ種菌を作っていました。昔はけっこういろんなところが作っていたみたいですね。

現在は森産業に菌株を継承しています。