天空旅人トランジット通信 ドラクエ10

ドラクエXの最新情報・攻略・金策・狩場情報ブログ。DQ10初~中級者向けわかりやすい目線で更新。

PREV | PAGE-SELECT | NEXT

≫ EDIT

FC2ブログにOGPを設定してTwitterCardsに画像サムネイルを表示させる方法

今回の記事はブロガーさん(とくにFC2)向けの技術的なお話。

 

TwitterCardsとは何か?

 

140504ogp1

 

↑このように記事を紹介した際にクリックすると概要が表示されるようにする機能です。

 

 

 

140504ogp2

 

①概要を表示という形になっています。同じ記事紹介ツイートでもナカムさんのツイートは②開くになっており概要の表示がされません。

わたしはhagumeta.comという独自ドメインを利用しておりますが、中身はナカムさんと同じFC2ブログです。

 

 

 

OGP = Open Graph Protocol

 

ブログにOGPを設定することで、TwitterCardsの表示に成功しました。

OGPとは、FacebookやTwitter、mixiなどのSNSで共通に使われる記事紹介の規格らしいです。わたしはFacebookをやっていないので、今回調べて初めて知りました。

 

続きを読むからどうぞ↓


↑あなたの1ポチでランクUP!



 

 

Livedoor、アメーバ、はてな、seesaa他は自動でやってくれる

 

140504ogp3

 

↓該当ツイート

【Livedoor】https://twitter.com/yuuka_dq10/status/461899490471837696

【アメーバ】https://twitter.com/yuutopapa7/status/462736191968669696

【seesaa】https://twitter.com/yukidomari/status/462763587803418626

【FC2】https://twitter.com/nuntyaku93/status/462257321842704385

 

blogサービス側で簡単に設定できるようなので、興味がある方は設定をご確認ください↓

 

Twitter Cardsに対応しました|livedoor Blog 開発日誌Twitter Cardsに対応しました|livedoor Blog 開発日誌

 

【Seesaaブログ】「Twitter Cards」に対応しました:Seesaaからのお知らせ【Seesaaブログ】「Twitter Cards」に対応しました:Seesaaからのお知らせ

 

はてなブログがTwitter Cardsに対応しました。ツイートで記事の概要が表示されます[追記あり][再追記あり] - はてなブログ開発ブログはてなブログがTwitter Cardsに対応しました。ツイートで記事の概要が表示されます[追記あり][再追記あり] - はてなブログ開発ブログ

はてなブログでは、TwitterでWebページがきれいにシェアされる「Twitter Cards」に対応しました。ブログ記事をツイートすると、タイトルや写真・本...

 

 

 

FC2ブログの場合、自力でコードを記述する必要がある

 

2014/05/04現在、FC2ブログサービスはOGPに未対応です。

 

140504ogp4

↑そのため、テンプレートの設定から自力でHTMLを編集しなければいけません。

 

 

 

HTMLを変更する前に、テンプレートの複製を

 

140504ogp5

 

HTMLの編集は、うっかり1文字消してしまうだけでも大幅にブログのデザインが狂ってしまったりするので、万が一に備えてテンプレートを複製しておき、失敗したらすぐに元の状態に戻せるようにしておきましょう。

 

 

 

FC2blog用OGPの設定方法

 

FC2ブログをFacebookのOpen Graph protocol(OGP)に対応させる : Web Memo.SEFC2ブログをFacebookのOpen Graph protocol(OGP)に対応させる : Web Memo.SE

↑こちらの記事が一番分かりやすかったのでご参照ください。

一番下の【正常に設定されているか確かめるには】という項目のURLリンターは、Facebookのアカウントを持っていないと利用することができないので、スルーして大丈夫です。のちほど別の方法で正常かどうか確かめます。

 

 

 

ちなみにHTML5の場合は、やり方が違います

 

140504ogp7

ご自身のブログにHTML5が使われているかどうかは、テンプレートの一番最初の行を見ることで確認できます。

 

140504ogp8

 

このように↑一番上の行の!DOCTYPE~が長いものは、HTML5ではありません。

!DOCTYPE htmlという短いものはHTML5なので、その場合はググッてください。

 

 

 

Twitter Cardsのためのメタタグを追加

 

FC2ブログの記事を「Twitter Cards」に対応させる : Web Memo.SEFC2ブログの記事を「Twitter Cards」に対応させる : Web Memo.SE

↑引き続き、こちらの記事を参考に。

 

140504ogp6

↑このように、

<head>
</head>
の間に、

<meta name="twitter:card" content="summary">

<meta name="twitter:site" content="@[Twitter ID]">

を、追加します。

[Twitter ID]の部分は、ご自身のTwitterIDに置き換えてください。

よくわからなければ、

</head>
の直前に記述すれば安全かなぁと思います。

 

 

 

Twitterに申請!

 

Card Validator | Twitter Developers

↑こちらのアドレスから申請します。

 

140504ogp9

 

↑Summaryを選択。

 

 

140504ogp10

 

↑ Validate & Applyを選択

 

140504ogp11

 

↑ご自身の記事アドレスを入力してGo!
ここでTwitterCardsが正常に生成できているか確かめることができます。

 

ここからの登録の流れは

http://yossense.com/twitter-cards/

↑こちらのブログが詳しいです。

 

 

 

反映されるまでちょっとだけ時間かかるので

 

登録後、しばらく間をおいてみてください。

 

140504ogp12

 

無事、TwitterCardsの表示に成功↑

 

 

 

FC2だと画像サムネイルが表示されない!

 

FC2ブログでFacebookのOGPに記事のサムネイルを設定する方法 | アルペジオのようにFC2ブログでFacebookのOGPに記事のサムネイルを設定する方法 | アルペジオのように

↑こちらの記事の方法で解決することができます。

これはFC2ブログの画像アドレスが特殊な仕様になっていることが原因です。画像サムネイルを表示させるにはもう1ステップの工夫が必要で、ブログとは別にご自身で画像置き場を用意する必要があります。

 

 

 

おつかれさまでした

 

FC2ブロガーでない方にはまったく必要ない情報でしたね(^ω^;)

せっかく苦労したので記事にしてみました。ここわかんないよ!という部分があれば、気軽に聞いていただければ分かる範囲でお答えします。わたしもシロートなので、完璧に答えられるわけではないのでそこはご容赦下さい。

 

 

↑わたしが今回追記したHTMLの一部です、少なくとも赤線部分はご自身の環境に合わせて変更ください。また、これだけ記載すればいいというものではありませんので、リンク先の解説記事を精読のうえ、参考としてご利用ください。

 

関連記事

 

反響が大きかった記事

 

 

天空旅人トランジット通信は移転しました!

 

天空旅人トランジット | だいたいドラクエ10について。執筆者に「ゆめ」さんが加わりました!天空旅人トランジット | だいたいドラクエ10について

 

新アドレスは『hagumeta.net』です。

 

もしよかったら、ブックマーク、RSS登録、feedlyへの登録などをよろしくお願いします。

 

更新情報はツイッターでもお知らせしています。
@yukidomariをフォローして頂けると嬉しいです!

 

 

| 未分類 | 00:09 | comments:0 | trackbacks:0 | TOP↑

COMMENT











非公開コメント

TRACKBACK URL

http://hagumeta.com/tb.php/726-113e62e3

TRACKBACK

PREV | PAGE-SELECT | NEXT