企画・制作・システム開発・PR・運用までワンストップサービス

テキストリンクで記事の価値を高めよう!2種類の設置方法と注意点

作成日:2016.07.22

最終更新日:2016.07.22

カテゴリー:Tips

  • twitter
  • このエントリーをはてなブックマークに追加

ウェブサイトを運営する上でもっとも大切なことは、「サイトを見る人に価値ある情報を提供する」ということです。
そのためには、メインコンテンツである記事の品質が重要なことは言うまでもありません。

記事の品質向上のためには「情報の質を高める」「文章を読みやすく洗練させる」などの努力が当然必要ですが、ウェブの場合はそれだけでは足りません。
ウェブサイトは紙媒体のメディアとは異なり、記事の内容そのもの以外にも「動画の挿入」や「コメント欄の設置」などでコンテンツの価値を飛躍的に高めることができます。
記事内に挿入する「テキストリンク」も、ウェブサイトだからこそ使うことができる仕組みの1つです。

この記事では、記事の中に挿入する「テキストリンク」について、設置方法から注意事項まで解説していきます。

1.テキストリンクとは何か

テキストリンクとは、文字列に設定されたハイパーリンクのことです。
クリックすると別のページへの移動が可能で、ウェブサイト運営者なら必ず使用する機会がある機能です。

まずは、テキストリンク設置のメリットと設置方法をみていきましょう。

1-1.テキストリンク設置のメリット

テキストリンクを設置する最大のメリットは、「情報の補完」です。

たとえば、ウェブサイトの構築について説明している記事があるとします。
説明の中に「DNS」という言葉が出てきた場合、「DNS」を知らない読者には説明が十分に伝わらない可能性があります。
かといってDNSのような説明が簡単ではないワードについての補足を記事内に記すと、本題とは逸れたところに多くのテキストを割かれ、記事全体が冗長になってしまうという懸念があります。
そのような場合、下記のような形で情報を補完することが可能です。

DNSって何だろう?と思った読者は、自分の意思でリンクをクリックし、該当の情報が記載されてたウェブページを閲覧します。
リンク先のページは、他サイトのものでも自サイトのものでも構いません。

1-2.テキストリンクの設置方法

テキストリンクは、任意の文字列をHTMLのaタグで囲うことによって設置されます。

これは<a href=”○○○”>テキストリンク</a>説明用サンプルです。

上のような形で文章中にaタグを挿入すると、「テキストリンク」という文字列に「○○○」というURLへのリンクが設置されます。

2.テキストリンク設置の2パターン

さて、それでは具体的な設置パターンをみていきましょう。

記事内に設置するリンクは、主に「文章内テキストに設置するタイプ」と「文章とは別に設置するタイプ」の2種類があります。
ここでは、それぞれの特徴とメリット・デメリットを説明していきます。

2-1.文章内のテキストに設置するタイプ

まず、記事文章内に直接設置するタイプをみていきましょう。
下画像を見てください。

これは、当サイトの「記事下リンクユニットでPV数が変わる!サイト内の回遊性を上げる方法」という記事のキャプチャ画像です。
青で表示されて下線が引かれている箇所は、他ページへのテキストリンクが設置されています。

実際のHTMLソースは、このようになっています。

<p>WordPressサイトなら、「WordPress Related Posts」や「<a href=”https://nandemo-nobiru.com/wp-5299″>Yet Another Related Posts Plugin(YARPP)</a>」などのプラグインで簡単に設置できます。<br>
筆者としてはカスタム性の高いYARPPがおすすめですが、WordPress Related Postsもメジャーなプラグインで設定も簡単なので、初心者ならこちらでもいいでしょう。</p>
<p>WordPressユーザー以外は、外部サービスの「<a href=”http://www.linkwithin.com/learn?ref=widget”>LinkWithin</a>」や「<a href=”http://corp.shisuh.com/milliard%E9%96%A2%E9%80%A3%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6/”>Milliard</a>」などでも簡易に実装可能です。</p>

見比べてみると、aタグで囲われている部分がテキストリンクになっていることが分かりますね。

なお、上画像ではテキストリンクを「 」で囲っていますが、下画像のように直接挿入することも可能です。

文章内にテキストリンクを設置するメリット

記事文章内に直接リンクを設置するメリットは、「余計なテキストが増えない」ということです。
元々あるテキストにリンクを貼るので、リンク設置による文章構成の変更などが必要なく、文脈が乱れにくいことが特徴です。
文章の一連の流れを大切にしたいときなどに有効な手法だといえます。

文章内にテキストリンクを設置するデメリット

一方、デメリットとして「リンク先を閲覧すべきタイミングが分かりにくい」という点が挙げられます。
文章の途中に挿入されたリンクを目にする度にクリックしていると、肝心の記事本文の閲覧が中断されなかなか理解が進まない、という事態が起こり得ます。
そのため、リンク先はリンク先でじっくりと読み込む必要がある場合などには向いていません。

また、リンクを設置するテキストは文章内から選ぶため、完全に自由には設定できません。
たとえば「SEO」というテキストにリンクを貼った場合、SEO関連の記事リストページへ飛ぶのか、SEOという言葉について解説したページに飛ぶのか、読者からは分かりくいことがあります。

2-2.文章とは別に設置するタイプ

次に、「文章とは別に設置するタイプ」のテキストリンクをみていきましょう。

