内部リンクを効果的に！Bloggerで使えるブログカード4選

ブログを運営している人なら、内部リンクがSEOに効果的なことはご存じだろう。記事内に自分のブログの他ページのリンクを貼ることで、ユーザーがブログ内に滞在する時間を伸ばし、PV数を増やすのに有効だ。
基本的にはリンクさせたい記事タイトルのテキストにリンクを貼るだけで良いのだが、もっと視覚的にリンクをアピールするにはブログカードを利用するとよい。このブログカードは、はてなブログやWordpressではプラグインで簡単に対応できるが、残念ながらBloggerではそのようなサービスがない。そこで外部サービスを利用して簡単にブログカードを作成し、記事から記事へ視覚的に誘導しよう。

1. ブログカードとは？

「浪漫」を追求する旅がしたい！
ブログカードとは、記事内でのリンクを視覚的に紹介するもの。上記画像のように記事タイトル、サムネイル、ディスクリプションがカードスタイルで統一されたものだ。TwitterカードやFacebookでウェブページの内容を伝えるためのOGP（Open Graph Protocol）のような役割がある。ただリンクが張られたテキストより、視覚的にその先のページの内容がわかるブログカードのほうが、よりユーザーにアピールすることが出来る。

ただ、テキストリンクとブログカードによるリンクのどちらが内部リンクに有効かという点については、ブロガーたちの間で意見が分かれるようだ。インターネットが普及した頃から「リンクはテキストが青又は紫色で表示され、下線があるもの」という概念があるらしく、必ずしも視覚的に有効なブログカードのほうがクリックしてもらいやすいとは限らないからだ。

とはいえ、内部リンクを効果的に貼るという点においてはブログカードは役に立つので、是非とも利用してもらいたい。

2. ブログカードが簡単に作れるウェブサイトを紹介

冒頭に書いたように、はてなブログやWordpressはプラグインで対応するのだがBloggerにはそのようなガジェットもサービスもない。そこでブログカード・ジェネレーターのようなウェブサイトをいろいろ探してみたので、紹介したい。いずれも作成したいページのURLを入力するだけで簡単にブログカードが作成できる。後は好みでどのサイトを利用するかだ。

ブログカードのサンプルとして紹介した当ブログのページを、各ウェブサイトで紹介している方法で表示してみる。

2-1 EMBED BOOKMARKLET

URL https://embed.ly/bookmarklet

見出し「ブログカードとは？」のすぐ下に貼っているサンプルのブログカードが、EMBED BOOKMARKLETで作成したものだ。当ブログでもたびたび使用している。
利用方法は簡単で、下記画像の通りページを開いたら、①の「＋Embed」ボタンを自分のブラウザーのブックマークバーへドラッグして保存。あとは作成したいページでブックマークバーにおいた「＋Embed」ボタンをクリックして、ポップアップに記載されたhtmlをコピーし記事中に張り付けるだけ。
画像の大小やディスクリプションのあり、無しを選べるので好みで作成する。

【クリックで拡大】

特にCSSをいじることなく出来るので、非常にシンプルで便利だ。筆者としては枠線がないのが気になるので、枠線をつけるCSSを追加した。また、カード右下に「powered by embedly」と表示されるのが気になる。

2-2 ShareHtmlを、もっと綺麗にしたメーカー

【ブログカードサンプル】

URL https://sharehtml.site/

もともとShareHtmlという物があったようだが、それをバージョンアップさせたものらしい。下記画像のようにページを開き、ブログカードを作成したいhtmlを入力するとプレビュー、html、CSSの3つが作成される。htmlは記事中にそのまま貼り付け、CSSはBlogger管理画面の「テーマ」→「カスタマイズ」→「上級者向け」→「CSSの追加」欄に張り付けて保存する。一度CSSを保存しておけば、2回目からはhtmlだけコピーして貼り付ければよい。

【クリックで拡大】

左右のマージン、サムネイルの大きさなどは出来たCSSから調整が可能だ。

2-3 ブログカード風の紹介リンクタグ作成

【ブログカードサンプル】
URL https://matsmoto.jp/tool/link-001/

下記画像のように、URLを入力するとタグ、プレビューが表示され、それを見ながら右側で調整が出来るので、わかりやすい。

【クリックで拡大】

調整しやすいのは良いが、タグの中にCSSが全部入るので記事のhtmlが美しくない。また、サムネイルが横長になってしまうのが気になるところだ。

2-4 The Other Way Round～ブログカードのブックマークレットを作成しました

【ブログカードサンプル】
URL https://vanillaice000.blog.fc2.com/blog-entry-583.html

個人的には、このサイトで作成されるブログカードが最もスッキリとしていて気に入っている。作成方法は全て作者のブログ内に記載されているので、その通り作成して欲しい。「ShareHtml～」同様、CSSを別途保存しておく必要があるが、一度保存してしまえば簡単だ。

3. ブログカード作成サイト利用の注意点

わざわざ書くほどのことでもないが、念のため。

筆者は普段PCでブログを書いているので、時々レスポンシブのUIの確認を忘れることがある。ブログカードの場合も必ずPC、スマホ画面を確認して、適宜CSSを修正することを忘れないように。

これであなたのブログ記事もより見栄えが良くなったと思う。