忍者ブログ
RoboCup Junior Japan Rescue Kanto OB

             2005~2013
[1122]  [1121]  [1120]  [1119]  [1118]  [1117]  [1116]  [1115]  [1114]  [1113]  [1112

前回の記事の影響で総アクセス数が一週間で一気に10万増えました。

多分このペースで記事がパズり続けることができれば、

恐らく将来的にこのブログにはたくさんの広告が貼り付けられることでしょう。


さて、本日のネタはTwitterカードというものです。

皆様が沢山広告がある系のブログの記事リンクをURLをTwitterに貼ったとき、

URLの文字列ではなく。このような感じでサムネイルがツイートに生成されているかと思います。


これがTwitterカードと呼ばれるものですね。

先週の話ですが、この今では当たり前の機能を、遂にこのブログでも実装したのです!
Twitter社とかと契約した一部のドメインだけに許された特殊な機能だと思ってました、はい。


というわけでそのやり方について、ついでにここに書き記しておこうかと思います。

結構意外なんですけど、画像をサムネイルとして使うだけなら、Twitter社への登録とかは必要ないです。

やることはブログのhtmlの<head>~</head>内に特定のmetaタグを記載するだけです。

記述するタグはこんな感じで、記事のタイトル、説明、サムネイル画像、サムネイル形式を記載します。

<meta name="twitter:title" content="記事タイトル" />
<meta name="twitter:description" content="記事説明文" />
<meta name="twitter:image" content="サムネイル画像" />
<meta name="twitter:card" content="summary_large_image" />

サムネイル形式は7パターンあって上の画像のものはsummary_large_imageと呼ばれる種類のものです。

他のものは写真勝小さいもの、大きいもの、複数の写真が出せるもの、

画像以外ではスマホアプリ広告用、動画用、ソフトウェア広告用などがあるようです。
アプリなどの広告に関してはdevの方で登録がいるようですね


今回はブログサービスの内製のテンプレートタグから記事タイトルや説明文を引っ張りました。

また、サムネイル画像にはそのまま画像のURLを入れるのですが、

今回は記事内に画像がある場合は一番上の画像を、そうでない場合はデフォルトの画像を使うようにしました。

また、リンクがブログのトップである場合は、記事ではなくブログの説明を掲載するようにしています。

このあたりの処理については当然、各ブログサービスによって実装方法が異なるかと思いますで

各サービスの資料を確認して適切な実装を行う必要があるかと思います。
忍者の場合はそのあたりの分岐条件も含めてすべてテンプレートタグで対応できていました。


実装および更新が終わった際にはこちらのページにてURLを貼ることで、

そのページのカードを確認することができます。どうやら変更等の反映にはラグがあるようです。


というのが今日のお話でした。

世間のトレンドから6週ほど周回遅れな気がしますが、旧時代の遺物としてこれからも頑張っていこうと思います!


(^・ω・)ノ curonet at RadiumProduction

Comments
※コメントは内容確認後に手動で公開するようにしております。反映までしばらくお待ちください。
Your Name
Title
color
Comment
 

カレンダー
10 2024/11 12
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
最新CM
[05/09 ONE RoboCuper]
[05/07 HDD ほしいよー]
[04/21 ブラック3辛]
[12/26 bols-blue]
[06/08 ONE RoboCuper]
かうんた
カウンター カウンター
らじぷろ目次
らじぷろ検索機
プロフィール
HN:
Luz
性別:
男性

PR

忍者ブログ 2007-2021,Powered by Radium-Luz-Lα+-Rescatar in RadiumProduction [PR]


Related Posts Plugin for WordPress, Blogger...