このように、本文とは分けてテキストリンクを設置するタイプです。
参考記事や根拠データの提示、出典の明示などに使用されます。

文章とは別にテキストリンクを設置するメリット

このタイプのメリットは、「リンク先を明確に示せる」ということです。

【例】
大切なものは「愛」である。ナチュラルリンク獲得の基本的な考え方 | なんでものびるWEB

このようなリンクを見れば、【なんでものびるWEB】というサイトの【大切なものは「愛」である。ナチュラルリンク獲得の基本的な考え方】という記事にリンクを貼っている、と明確に分かります。
ユーザーは、この情報からクリックするかどうか判断できます。

文章とは別にテキストリンクを設置するデメリット

一方、デメリットとして「リンクを設置のために段落を分けるなど、構成変更が必要」という点が挙げられます。あまり多用すると、記事本文の構造が分かりにくくなることがあります。

このタイプを記事内に設置する場合は、適切な数に留めるようにしましょう。
参考としてリンクを掲載したいページが多数がる場合は、記事末尾にまとめて設置するなどの配慮が必要です。

3.テキストリンクを貼る際の気遣いとテクニック

テキストリンクを設置するとき、ちょっとしたことに気を遣うと読者にとって親切なリンクになります。

読者が読みやすい、理解しやすいリンクはサイトの価値を高めてくれます。
いくつか紹介するので、自サイトのユーザビリティを向上させるヒントにしてくださいね。

3-1.外部へのリンクであることを示す

サイト内部へのリンクだと思ってクリックしたら別サイトに移動してしまった、という経験はないでしょうか。
元サイトに戻りたければ戻るボタンで戻ればいいのですが、そういったちょっとした手間が意外に面倒くさく感じるものです。

この例のように外部へのリンクであることを示すマークが付いていると、読者にとって理解しやすいリンクになります。

3-2.外部へのリンクは別タブに飛ばす

外部へのリンクは別タブに飛ばすように設定すると、多くの場合親切です。元の記事とリンク先のページとを見比べながら理解することができるからです。
また、Googleアナリティクスで計測したところ、外部リンクを別タブに飛ばした方がリンク元の記事に戻ってきて続きを読む確率が高くなりました。同じタブに外部リンクを重ねてしまうと、そのまま離脱してしまうケースが多いようです。

リンクを別タブに飛ばすよう設定するには、aタグにtarget=”_blank”属性をつけるだけでOKです。

これは<a href=”○○○” target=”_blank”>リンクを別タブに飛ばす</a>サンプルです。

このように記述すれば、「リンクを別タブに飛ばす」をクリックすると「○○○」というURLのページが新規タブで開かれます。

3-3.色を変え、下線を付ける

せっかく有効なリンクを設置しても、リンクだと気付いてもらえなければクリックされることもありません。
とくに文章内に設置するタイプのテキストリンクは、リンクであることを明確に示さなければ気付かれない可能性が高くなります。

リンクは、一般的にはテキストの色が通常とは異なっており、さらに下線が引かれていることが多いですね。
ウェブサイトを閲覧するユーザーは、色が異なる下線付きのテキストはリンクであると認識しますので、この感覚に沿うようにCSSなどできちんと設定しましょう。

同様に、リンクでない部分にリンクだと誤認しやすい装飾をすることも避けましょう。

【適切でない例】
・リンクなのにリンクだと分からない(2つめの「リンク」はクリックできます)
リンクでない部分の装飾が紛らわしい

【適切な例】
・リンクはリンクだと分かるように、色を変えて下線を引く

3-4.アンカーテキストでリンク先の内容を端的に表現する

アンカーテキストとは、リンクが設置されている文字列のことです。

これが<a href=”○○○”>アンカーテキストです。</a>

上の例でいえば、「アンカーテキストです。」の部分のことですね。

テキストリンクの場合、ユーザーはアンカーテキストを見てリンク先の内容を推察します。そのため、アンカーテキストはリンク先ページに何が書かれているかを端的に表現したものにすることが基本です。

文章とは別に設置するタイプのテキストリンクであれば、たいていはページタイトルやウェブサイト名を設定するでしょう。
しかし文章内に設置するタイプの場合、文脈の中にリンクを入れ込むことになります。ですから、無理にリンクを挿入すると読者からみて不自然なアンカーテキストになってしまいかねません。

不自然なアンカーテキストが設定されたテキストリンクは、読者の利便性を低下させるだけでなく、SEOの観点からみてもサイトの価値を低下させかねません。
テキストリンクを設置するときは、必ず「記事を読んでいる読者にとって有益で、不自然でないリンクかどうか」を考えるようにしましょう。

アンカーテキストの詳細:アンカーテキストは最初にSEOで覚えるべき最重要技術

4.まとめ

記事内に設置するテキストリンクは、有効に使うと記事の価値を高めることができます。
また、設置したテキストリンクから自サイトの他コンテンツへとユーザーを誘導できれば、サイト内の回遊性を上げることにもつながります。

ただし、読者目線を忘れてむりやり挿入したテキストリンクでは、逆に記事の価値を下げることになりかねません。利便性が損なわれ、読者の心象も悪くなるためです。

テキストリンクを設置するときは、今回紹介したメリットとデメリットに注意して、読者にとって有益であるか?を常に意識するようにしましょう。
細かい気遣いを忘れずに、効果的なテキストリンク設置にぜひ挑戦してみてくださいね。

pagetop