twitterでFC2ブログ記事を画像と一緒に表示する方法

2018/05/30

2018/06/05

ブログノウハウ 1

FC2ブログ twitter ツイート埋め込み twetterカード引用記事を埋め込みたい埋め込む方法

昨日から気になっていたことがあり、対処できないのかいろいろ試行錯誤してました。

それはFC2ブログの記事をtwitterでツイートする際にURLだけが表示されるんですよね。

かなりうまかったのでお勧めです
【人気焼き鳥屋】人生で一番旨いレバーを食べてきた【一度は行くべし】 https://t.co/7QQsXMsl1h
— 元てんちょ～＠酒好きブロガー (@syoutyuuumebosi) 2018年5月29日

上記のようになってしまうのです。

ほとんどのURLは記述すると

続編見たいとは思わないかな。https://t.co/BB4BekhzWu
— 元てんちょ～＠酒好きブロガー (@syoutyuuumebosi) 2018年5月30日

このように画像とともに引用のように表示されるのです。

このほうがクリック率が高いでしょうし、画像もあるのでわかりやすく気になりますよね。

ということで、いろいろ検索して探してみたのですが、

けっこうやってみると、できなかったりしました。

情報の中にはうまくいかないものも多かったので、

うまくいった方法をこの記事を見てくれた方にはお教えします。

そもそも、この表示をtwitterカードというそうです。

それ自体知らなかったので、なかなか辿りつかなかったんですよね。

twitterカードには種類があり、

主には
・Summaryカード：基本のカード。タイトル、説明文、サムネイル。
・Summary with Large Imageカード：大きな画像。タイトル、説明文、サムネイル。
・Photoカード：オリジナルのアスペクト比を維持したまま写真表示。
・Galleryカード：複数の写真を表示。

こういったものがあります。

今回は２番目のSummary with Large Imageカードというのを使ってみます。

■OGP設定を有効にする

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

■メタタグを挿入する

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

上記のタグをコピーします。

FC2ブログ管理ページの「テンプレートの設定」>「HTML編集」へ。

<head>の下あたりにペーストして更新してください。

下記の赤枠のあたりです。

"summary_large_image"の部分に他のカードを差し込むことが可能です。

@xxxxxxはご自身のtwitterアカウント名に差し替えてください。
（＠を忘れないでくださいね）

■Card Validatorでチェックする

cards-dev.twitter.com/validator

上記のサイトでURLを入れるとチェックすることができます。

URLはトップページだけで大丈夫です。

私の場合はhttp://mototenchoofficial.jp/と入れて、表示できました。

なんらかのタグのミスなどあればエラーが出るようですので注意してください。

URLを入力して、下記のように右に表示されたらOKです。