web

[簡単]FC2ブログで各記事の画像をTwitterカードに表示させる方法

FC2ブログで各記事の画像をTwitterカードに表示させる方法を探していたのですが
いろいろなブログを参考にやってみても、ブログに寄って記述が違っていたり、コードが間違っていたり、古い記事だったりでなかなか正常に表示されずイライラがマックスに。

で、ようやく解決策(超簡単)が見つかったので、この記事にたどり着いた方にはストレスを与えないよう、Twitterカードについての説明や、長い経緯等は飛ばして、簡潔に答え・手順だけを書きます。

1.カードの種類を決める

・Summaryカード:基本のカード。タイトル、説明文、サムネイル。
・Summary with Large Imageカード:大きな画像。タイトル、説明文、サムネイル。
・Photoカード:オリジナルのアスペクト比を維持したまま写真表示。
・Galleryカード:複数の写真を表示。
・Appカード:アプリ紹介用。※承認が必要
・Playerカード:動画や音声。※承認が必要
・Productカード:販売促進用。※承認が必要

カードの種類詳細:dev.twitter.com/ja/cards/types/
カードについての説明:dev.twitter.com/ja/cards/overview

2.メタタグを挿入する。

下記をコピーして、FC2ブログ管理ページの「テンプレートの設定」>「HTML編集」へ。
<head></head>の間にペーストして更新してください。

・下記はsummary_large_imageでの設定方法です。値をsummary/photo/gallery/app/player/productから選択して""の間に挿入してください。
・@xxxxxxはご自身のアカウント名に差し替えてください。
・今までは各記事の画像が出るよう細かく設定しなくてはいけなかったようですが、現在では上記の簡単な設定で自動で表示されるようになっています。

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@xxxxxx" />

3.OGP設定を有効にする。

FC2ブログ管理ページの「環境設定」>中段「メタタグの設定」
OGP設定を「有効にする」にして更新してください。
ogp3

4.Card Validatorでチェック&申請

cards-dev.twitter.com/validator
で、URLをいれて表示をチェックします。
右のプレビューに記事の最初に出てくる画像がサムネイルで正しく表示され、タイトル、本文抜粋、ドメインが表示されます。
さらに、Preview cardボタンの下に緑背景で「xxxx is whitelisted for summary_large_image card」と書いてあればOKです。
右のプレビューに「Unable to render Card preview」と出て、Logにオレンジ文字でWARNが出たら、metaタグにミスがあると思います。
ogp4

5.実際にツイートして検証する

上記が終わったら、実際にURLをいれてツイートしてみましょう。


Author Info

Designer / Illustrator サイト上に無い作品が多数掲載されたポートフォリオPDFもご用意しています。コンタクトフォームよりお気軽にご相談ください。