こんにちは、Slide Japan TeamのAkira（@slide_japan）です。
あなたはtwitterをやっていますか？
私は情報収集とSlide Japan Teamの活動でtwitterを毎日、使用しています。
twitterを見ていると、誰かが挙げたブログやニュース記事のリンクが画像付きで表示されていますね。
やっぱり広告宣伝をするならば、画像付きで行った方が花があって見栄えがします。
このようなリンク先ページの画像が表示されるのは、twitterカードという機能を利用しているからです。
今回は、この雑記ブログ Type-EDGE のtwitterカード対応を行いました。
bloggerへtwitterカードをどのように設定したか、twitterカードの役割を含めて詳細に記載していきます。
ちなみにtwitterカードの設定・表示は無料アカウントで実施出来ます。
もし、あなたのブログで設定していないならば、この記事を参考にして下さい。
それでは、さっそく行ってみましょうッ！
【2022年版】twitterカードの役割とbloggerでtwitterカードを設定する方法
この記事はこのような方向けです。
- bloggerを使っており、twitterカードを設定したい方
- SEO対策の一環でtwitterカードを検討している方
- twitterカードについて知りたい方
そもそもtwitterカードとは？
twitterのツイートにURLがあると、そのリンク先のアイキャッチ画像やページタイトル・紹介文を表示する機能です。
twitterカードを設定せずとも、ツイートにあるURLをクリックすれば、リンク先ページへ飛びます。
しかし、設定するとアイキャッチ画像やページタイトルなどが纏まった形でツイートの中に掲載され、視覚的な効果が非常に強くなります。
フォロワーから見た時、あなたの記事が目立つようになりますので、ついクリックしたくなりますよね。
ちなみに、カードだからと言ってコレクターがいたり、コレクションできたりするものではありませんので、あしからず。
twitterカードの種類
これから行う設定により、ツイートに表示するtwitterカードの種類を選べます。
以下にその名称と特徴を記載していきます。
summary card
ブログ用に使用します。
ツイートに表示される時に表示される画像は小さく、ページタイトルなどのテキストと横並びになります。summary card with large image
ブログ用に使用します。
ツイートに表示される画像は大きく、画像の下にページタイトルなどのテキストが表示されます。app card
アプリ配布時に使用します。player card
動画表示用に使用します。
ブログで使用する場合には1.summary cardまたは2.summary card with large image から選択します。
選ぶ際には、あなたのブログで使用するアイキャッチ画像を基準にすると良いと思います。
当然ながら1.summary cardの場合、掲載する画像が小さいのでアイキャッチ画像の一部（中央）を切り取った状態でtwitterカードに表示されます。
他方、アイキャッチ画像の画質が悪い場合、2.sumary card with large imageではその粗さが目立ってしまいます。
見た時のインパクトを考えると、2.summary card with large imageの方が優れています。
なのでアイキャッチ画像の画質が悪くないならば、こちらを選択してみるのもアリかもしれません。
なお、どちらのtwitterカードを選択しても、クリック率には大きな影響を及ぼしません。
twitterカードで使用できる画像サイズ
twitterでは読み込める画像サイズに制限があります。
制限を超える画像は読み込みが行われない仕様になっており、アイキャッチ画像を作成する際には注意が必要です。
- 144px x 144 px 以上
- 4096px x 4096 px 以下
- 5MB以下
twitterカードの欠点
リンク先ページのアイキャッチ画像を表示してくれる便利な機能ですが、やっぱり欠点があります。
ツイートの中にURLと画像を一緒に掲載すると、twitterカードのみが表示されます。
画像はリンクをクリックしないと見れない状態になります。
写真の掲載をメインとするアカウントの場合、URLの掲載を控えるか、そもそもtwitterカードを設定しない方が良いです。
bloggerにtwitterカードを掲載する方法
twitterカードを表示させるには、htmlのhead部に以下のタグを追記する必要があります。
<meta content='①カードの種類' name='twitter:card'/><meta content='②twitterのユーザ名' name='twitter:site'/><meta content='②twitterのユーザ名' name='twitter:creator'/><b:if cond='data:blog.pageType == "index"'><meta expr:content='data:blog.title' name='twitter:title'/><b:else><meta expr:content='data:blog.pageName + " - " + data:blog.title' name='twitter:title'/></b:else></b:if>
「①カードの種類」ですが、前述の通り、ブログの場合は2種類あります。
表示したいカードの大きさに合わせて、"summary" か "summary_large_image" のいずれかを設定してください。
「②twitterのユーザ名」ですが、これは@から始まるユーザ名です。
私の場合、@slide_japan というユーザ名を使っているので、"@slide_japan" と記載します。
上記の「①カードの種類」と「②twitterのユーザ名」を反映すると、次のようになります。
<meta content='summary_large_image' name='twitter:card'/>
<meta content='@slide_japan' name='twitter:site'/>
<meta content='@slide_japan' name='twitter:creator'/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<b:if cond='data:blog.pageType == "index"'>
<meta expr:content='data:blog.title' name='twitter:title'/>
<b:else>
<meta expr:content='data:blog.pageName + " - " + data:blog.title' name='twitter:title'/>
</b:else>
</b:if>
これらのタグを </head>の直前に追加すれば、設定完了です。
設定をするには、左側のサイドバーから"テーマ"を選択します。
テーマ画面の中央辺りにある▼をクリックすると、"HTML編集"という項目がありますので、そちらを選択してください。
bloggerのhtml表示となりますので、"</head>"をキーワードでページ内を検索してください。
"</head>"が見つかったら、その上へtwitterカードの設定を追記して、保存してください。
設定は以上です。
お疲れさまでした。
twitterカードが正しく表示するか確認する方法
設定を終えたからといって、それで本番の呟きをするのはちょっとリスクがありますよね。
もしも正常にtwitterカードが表示されないかもしれませんし、成功するまで何度も呟くのも避けたいです。
本番を行う前に、以下のサイトで指定したURLのtwitterカードを確認することができます。
twitter公式のチェックツール
"Card URL"にあなたのサイトを入力してpreview cardを実行すると、twitterカードが表示されます。
実行に失敗してもエラーが表示されますので、そこに記載された内容を対処すれば解決します。
OGPチェックツール
OGP確認ツール | OGP and Twitter Card
このサイトでは、WebサイトのOGP（Open Graph Protocol）とTwitterカードを簡単に確認することが出来ます。
OGP（Open Graph Protocol）とtwitterカードのプレビュー表示を行うサイトです。
OGPとは、FacebookやtwitterカードのようなSNSでサイトが紹介された時、Webページのタイトルやアイキャッチ画像、概要を正しく伝えるためのタグです。
先ほど設定したTwitterカードの設定の一部はOGPで、twitterの場合、特別に追加でタグを設定する必要がありました。
このサイトの使い方は、twitter公式のチェックツールと同様で、解析したいURLを入力して実行すると、OGPとtwitterカードの両方が表示されます。
"unable to render card preview"が表示したのにエラーが無い場合
twitter公式のチェックツールによる解析結果が"unable to render card preview"と表示が出たのにも拘らず、エラーがない場合があります。
解決方法としては、設定が反映されるまで時間を置くだけです。
上記で紹介したOGPとtwitterカードの両方を確認できるサイトで正しく表示されている場合、設定は問題なく行われています。
twitter公式のチェックツールはキャッシュなどの影響で即時反映しない場合があります。
チェックツールで適切に反映されるようになるには1週間程度の日数が必要になる時もありますので、現状としては、上記どちらかのツールで成功すればOKという判断が望ましいです。
最後に
今回はbloggerにtwitterカードを表示する方法について紹介させて頂きました。
twitterカードはOGPとは別のタグを設定する必要がありますが、SNS上で見栄えが良くなり、クリック率が高くなるかもしれない魅力があります。
その表示は全4種類あり、ブログで使用できるのは内2つになります。
"summary"を選択した場合、アイキャッチ画像が小さく表示されますが、画像と文章は横並びに表示されます。
"summary_large_image"ならば、アイキャッチ画像が大きく表示され、その画像の下に文章が表示されるようになります。
どちらが良いという決まりはありませんが、アイキャッチ画像の品質が高いのであれば、"summary_large_image"をお勧めします。
アイキャッチ画像ですが、twitterカードで表示するには制限があります。
とはいえ、制限の幅が広いのであまり気にする機会はないかもしれません。
twitterカードを使用する際には、一度のツイートの中でtwitterカードと添付画像の両方を表示できない点に注意して下さい。
常にtwitterカードが優先されますので、もしも写真などをツイートしたい場合には、URL無しで呟いてください。
bloggerにタグを設定するには、テーマからHTML編集を行う必要があります。
設定箇所は"</head>"の直前が良いです。
設定を終えたら実際にツイートする前に、チェックツールを使い適切にtwitterカードが表示されるか確認をお勧めします。
今回の記事はいかがだったでしょうか？
設定するのは少し大変かもしれませんが、その大変さの先にはあなたの魅力あふれるコンテンツを表示できる環境が構築できました。
これからも多くの人を魅了するコンテンツを作成して、ツイートしてください。
最後まで読んでいただき、ありがとうございます。
もし今回の記事が良かったと思った方や評価したいと思った方は、コメントを残して頂けると嬉しいです。
また、私はパソコン以外にも記事を書いていますので、そちらも読んでいただけると幸いです。
0 件のコメント:
コメントを投稿