OPG!Blogger(ブロガー)でTwitter Card(ツイッターカード)を設定する方法

おすすめ記事ピックアップ




昨今、OPG!OPG!とよく聞くようになりました。OPGとは簡単に言えばFacebookやTwitterなどのSNSで、ページがシェアされたときに引用の見栄えが良くなる設定のことです。

Blogger(ブロガー)で、OPGのTwitter Card(ツイッターカード)を設定する方法を説明いたします。基本的にBlogger使いの神様クリボウさんのサイトのやり方のままです。まずクリボウさんの記事を一読ください。
Blogger ブログを Twitter Cards に対応させる方法
http://www.kuribo.info/2013/06/twitter-cards-on-blogger.html
それでも良くわからない人向けに、わかりづらい点の補足を加えたいと思います。またTwitterのアカウントを取得していることを前提に話しを進めます。Twitterをもっていなければ、この機会にTwitterを初めてみましょう。

BloggerのTwitter Cardの概要

クリボウさんの記事を見ても、何をやっているのかわからない人は、全体の概要がつかめていないのだと思います。

作業の内容としては、Twitter Cardに対応させるために、Bloggerに特定のコードを挿入する必要があります。HTMLの編集からコードを挿入します。

そのコードがあると、TwitterではTwitter Cardの情報を作ることができます。「Card validator」というサイトで、コードが正しく設定されているかチェックできます。

そしてTwitterへ申請が必要です。「Card validator」というサイトから申請を行います。


Bloggerへコードを追記する

Bloggerへ下記コードを挿入します(クリボウさんからの引用です)。

<meta content='summary' name='twitter:card'/>
<meta content='@kuribo_blogger' name='twitter:site'/>
<meta expr:content='data:blog.pageName + " | " + data:blog.title' name='twitter:title'/>
<meta expr:content='"http://bloggerspice.appspot.com/postimage/" + data:blog.url' name='twitter:image'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
要注意:黄色い部分は、自分のTwitterアカウントを挿入しましょう。


このコードを挿入する場所がとても重要です。「テンプレート→HTMLの編集」からHTMLの編集画面に入りましょう。そして、かならず<head>の真下に設置しましょう。少し下のほうに設置したら、動きませんでした。ここはとても重要です。コードの設置が完了したら、テンプレートを保存しましょう。


TwitterにログインしてCard validatorで確認

コードの設置が成功したら、TwitterへログインしてCard validatorで確認しましょう。

Card validator
https://cards-dev.twitter.com/validator

自分のBloggerの記事のURLを入れて、プリビューを押しましょう。引用部分が画像付きで紹介されれば成功です。※下記は登録済みの画像です。実際は左側の表示がちょっと異なります。



Card validatorへ登録する

正しく表示されたら「Request Approval」が表示されます。クリックしましょう。


登録画面が出てきます。ほとんどの部分は自動で記載されます。NameやEmailやTwitter Usenameなどが記載されていなければ、使っているものを入力しましょう。

「Website Information」の「Descriotion」は、Bloggerのサイト名でも入力しましょう。

普通のサイトであれば、その下のチェックは不要です。アダルトっぽいサイトの場合に使うのかなと推測しています。

最後にTwitterのアカウントを入力しましょう。これで完了です。

メールを確認して完了

下記のメールが届きます。Getをクリックして完成です。







いいね!と思ったらお願いします。


名前

AddToAny adsence adwords Amazon AmazonFBA Calculator Analytics Blogger BMAG chrome CODEPREP Eclipse envato facebook FAQ feedly Font Awesome Geek Press Gifzo Illustrator kindle LinkWithin Logaster myfonts NAVER Photoshop PHP picasa Premiere Similarweb TOPSY tumblr Wordpress wpX XAMPP zenback ウェブマスターツール ウハウハモウケタイ カスタマイズ ゲストシリーズ ココナラ サイト制作 ドメイン はじめに プレスリリース プレスリリース作成 プレスリリース利点 まとめ ランディングページ リリース送付先の見つけ方 レビュー 考察 子孫セレクタ 思いつきサイト制作 書評 足成 台湾 通販 日記 忍者おまとめボタン 文章の基本
false
ltr
item
ふりむけばコウホウ : OPG!Blogger(ブロガー)でTwitter Card(ツイッターカード)を設定する方法
OPG!Blogger(ブロガー)でTwitter Card(ツイッターカード)を設定する方法
Blogger(ブロガー)で、OPGのTwitter Card(ツイッターカード)を設定する方法を説明いたします。基本的にBlogger使いの神様 クリボウさんのサイトのやり方のままです。
http://1.bp.blogspot.com/-b2jaRZjF8O8/VLrcd3jpHoI/AAAAAAAAWac/Kh78VgK94yk/s1600/pic.png
http://1.bp.blogspot.com/-b2jaRZjF8O8/VLrcd3jpHoI/AAAAAAAAWac/Kh78VgK94yk/s72-c/pic.png
ふりむけばコウホウ
http://www.furimuke.com/2015/01/bloggeropgtwitter-card.html
http://www.furimuke.com/
http://www.furimuke.com/
http://www.furimuke.com/2015/01/bloggeropgtwitter-card.html
true
8618648785166852656
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All 関連記事:もっと見るはクリック→ LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy