【イメージ】
ブログを運営している人なら、内部リンクが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をコピーし記事中に張り付けるだけ。
画像の大小やディスクリプションのあり、無しを選べるので好みで作成する。
 |
| 【クリックで拡大】 |
2-2 ShareHtmlを、もっと綺麗にしたメーカー
【ブログカードサンプル】もともとShareHtmlという物があったようだが、それをバージョンアップさせたものらしい。下記画像のようにページを開き、ブログカードを作成したいhtmlを入力するとプレビュー、html、CSSの3つが作成される。htmlは記事中にそのまま貼り付け、CSSはBlogger管理画面の「テーマ」→「カスタマイズ」→「上級者向け」→「CSSの追加」欄に張り付けて保存する。一度CSSを保存しておけば、2回目からはhtmlだけコピーして貼り付ければよい。
 |
| 【クリックで拡大】 |
2-3 ブログカード風の紹介リンクタグ作成
【ブログカードサンプル】URL https://matsmoto.jp/tool/link-001/
下記画像のように、URLを入力するとタグ、プレビューが表示され、それを見ながら右側で調整が出来るので、わかりやすい。
 |
| 【クリックで拡大】 |
2-4 The Other Way Round～ブログカードのブックマークレットを作成しました
【ブログカードサンプル】
あなたの"浪漫"はなんだろう？ゴルフ？テニス？ウィスキー？ギター？あらためてよく考えて「浪漫」を追い求める旅をすると、旅の楽しさが倍増するかもしれない。いや、「楽しさ」という軽々しい気持ちではないくらい、心に強烈に残る旅になるだろう。今回は「浪漫」を追い求める旅を検証してみたいと思う。
個人的には、このサイトで作成されるブログカードが最もスッキリとしていて気に入っている。作成方法は全て作者のブログ内に記載されているので、その通り作成して欲しい。「ShareHtml～」同様、CSSを別途保存しておく必要があるが、一度保存してしまえば簡単だ。
3. ブログカード作成サイト利用の注意点
わざわざ書くほどのことでもないが、念のため。筆者は普段PCでブログを書いているので、時々レスポンシブのUIの確認を忘れることがある。ブログカードの場合も必ずPC、スマホ画面を確認して、適宜CSSを修正することを忘れないように。
これであなたのブログ記事もより見栄えが良くなったと思う。
コメント