BloggerでTwitter Cardsを設定する手順・方法

記事内に商品プロモーションが含まれる場合があります

Twitter CardsはX（旧：Twitter）でシェアしていただくときには必要不可欠なものです。

ただ、Bloggerで設定するのは少しややこしいので、手順を紹介していきます。

Bloggerの管理画面で設定を確認する
コード
確認
参考にしたページ

Bloggerの管理画面で設定を確認する

設定でチェックをONにする

プライバシー：検索エンジンに表示されるようにする
メタタグ：検索向け説明を有効にする
クローラとインデックス：カスタム 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つ目は、おもに記事ページがシェアされた際に、サムネイルが設定されていないページの代替画像の設定です。各自ご用意いただいて書き換えてください。