BloggerでTwitter Cardを設定する

投稿日 2018/02/17 更新日 2020/10/07

Bloggerに自作のソーシャルボタンを配置するに続いて、BloggerのSNS対応の第2段として、Twitter Cardに対応します。

Twitter Card

TwitterにコンテンツのURLを付けてツイートすると以下のようなカードを表示することがあります。カードを表示するためには、ウェブページ側にメタタグを設定する必要があります。メタタグを設定すれば、他人のツイートした投稿にもカードが挿入されます。

TwitterCard

OGP(Open Graph Protocol)は、Twitter以外でも使用されているプロトコルですが、本記事ではTwitterのみを対象にします。Facebookは、よくわからないです。

追加コード

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

...

<!-- OGP -->
<b:if cond='data:view.isSingleItem'>
  <meta content='article' property='og:type'/>
<b:else/>
  <meta content='website' property='og:type'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='ja_JP' property='og:locale'/>
<meta content='summary' name='twitter:card'/>
<meta content='@username' name='twitter:site'/>
<meta content='@username' name='twitter:creator'/>

...

</head>

<head>タグ内に追加する(<head>にprefixも追加する)

確認

下記サイトでBloggerのURLを指定してカード確認することができます。

確認できたら、実際にツイートして確認してみてください。

補足

種別タグ説明備考
og:url-URL※1
og:title-ページタイトル※1
og:description-説明※1
og:image-ページのメイン画像※1
og:image:width-メイン画像の幅未指定
og:image:height-メイン画像の高さ未指定
og:typewebsite article profileページ種類※2 ※3
og:site_namedata:blog.titleサイト名(ブログ名)
og:localeja_JPロケール日本語
twitter:cardsummary summary_large_imageカード種類他にも種類あり
twitter:site@usernameサイトのユーザ名@bugbugnow
twitter:creator@username執筆者のユーザ名@bugbugnow

※1:all-head-content内のopenGraphMetaDataで定義済みです
  変更を加えたい場合、all-head-content全体を直接記述する
※2:プロフィールページがある場合、個別に分岐して指定する
※3:blogの指定でFacebookでエラーが出力される
  websiteの方が無難?
※FacebookのOGP設定する場合、アプリID必要のため、Facebookアカウントと紐づく

参考

コメント

okuhira2006 さんのコメント...

コメント失礼します。当記事とあまり関係なく恐縮ですが、全記事のTwitterカード、Googleの検索結果の記事説明にBloggerの設定→メタタグで指定したサイト自体の検索向け設定が表示されます。

3,000記事以上更新しているため、全記事に検索向け設定を設定することは根気のいる作業で、記事の最初の文章をTwitterカードの記事説明に表示したいと考えているのですが、HTMLのどこに何を挿入するなどのアドバイスがあればご教授いただければ幸いです。

toshi さんのコメント...

サイトの<meta name="description">(Googleの検索結果の記事説明)もしくは、<meta name="og:description">(Twitterカードの説明)にブロガー管理画面の[設定]>[基本]>[説明]に設定した文字列が表示される。トップ・投稿・ページなどのすべてのページに上記で設定した文字列が表示される。投稿(ページも)に関しては、スニペット(記事の最初の文章)を(TwitterとGoogle両方で)表示したい。どうすれば実現できるのか?

この認識で問題ないですか?

okuhira2006 さんのコメント...

拙い文章で申し訳ございません。おっしゃる通りでございます。

toshi さんのコメント...

https://www.bugbugnow.net/2020/11/search-description.html
これで、問題を解決できますか?

okuhira2006 さんのコメント...

早々に記事にしていただき、ありがとうございます。当記事を参考にし、乏しい知識ながら色々触ってみましたが、解決できませんでした。

私が使用しているテンプレートにはall-head-content自体が無く、作成して追加してみましたが、記事概要にはスニペットが表示されず、設定から追加した基本→説明*が表示されたままでした。

*メタタグの検索向け説明はオフにした

toshi さんのコメント...

記事内容に従った結果、<meta name="description">にスニペット(記事の最初の文章)は、表示されたのでしょうか?

<meta name="description">にスニペットが表示されていないのであれば、記事内容に従っていないか、記事内容が間違っているものと考えます。

<meta name="description">にスニペットが表示されたが問題が解決していない場合、熱帯魚飼いたいさんの言う「記事概要」というものが<meta name="description">にスニペットが表示することではないものと考えます。