内部リンクを効果的に!Bloggerで使えるブログカード4選 | ウラの裏

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

ブログイメージ

ブログを運営している人なら、内部リンクがSEOに効果的なことはご存じだろう。記事内に自分のブログの他ページのリンクを貼ることで、ユーザーがブログ内に滞在する時間を伸ばし、PV数を増やすのに有効だ。

基本的には、リンクさせたい記事タイトルのテキストにリンクを貼るだけで良いのだが、もっと視覚的にリンクをアピールするには、ブログカードを利用するとよい。

このブログカードは、はてなブログやWordpressではプラグインで簡単に対応できるが、残念ながらBloggerではそのようなサービスがない。

そこで、外部サービスを利用して簡単にブログカードを作成し、記事から記事へ視覚的に誘導しよう。

ブログカードとは?

ブログカードとは、記事内でのリンクを視覚的に紹介するもの。

上記画像のように、記事タイトル、サムネイル、ディスクリプションが、カードスタイルで統一されたものだ。Twitterカードや、Facebookでウェブページの内容を伝えるためのOGP(Open Graph Protocol)のような役割がある。

ただリンクが張られたテキストより、視覚的にその先のページの内容がわかるブログカードのほうが、よりユーザーにアピールすることが出来る。

ただ、テキストリンクとブログカードによるリンクの、どちらが内部リンクに有効かという点については、ブロガーたちの間で意見が分かれるようだ。

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

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

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

冒頭に書いたように、はてなブログやWordpressはプラグインで対応するのだが、Bloggerにはそのようなガジェットもサービスもない。

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

EMBED BOOKMARKLET

URL https://embed.ly/bookmarklet

ブログカード作成サイトとしては、最も有名なのが「EMBED」。

利用方法は簡単で、下記画像の通りページを開いたら、①の「+Embed」ボタンを自分のブラウザーのブックマークバーへドラッグして保存。

あとは、作成したいページでブックマークバーにおいた「+Embed」ボタンをクリックして、ポップアップに記載されたhtmlをコピーし記事中に張り付けるだけ。

画像の大小、ディスクリプションのあり無しを選べるので、好みで作成する。

Embed

特にCSSをいじることなく、非常にシンプルで便利だ。

筆者は、枠線がないのが気になるので、枠線をつけるCSSを追加した。また、カード右下に「powered by embedly」と表示されるのが気になる。

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

URL https://sharehtml.site/

もともとShareHtmlという物があったようだが、それをバージョンアップさせたものらしい。

下記画像のようにページを開き、ブログカードを作成したいhtmlを入力するとプレビュー、html、CSSの3つが作成される。

htmlは記事中にそのまま貼り付け、CSSはBlogger管理画面の「テーマ」→「カスタマイズ」→「上級者向け」→「CSSの追加」欄に張り付けて保存する。

一度CSSを保存しておけば、2回目からはhtmlだけコピーして貼り付ければよい。

sharehtml

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

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

URL https://matsmoto.jp/tool/link-001/

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

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

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

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

URL https://vanillaice000.blog.fc2.com/blog-entry-583.html

個人的には、このサイトで作成されるブログカードが最もスッキリとしていて気に入っている。

作成方法は、全て作者のブログ内に記載されているので、その通り作成して欲しい。

「ShareHtml~」同様、CSSを別途保存しておく必要があるが、一度保存してしまえば簡単だ。

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

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

筆者は、普段PCでブログを書いているので、時々レスポンシブのUIの確認を忘れることがある。

ブログカードの場合も必ずPC、スマホ画面を確認して、適宜CSSを修正することを忘れないように。

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

お詫び

【お詫び 〜 January, 2021】
Google Bloggerで始めたが、この度Wordpressに変更した。
こんなことを書いておいて、Bloggerに関する記事が意味なさなくなってしまうかもしれないことをお許しいただきたい。

コメント