クリボウの Blogger Tips

Google Blogger の使い方、カスタマイズ方法、各種ツールなど、
Blogger 関連の役立つ情報を紹介しています。

> | | > Blogger ブログを Twitter Cards に対応させる方法

Blogger ブログを Twitter Cards に対応させる方法

Posted at: 2013-06-15 Label: , , 11

このブログに

いつも楽しく拝読しています。
ところで、Twitter CardsのSummaryができるかBloggerへMetaタグを入れてみたのですがサムネイル画像が出なく、クリボウ様のサイトに情報ないかなぁと思い来てみた次第です。
もし、次のネタが決まっていないのなら、この辺りを記事にしていただければ嬉れしゅうございます m (_ _) m
というコメントが入っていたので、やってみたところ

Twitter Cards (Summary) を Blogger に適用する方法

できました。導入方法をこちらでまとめておきたいと思います。


Twitter Cards って何?

最初に Twitter Cards についてです。上の画像を見て分かるかと思いますが、Twitter のツイートに URL が含まれたときにそのリンク先ページのタイトルや要約、画像を自動的に挿入してくれるのが Twitter Cards の機能です。

これを表示させるためには、リンクされるブログの方で Twitter Cards に対応したメタタグをブログテンプレートに記載しておかないといけません。Facebook の OGP(Open Graph Protocol)と同じようなものと言うと理解しやすいかもしれません。

今回はシンプルな Summary Card の導入についてみていきます。参考にさせてもらったのはこちらのサイト。ありがとうございます!


導入方法

早速、Twitter Cards 用のメタタグを用意します。クリボウが使用したのは次のタグです。

<meta content='summary' name='twitter:card'/>
<meta content='@kuribo_blogger' name='twitter:site'/>
<meta expr:content='data:blog.pageName + &quot; | &quot; + data:blog.title' name='twitter:title'/>
<meta expr:content='&quot;http://bloggerspice.appspot.com/postimage/&quot; + data:blog.url' name='twitter:image'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>

2 行目赤字部分には、ブログに関する Twitter のアカウント名を入力します。これはオプションなので、特にアカウントがない場合には行ごと削除してかまいません。他の行は、どのブログでも通用するよう Blogger のテンプレート用データタグを使用しているので、そのまま使えるはずです。これらのメタタグを Blogger の管理画面「テンプレート > HTML の編集」で <head> のすぐ後に貼り付けて保存します。

その後、Twitter Developers で Twitter Cards の申請を行います。

「Card Catalog」のポップアップが出たら「Summary」を選択、「Validate & Apply」タブを押して、自分のブログの好きな投稿の URL を入力して「Go!」を押してください。

Twitter Cards (Summary) を Blogger に適用する方法

ここで、ブログの Twitter Cards 対応状況が確認できます。右側にはプレビューが表示されます。「Standard Tags」の項目がグリーンだったら、ブログ側の設定は問題なしです。

「Request Approval」を押して申請画面を開きます。Twitter アカウントなど、必要事項を記入して(ほとんど入力済みだと思います)「Register Domain」ボタンを押します。これで全作業が終了です。意外と簡単なんじゃないでしょうか。

これで Twitter 経由のアクセスが少しでも増えるといいですね。


技術的なことなど

ここから先は、気になる人だけ読んでください。先ほどのメタタグについての解説です。

1: <meta content='summary' name='twitter:card'/>
2: <meta content='@kuribo_blogger' name='twitter:site'/>
3: <meta expr:content='data:blog.pageName + &quot; | &quot; + data:blog.title' name='twitter:title'/>
4: <meta expr:content='&quot;http://bloggerspice.appspot.com/postimage/&quot; + data:blog.url' name='twitter:image'/>
5: <meta expr:content='data:blog.metaDescription' name='twitter:description'/>

Twitter Developers のドキュメントで例示されていたメタタグを Blogger ブログ用に調整してみました。タグ内の属性が読みにくいのは、Blogger の HTML エディタが属性をアルファベット順に並べ替えてしまうので、混乱を避け最初からその順にしているためです。


1.まず、どの行でも、meta タグの最後に / を入れておきます。こうしておかないと Blogger の HTML エディタが

