Amazonプライム:30日間の無料体験を始める

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

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

ただ、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つ目は、おもに記事ページがシェアされた際に、サムネイルが設定されていないページの代替画像の設定です。各自ご用意いただいて書き換えてください。

確認

参考:https://cards-dev.twitter.com/validator

Twitterにログイン後、上記のページで確認して、エラーが出なければ問題ないかと思います。

参考にしたページ

もっと細かく条件分岐したい場合は、上記のサイトのページでとてもわかりやすく解説してくださっています。

コメントを残す