FC2ブログ

Welcome to my blog


小売・飲食ランキング

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

元てんちょ→@酒好きブロガー

元てんちょ→@酒好きブロガー

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

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




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

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




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

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

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

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

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

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

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

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

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

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


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

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

■OGP設定を有効にする

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

tcard1.png 

■メタタグを挿入する

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

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

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

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

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

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

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

■Card Validatorでチェックする

cards-dev.twitter.com/validator

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

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

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

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

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

tcard3.png 
■実際にツイートしてみよう

特にエラーが出ずに、表示されたら、実際にもツイートして試してみましょう。

トップページだけチェックしましたが、

他の記事を引用しても下のようにちゃんと画像が表示されました!


tcard4.png 
試しにこの記事をツイートしてシェアお願いします!






たったワンコインでデザインだけ選ぶだけでホームページ完成
▼▼▼▼▼▼▼▼▼▼▼▼




私も利用している独自ドメイン取得はこちらから
▼▼▼▼▼▼▼▼▼▼▼▼




私も利用しているレンタルサーバー。安くて初心者に使いやすいのが特徴
▼▼▼▼▼▼▼▼▼▼▼▼





スポンサーサイト

Comments 0

There are no comments yet.

Leave a reply

スポンサーリンク