Twitter CardsはX(旧:Twitter)でシェアしていただくときには必要不可欠なものです。
ただ、Bloggerで設定するのは少しややこしいので、手順を紹介していきます。
Bloggerの管理画面で設定を確認する
- プライバシー:検索エンジンに表示されるようにする
- メタタグ:検索向け説明を有効にする
- クローラとインデックス:カスタム robots.txt を有効にする
それから各記事作成ページの「投稿の設定」にある「検索向け説明」にも「記事の概要」を入力します。
私はこれをやっていなかった結果、「ERROR: Required meta tag missing (twitter:text:description) 」と表示され、エラーを解消するのにどえらい手間取りました。
コード
テーマのHTML編集の<head>
内に以下のコードを挿入します。
HTML
<meta content='summary_large_image' name='twitter:card'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<meta content='@Xアカウント' name='twitter:site'/>
<meta content='@Xアカウント' name='twitter:creator'/>
<meta expr:content='data:blog.canonicalUrl' name='og:url'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
</b:if><b:if cond='data:view.isMultipleItems'>
<!-- トップページ・検索(全体・ワード)・ラベル・アーカイブ -->
<meta expr:content='data:blog.homepageUrl' name='og:url'/>
<meta expr:content='data:blog.pageTitle' name='og:title'/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<b:else/>
<meta content='画像URL' name='twitter:image'/>
</b:if>
<b:else/>
<!--上記以外のコンテンツ-->
<meta expr:content='data:blog.canonicalUrl' name='og:url'/>
<meta expr:content='data:blog.pageName' name='og:title'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<b:else/>
<meta content='画像URL' name='twitter:image'/>
</b:if>
</b:if>
赤字の部分は適宜変更してください。
サムネイル画像が大きい状態でシェアしたい場合は、上記のsummary_large_image
のままで大丈夫です。小さいサムネイル画像でシェアしたい場合は、summary
に変更していただければ大丈夫です。
@Xアカウント
はご自分のX(旧:Twitter)アカウント名に書き換えてください。
画像URL
は、画像がないページの場合にどの画像を表示させるかを設定できます。
1つ目は、トップページ・検索(全体・ページ)・ラベル・アーカイブページがシェアされた際にサムネイルが設定されていないページの代替画像の設定です。2つ目は、おもに記事ページがシェアされた際に、サムネイルが設定されていないページの代替画像の設定です。各自ご用意いただいて書き換えてください。
確認
https://cards-dev.twitter.com/validator
Twitterにログイン後、上記のページで確認して、エラーが出なければ問題ないかと思います。
参考にしたページ
もっと細かく条件分岐したい場合は、上記のサイトのページでとてもわかりやすく解説してくださっています。