Bloggerの記事内にブログカードを埋め込み表示する方法

サイト内の記事や外部のサイトを記事内で紹介する時、テキストリンクではなく、記事タイトル、概要、サムネイル画像などを見やすくまとめたカード型の表示形式をブログカードと呼びます。ブログカードは、単にリンクを貼るよりも見栄えがするので、はてなブログやWordPressの個人サイトで利用しているサイトが多いです。
[post_ads]
2014年に、はてなが、はてなブログのユーザー向けにブログカードを導入し、大人気となりました。当初、ブログカードは、はてなブログの記事のみ利用可能でしたが、その後、OGPに対応して、外部のWebサイトも利用できるように機能を拡張しました。

あまり知られていないように思いますが、はてなのブログカードは、iframeを使用することで、他のブログサービスやWordPressなどのCMSでも利用することが可能です。Bloggerでも使えます。（BloggerやWordPress以外のブログサービスでも利用可能です。）設定方法を、本記事で後ほど紹介します。

ブロギングライフでは、WordPressでテーマはDigiPressさんのMagJamを使用しています。DigiPressさんのWordPressテーマは、はてなブログのブログカードの機能を利用して、ショートコードでブログカードに対応しています。

以下はブロギングライフのパソコンページのサイドバーに設置しているブログカードの表示例です。

備考：
WordPressでは、ブログカードをテーマでネイティブ（テーマ側で独自機能）で対応している場合もありますが、はてなのブログカードをiframeを使用して対応している場合もあります。

はてなの「ブログカード」はOGPに対応、Bloggerでも利用可能。

はてなブログでは、ブログカードの機能を拡張してOGPのメタデータを使用して、外部のサイトのWebページにも対応しています。また、iframeを使えば、外部サイトでもブログカードを記事内に表示することができます。（本ブログは、Bloggerを使用しています。）

WebページのOGPのメタデータの出力が適切にされていれば、Bloggerの記事ページも以下の様にブログカードで表示することができます。

Bloggerの記事内にブログカードを埋め込む方法

はてなのブログパーツのサイトアドレスに、WebページのURLを以下の様に記述すると、ブログカードが生成されます。

https://hatenablog-parts.com/embed?url=https:www.example.com/sample-page.html

作成したブログカードをiframeで表示するコード例です。

[<iframe class="hatenablogcard" style="width:100%;height:175px;margin:15px 0;max-width:680px;" title="%title%" src="https://hatenablog-parts.com/embed?url=https://www.blogging-life.com/facebook-open-graph-debugger/" frameborder="0" scrolling="no"></iframe>]

上記コードをBloggerの記事作成編集ページで入力をHTMLにしてコードを貼り付けると、以下の様にブログカードが表示されます。

はてなブログカードをBloggerで使う場合の留意事項

はてなが、外部のサイトがブログパーツをiframeで埋め込み表示していることについての公式の見解や外部利用でのドキュメントを見たことがありません。予告なく仕様が変更され、利用できなくなる可能性があります。

しかし、iframeを使用してはてなのブログカードを利用しているWordPressのサイトも相当数あるので、仕様が変更されたり、何らかの問題が発生した場合には、状況や対処法についての情報は比較的入手しやすいと推測しています。

また、iframeを使用して表示しているため、記事内に設置していても、検索エンジンやAdSenseのクローラーからは、サイト内のオリジナルコンテンツとは見なされません。

検索エンジンやAdSenseのクローラーでは、サイト内のリンクを辿って、記事と記事との関連性などを分析したりします。サイト内の記事をiframeでブログカードで表示した場合は、内部リンクとしてサイト内の関連記事であることのシグナル（信号、情報）をクローラーに伝えられなくなります。

Google アナリティクスのトラッキングでは、iframeのブログカードをクリックして、サイト内の別記事を表示した場合、ユーザーは同じとして扱われますが、セッションは新しいセッションとして取り扱われます。（はてなブログパーツのURLがリファラー（参照元）となる新しいセッションとして取り扱われる可能性が高いです。）

そのため、サイト内に多くのiframeによるブログカードが設置されていて、ユーザーがクリックする頻度が高い場合、セッションあたりのページビュー数や滞在時間などのアナリティクスの指標に影響を与える度合いが大きくなります。

これらのiframeを使用した場合のポテンシャルマイナス要素は、サイトが運営するYouTube ビデオやFacebookの投稿を記事内に埋め込んだ場合と扱いは基本的に同じです。そのため、気にするほど、ネガティブな要素にはならない可能性も高いです。（特に個人のサイト、一般的なサイトでは、ほとんど気にする必要がないとも言えます。）

ブログカードは見た目が魅力的なことが大きな長所です。サイトによっては、ブログカードを掲載することで、通常のテキストリンクよりも、ユーザーがクリックする確率(CTR)が高くなるなど、ユーザーエンゲージメントが高まる効果も見込めます。

上で書いたような留意点なども考慮した上で、ブログカードを利用するかご判断されることをお勧め致します。

WordPressでも記事内にブログカードを使用することができますが、ブロギングライフでは通常、記事内のリンクは、テキストかボタンを主に使用しています。

ブログカードのクリック数の入手方法

Blogger 管理画面のメニュー「統計」をクリックし、サブメニューから「トラフィック」を選択すると、参照元URL、参照元サイトの情報が表示されます。「参照元URL」の hatenablog-parts.com/embe... からのページビュー数は、ブログカードをクリックした数に相当します。

上の留意事項では、iframeを使用した場合、アクセス情報に影響を与える懸案点として記載しましたが、反面、Bloggerの管理ページの参照元から簡単にブログカードのアクセス数の概要を知ることができるのは、長所だと思います。

関連記事：

Chromeの拡張機能Create Linkを使用すると、本記事で紹介したiframeのブログカードのコードを1クリックで作成することができます。