TOP > Webサービス > title - FC2ブログをTwitterカードに対応させる方法

ITやモバイル機器、iPhone、手帳や本など。
MENU

FC2ブログをTwitterカードに対応させる方法

2016011600.png


情報管理LOGの@yoshinonです。
先日、Twitterカードについて記事にしました。
今回は、この情報管理LOGも使っているFC2ブログをTwitterカードに対応させる方法についてです。コピペでできますので、ぜひ参考にしてみてください。


  
【 FC2ブログをTwitterカードに対応させる方法 】  

 1.FC2は、OGPに対応しています。でも、OGPとは何?

 2.FC2ブログでOGPを有効にする

 3.metaタグを記述する(記述例)







checkmark.png 1.FC2は、OGPに対応しています。でも、OGPとは何?

FC2ブログは、OGPに対応しています。
ん?でも、OGPって何なんでしょう?

OGPというのは、Open Graph Protcolの略称で、FacebookやTwitterなどのSNSでシェアされた際に、そのページのタイトル・URL・概要・アイキャッチ画像(サムネイル)を意図した通りに正しく表示させる仕組みのことです。

つまり、OGPが有効になっていれば、SNSでシェアされたときに、タイトルやアイキャッチ画像などが有効に表示されて、アクセス数の向上に期待できそうですね。

ちなみに、Twitterカードに反映された情報管理LOGは、このように表示されます。きちんと、反映されていますよね。




このOGPですが、FC2ブログでは、デフォルトで対応しているのです。これは、すぐに設定しないと!ですね。





checkmark.png 2.FC2ブログでOGPを有効にする

FC2ブログでOGPを有効にするのは、以下の手順でできます。

環境設定→ブログの設定→メタタグの設定

にある、「OGP設定」を有効にしてください。
これだけです。

2016011601.png
超簡単ですね。





checkmark.png 3.metaタグを記述する(記述例)

さて、次にTwitterカードをmetaタグに記述していきます。

Twitterカードって何?という人は、前回の記事を参考にしてみてください。

Bookmarklet: instantly generate a Card for any web page. | Embedly


前回の記事では、かなり汎用性を持たせるためにmetaタグも一般的な記述にしました。

<一般的なTwitterカードの記述(Summary形式の場合)>

<meta name=\"twitter:card\" content=\"summary\" />
<meta name=\"twitter:site\" content=\"@自分のTwitteID\" />
<meta name=\"twitter:title\" content=\"ブログやサイトのタイトル\" />
<meta name=\"twitter:description\" content=\"サイトの説明.\" />
<meta name=\"twitter:image\" content=\"表示させたいアイキャッチ画像のURL\" />
<meta name=\"twitter:url\" content=\"ブログやサイトのURL\" />



しかし、FC2ブログでは、テンプレートに変数が使えるために、記述を簡略化できるのです。それどころか、変数を使った方が、色々うまくいくので、もしも「1から書くの大変…」とか思っている人は、以下をコピペして使ってくれれば良いと思います。

<FC2ブログでのTwitterカードの記述>

<meta name=\"twitter:card\" content=\"summary\" />
<meta name=\"twitter:site\" content=\"@自分のTwitterID\" />
<meta name=\"twitter:image\" content=\"<%image>\" />
<meta name=\"twitter:title\" content=\"<%blog_name>\" />
<meta name=\"twitter:url\" content=\"<%url>\" />
<meta name=\"twitter:description\" content=\"<%introduction>\" />
<meta name=\"twitter:title\" content=\"<%sub_title>\" />
<meta name=\"twitter:url\" content=\"<%url>blog-entry-<%pno>.html\" />
<meta name=\"twitter:description\" content=\"<!--topentry--><%topentry_discription><!--/topentry-->\" />


上の記述で唯一、自分で入力しなくてはいけないのは、自分のTwitterIDぐらいです(赤字のところ)。

一応、記述する場所ですが、

テンプレートの設定→HTML編集

で、<head>の下あたりにペーストすれば、良いかと思います。





 eyeglass2.png 情報管理LOGの眼
 FC2ブログはTwitterカード設定がラクです

FC2ブログは、広告がウザかったり、色々面倒なことも多いのですが、OGPの設定やTwitterカードの設定の楽さは、数少ない良さの一つかもしれないですね。

Twitterカードの設定自体は、とても簡単なので、よく分からない人は、前回記事と今回のコピペだけでできちゃいますよ。ぜひ、やってみてください。


関係ないですが、これがKindleの月替わりセール対象になっていて、すごく嬉しいです。




関連記事

2 Comments

Sheephuman says..."なかなか認証が通らなくて苦労しました"
どのサイト観てもなんか分かりづらい気がしました。

それと、<FC2ブログでのTwitterカードの記述> コピペして自分のツイッターIDに置き換えて更新してみましたが、認証が通らなくて。
https://dev.twitter.com/cards/types/summary の サンプルコードを突っ込んだら認証が簡単に通ったので、そこから↑に一つずつ置き換えました。

再認証および変更箇所反映までに2~4分のタイムラグがあるみたいです。

参考までに。
2016.08.23 00:30 | URL | #- [edit]
yoshinon says..."Re: なかなか認証が通らなくて苦労しました"
認証までには、タイムラグがあるみたいですね。
場合によっては、もう少し時間がかかることがあるみたいです。
やるべきことをやって、しばらく待つというのも大事かも。
2016.08.23 02:40 | URL | #- [edit]

Leave a reply






管理者にだけ表示を許可する

Trackbacks

trackbackURL:http://hokoxjouhou.blog105.fc2.com/tb.php/480-a1be9c10
TwitterCardをスマホで見るとDescriptionが表示されない時の対処法
FC2ブログからTwitterに画像付き記事をツィートしてみたところ、簡単にできました。詳しくはコチラを参考にするとよいと思います。※メタタグの設定はtwitter:cardとtwitter:siteだけで十分です。 ところが自分のPCで見る限りは、左図のようにちゃんと表紙の画像とタイトル、省略された説明文が表示されているのにもかかわらず、「画像とタイトルだけでなく内容もつぶやいて...
該当の記事は見つかりませんでした。
SEO
loading
情報管理LOG