XML の解析中にエラーが発生しました。行 ***、列 ***: The element type "meta" must be terminated by the matching end-tag "</meta>".

と、meta タグが閉じていない旨のエラーを出してしまいます。


2.3 行目のページタイトル欄は、Blogger のテンプレート用データタグを使って「(投稿タイトル) | (ブログタイトル)」という設定にしています。区切りの文字「|」は変更可能です。Blogger 標準のページタイトル「(ブログタイトル): (投稿タイトル)」を使いたい場合は青字部分を data:blog.pageTitle に変えるといいと思います。

参考:
3.4 行目のページの画像については、BloggerSpice という Web アプリを利用しています。http://bloggerspice.appspot.com/postimage/ に投稿 URL を付加して(メタタグ内ではページの URL を示すデータタグ data:blog.url を連結)アクセスすると、投稿内の最初の画像へとリダイレクトしてくれます。これがめちゃくちゃ便利です。

参考: ちなみに、data:blog.postImageThumbnailUrl というデータタグを使って、投稿のサムネイルを取得するという方法もあるにはあるんですが、その場合 Blogger 以外にアップロードした画像が反映できないのと、画像サイズが 72 x 72 ピクセルで小さいのとで、今回は採用しませんでした。


4.最後の行では、そのページの説明文を指定しています。Blogger では、2012 年から投稿ごとのメタデータ(descriptions)を投稿エディタから指定できるようになりました(参考1参考2)。そのデータを持って来られないかな?と思い data:blog.metaDescription というデータタグを入れてみたところ、上手くいきました。めでたしめでたし。


スポンサードリンク:
お願い:
「この記事役に立った!」と思ったら、ぜひフィード登録をお願いします。 

Comments:11

  1. さっそくのご対応と丁寧な解説をありがとうございます。
    無事サマリー画像を表示させることができました。
    当方がハマった点としては、RSSはクローンサイト作成防止のため先頭のみを出力していたので完全出力へ変更しました。また、今までblogspot.jpリダイレクトは特に処置していなかったのですが、リダイレクトを許容しているのであれば、twitter cardの申請にcom/jp両方必要でした。ただアクセスのある他国ドメイン.deや.frや.twなども申請するのは現実的ではないのでリダイレクトさせない対処かカスタムドメイン名への変更かなと思っています。
    今回はありがとうございました。

    ReplyDelete
  2. 今回のこの記事には関係ない話で大変申し訳ないですが、よろしければ教えていただければと思います。Bloggerでクリボウ様の記事のように(例えばタグ表示のときの青い背景)背景に色を付けたいのですが、body bgcolor"" /body
    ではうまくいきません。よろしければお教えいただければありがたいと思います。

    ReplyDelete
  3. ああ、まさに探していたものが!本当にいつも助かります。ありがとうございました。

    ReplyDelete
  4. 最高です!
    メタタグが入らなくて苦労していたところです。
    最後にスラッシュを入れないといけないとは、気づけなかった・・・。

    ありがとうございました。

    ReplyDelete
  5. 画像の表示が出来なかったので助かりました。ありがとうございます!

    ReplyDelete
  6. معرفة كيفية شراء الاثاث المستعمل بالرياضيوضح الفرق بين وجود المنتج الرخيص الذي تنهار مرة الأولى كنت قد استخدمت أو الأثاث الرخيصة التي يمكنك لا يزال يتمتع لفترة طويلة دون إعادة طلاء عليه. وهناك سبب آخر هو أنه عندما كنت تعرف كيفية شراء الأثاث المستعمل، سوف تكون قادرة على الحصول على مصمم أو مكلفة و / أو نادرة الأثاث العتيقة في جزء بسيط من التكلفة التي ستنفق عادة عند شراء نفس اليد الأولى.
    شراء اثاث مستعمل بالرياض
    شراء الاثاث المستعمل بالرياض
    الأثاث يأتي في أنواع مختلفة، والتصميمات والمواد والأشكال والألوان والأحجام. خدمة بعض لغرض الزينة، بعض خدمة القطع الفنية اعتبارا من الأثاث، في حين أن البعض الآخر شكلا وظيفة.

    إن اختيار هذا النوع من الأثاث هو متروك لكم وأنتم سوف تكون واحدة من واستخدامه لسنوات قادمة. لذلك عندما كنت ترغب في شراء أثاث رخيصة، يجب أن تكون ذكية في القيام بذلك، وهنا طرق ذكية حيث سوف تكون قادرة على الخروج مع أفضل الأثاث لزيادة تجميل منزلك.
    شركة شراء الاثاث المستعمل بالرياض
    محلات شراء الاثاث المستعمل
    س المتقنة أثاث مستعمل يمكن العثور عليها في كثير من الأماكن. يمكنك العثور عليها في الاسواق، المرآب المبيعات حي، والأسواق برغوث، والمزادات العقارية. يمكنك حتى العثور عليها عبر الإنترنت من خلال مواقع مثل: كريغزلست وموقع ئي باي.

    س هذه الأماكن وغالبا ما يكون نادرا أو يجب أن تشتري الأثاث أنك لا يمكن أن ندعها تفلت من أيدينا، لذلك قبل أن شخصيا بزيارة هذه الأماكن، يجب أن يكون لديك ما يكفي من المال معك لدفع ثمن الشراء.

    شراء اثاث مستعمل بالرياض
    س يمكنك استعادة أو ريفينيش أثاث مستعمل ولكن التالفة. إذا كنت في السوق لشراء الأثاث الخصم التي تم استخدامها، ولها أضرار أو التأكد من أن يكون لديك تفقد المنتج جيدا قبل أن تدفع.

    مراجعة هذا البند لالشقوق، فواصل، خشونة، وكائنات جاحظ، والمفروشات مزقتها ثم تقرر ما إذا كان هذا البند هو غير مؤهل لديك استعادة أو إعادة طلاء المواهب.

    o في تعلم كيفية شراء أثاث مستعمل بذكاء، يجب عليك أيضا السعي للحصول على المشورة من أولئك الذين هم أكثر دراية مما كنت: الأصدقاء والأسرة، الديكور، بالدراسة نفسه، أو يمكنك الحصول على معلومات من المجلات تزيين الداخلية أو تصفح شبكة الإنترنت ل مزيد من النصائح.

    س عندما كنت ترغب في شراء الأثاث خمر المستخدمة، تقرر لأول مرة في الفترة سوف تريد قطعة الخاص بك يأتي من. على سبيل المثال، إذا كنت تريد الأثاث الحديد المطاوع صرخات العصر الفيكتوري، والبحث عن فواصل وينضم إذا كان الأثاث له ذلك، ثم انها ليست الحديد المطاوع ولكن يلقي الحديد والأثاث. علامة منبهة آخر هو أن يتميز الحديد المطاوع الفيكتوري التي كتبها ورقة الكرمة وفلور دي الدعاوى التصاميم.

    س سر لتعلم كيفية شراء الأثاث المستعمل، وعدم شراء شيء لأنها رخيصة أو أنك ترغب في ذلك. يجب عليك أن تنظر في الفضاء أنك تضع الأثاث إلى التأكد من أن هذا البند ينطبق هذا الفضاء والتصميم والأسلوب واللون، وكذلك نوع من المواد يجب أن لا تصطدم مع موضوع غرفة المعيشة الخاصة بك حتى يتسنى لك "سيتم إعادة الجدول لا تبرز مثل قرحة الإبهام.
    شركة شراء الاثاث المستعمل بالرياض

    مع الاقتصاد في الوقت الراهن، هو بالتأكيد هناك الكثير من المعنى والتطبيق العملي في تعلم كيفية شراء أثاث مستعمل. هذا ليس فقط حتى يتسنى لك أن تكون قادرة على العثور على أثاث رخيصة من أجل السعر ولكن الأثاث الرخيص الذي لديه نوعية، والأسلوب، والتصميم، وحتى الوظائف التي تجعل بيان جريء في غرفة المعيشة الخاصة بك.

    ReplyDelete

Comments on Google+:

© 2005-2014 Kuribo. Powered by Blogger.