リンクタグとは?画像や別タブで開く用途別の適切な作り方

作成日(公開日):
最終更新日:
リンクタグとは?画像や別タブで開く用途別の適切な作り方

外部リンクや内部リンクはSEOに効果がある重要な要素とされていますが、リンクタグの設定方法を間違えるとスパム扱いされてしまう可能性があるため注意が必要です。
今回は、リンクタグって何?設定方法は?画像にリンクを貼るには?などなど、リンクタグの作り方全般への回答として、リンクタグの意味や適切な設定方法について詳しく解説します。

1.

リンクタグとは?

リンクタグとは、WEBサイト上のコンテンツの一部をクリックした時に、現在閲覧中のページから、他のページに移動できるようにする技術のことです。

2.

リンクタグを設定したときの見え方

一般的なリンクタグは、HTMLタグの<a href=””>と</a>のタグを用いて書きます。

 

HTMLを直接編集してリンクタグを設定した場合、実際にユーザーが見る画面では以下のように表示されます。

 

SEO対策の最新情報を東京から発信 SEO World

 

青文字で下線が入っている「SEO World」のテキスト部分をクリックすると、「https://seoworld.jp/」のページへ移動できるようになり、ユーザーや検索エンジンの遷移を促せます。

 

リンクタグには、テキストだけでなく、画像も設置できます。ただし、画像にリンクを設置するよりも、テキストにリンクを設置した方がリンクによるSEO効果は高いとされています。

 

3.

絶対リンクと相対リンクの違い

リンクタグに記述するURLの書き方は、「絶対リンク」と「相対リンク」の2つに分類されます。
リンクを設定すると、現在見ているページから他のページに移動できるようになりますが、その際に必要になるのがリンク先ページの位置情報です。 

例えば、ページAからページBに移動する場合、ページAのHTMLファイルからページBのHTMLファイルへリンクを設置しますが、そのファイルの位置情報を示すものが絶対リンクと相対リンクです。

3-1.

絶対リンクと相対リンクの書き方

▶絶対リンク

絶対リンクは、今見ているページから見て絶対的な位置を示します。リンク先のURLは「http://」も含めてそのまま記述するのが絶対リンクの書き方です。

 

自社サイトから外部のサイトへリンクを貼る場合はhttp://を含めた絶対リンクで記述します。

 

例えば、ページAからページBにリンクを設置する場合、絶対リンクは以下のようにリンク先のURLを全て表記します。

 

<a href=”https://seoworld.jp/〇〇〇〇〇”>このページへジャンプ</a>

 

WordPressのデフォルトの設定では、WEBサイト内のリンクはhttps://から始まる絶対リンクで書かれます。オープンソースのソフトウェアを利用してWEBサイトを作成する場合、URLの書き方はそれぞれ異なるため、ドメインを変更する予定がある場合は絶対リンクで記述した方が良いでしょう。

 

▶相対リンク

相対リンクは、今見ているページから見て、相対的な位置を示します。HTMLファイルから別のファイルへリンクするときは、ディレクトリの位置関係に合わせてファイル場所を指定します。

 

例えば、ページAからページBにリンクを設置する場合、相対リンクは以下のように共通する部分は省略できます。

 

<a href=”/〇〇〇〇〇”>このページへジャンプ</a>

3-2.

それぞれのメリット・デメリット

絶対リンクと相対リンクは、SEOにおける効果に差はありません。

▶絶対リンクのメリット

  • リンク切れが起こりにくい
  • 階層がわかりやすい

▶絶対リンクのデメリット

  • 記述が長い
  • 「http://」から正確に入力する必要がある
  • ドメイン変更やSSL化などの対応が不便な場合がある

▶相対リンクのメリット

  • URLを省略できる
  • ドメイン変更やSSL化対応したときの作業が簡略化される
  • 「http://」でソース内の検索したときに外部サイトへの発リンクを探しやすい

▶相対リンクのデメリット

  • 外部サイトへの発リンクで使う場合、外部サイトがSSL化した場合などにリンク切れが起こりやすい。
4.

リンクタグの用途別の作り方

ユーザーの情報収集の手助けとなるリンクタグを設定することはSEOに有効に働きます。ただし、リンクタグの設定方法を間違えると、検索エンジンにスパム扱いされてしまうなど、マイナスの影響を受ける可能性があるため注意が必要です。

ここではHTMLを編集して適切なリンクタグを設定する方法を図説付きで紹介します。

4-1.

HTMLリンクタグの通常の書き方

HTMLを直接編集して、通常の書き方でリンクタグを作成した場合、リンク先のページはブラウザの同じタブで開きます。

 

リンクタグは、HTMLタグの<a href=””>と</a>のタグを用いて書きます。

<a href=””>の「””」に囲まれた部分にリンク先のURLを記述します。

<a href=””></a>に囲まれた部分に、リンク先ページの内容をユーザーや検索エンジンに伝えるためのアンカーテキスト(リンクテキスト)を記述します。

 

例えば、「SEO World」というテキストにリンクタグを設定する場合、HTMLのソースは以下のようになります。

 

<a href=”https://seoworld.jp/”>SEO World</a>

4-2.

リンクタグに画像を設置する場合の書き方

リンクタグに画像を設置する場合は、アンカーテキスト部分に画像を表示するimgタグ、を記述します。

アンカーテキスト部分の<img src=””の「””」に囲まれた部分に画像のファイル名を書きます。

alt=”” />の「””」に囲まれた部分にリンク先ページの内容をユーザーや検索エンジンに伝えるためのテキストを記述します。alt属性はブラウザで画像を表示できない場合に表示される代替テキストを指定するためにも必要なタグです。

 

例えば、「logo.jpg」というファイル名の画像にリンクを貼る場合、HTMLのソースは以下のようになります。

 

<a href=”https://seoworld.jp/”><img src=”https://seoworld.jp /sample/logo.jpg” alt=”SEO World” /></a>

 

尚、alt属性には、画像を挿入する箇所の前後のコンテンツと関連度の高いテキストを入れましょう。

 

SEOに効果のあるalt属性の書き方についてはこちら
alt属性のSEO効果と正しい使い方

 

 

4-3.

別タブ(外窓)で開く場合の書き方

HTMLのリンクをブラウザの別タブ(外窓)で開く場合の書き方を紹介します。

▶リンクを別タブ(外窓)で開く設定

現在見ているページのタブはそのままで、新規の別タブでリンク先のページを開く場合は、通常の書き方をしたaタグ内に「 target=”_blank”」タグを記入して「リンクを新しいタブ」で開く設定をします。

 

<a href=”https://seoworld.jp/” target=”_blank”>SEOWorld</a>

 

別タブで開く例:

SEO World

↑のリンクをクリックするとSEOWorldのトップページがブラウザの別タブで開きます。

4-4.

WordPressで適切なリンクタグを設定する方法

WordPress(主にブログ作成を目的に公開されたオープンソースのソフトウェア)を編集して、適切なリンクタグを設定する方法を紹介します。

WordPressは、ビジュアルエディタとテキストエディタのどちらかの編集画面でリンクタグを設定します。

▶ビジュアルエディタでリンクタグを設定する場合

  1. WordPressにログイン
  2. 管理画面の左メニューにある[投稿]>[新規追加]をクリック
  3. [ビジュアル]タグになっていることを確認
  4. リンクを設定したいテキストをドラッグして選択
  5. [🔗(リンクの挿入/編集)]をクリック
  6. リンク先ページのURLを貼り付ける※
  7. 【リンク追加】をクリックしてリンクタグの設定完了

 

※歯車(設定マーク)をクリックすると、ブラウザの同じタブでページを開くか、ブラウザの別タブ(外窓)で開くか選択できます。リンク先ページを別タブで開きたい場合は、[リンクを新ウィンドウまたはタブで開く]にチェックを入れます。

▶テキストエディタでリンクタグを設定する場合

  1. WordPressにログイン
  2. 管理画面の左メニューにある[投稿]>[新規追加]をクリック
  3. [テキスト]タグになっていることを確認
  4. リンクを設定したいテキストをドラッグして選択
  5. [link]をクリック
  6. リンク先ページのURLを貼り付ける※
  7. 【リンク追加】をクリックしてリンクタグの設定完了

 

※歯車(設定マーク)をクリックすると、ブラウザの同じタブでページを開くか、ブラウザの別タブ(外窓)で開くか選択できます。リンク先ページを別タブで開きたい場合は、[リンクを新ウィンドウまたはタブで開く]にチェックを入れます。

4-5.

mailto:を使用したメール送信は推奨されていない

mailto:を使用したHTMLのリンクタグをクリックすると、メールソフトを起動させてメールを送信を促す設定ができますが、現在は、以下の理由から推奨されていません。

 

  • スパムメールや迷惑メールの標的になる恐れがある
  • メールソフトがインストールされていないパソコンでは起動できない
  • 文字化けが起こりやすい

 

上記の理由から、WEBサイトやページのユーザビリティを損なう恐れがあります。そのため、現在はHTML でSSLの暗号通信を用いたメールフォーム(WEBフォーム)の導入が主流となっています。

5.

SEOとの関連性

Googleの検索エンジンは、リンクタグに基づいてWEBサイト内やページをクローリングするため、リンクタグの設定方法やアンカーテキストの最適化などはSEOに大いに関連があります。

5-1.

SEOの効果が期待できるリンクタグの特徴

外部リンクや内部リンクは、SEOに効果のある重要な要素なので、適切なリンクタグを設定することが重要です。

例えば、SEO対策の一つである内部SEOにおいて、WEBサイト内のナビゲーションやヘッダー、パンくずリストなどの内部リンクは、リンクタグのアンカーテキスト部分に重要なキーワードを入れます。リンクタグにキーワードを記述することで、ユーザーがリンク先ページの内容を予測できるようになり、ユーザビリティの改善につながります。

5-2.

SEOに効果的なリンクタグを設定するためのポイント

リンクタグを設定するときのポイントは以下の通りです。

 

  • 画像よりもテキストリンクを多用する
  • 画像の場合はalt属性に関連するテキストを入れる
  • ユーザーの助けになるコンテンツへのリンクを設定する
  • コンテンツの文脈上、離脱してほしくない箇所にはリンクを設置しない

 

尚、アンカーテキストの最適化については、

アンカーテキストとは?SEOに効果的なアンカーテキストの意味や書き方」をご覧ください。

5-3.

スパムになる可能性のあるリンクタグの設定

以下のリンクタグの設定はスパムとしてSEOに逆効果なので注意しましょう。

 

  •  通常テキストと同じ文字色や装飾(リンクとわかりづらいリンク)
  •  背景色と文字色が同じリンクテキスト(隠しリンク)
  •  1つのページから不必要に様々な外部サイトにリンクを貼る
  •  ファーストビューのほとんどを占める他のサイトへの画像リンク(特に広告バナー)

 

これらのリンクタグは、ユーザーにとって好ましくないリンクタグとされます。

6.

まとめ

  • リンクタグは閲覧中ページから他ページに移動するためのタグ
  • リンクタグは<a href=””>と</a>のHTMLタグで設定するのが一般的
  • リンクタグは画像よりもテキストに設置した方がSEO効果は高い
  • 相対リンクは編集者に優しい
  • 外部リンクはURLを省略しないhttp://を含めた絶対リンクで書く
  • 画像にリンクを貼る場合はalt属性にテキストを入れる
  • リンクを別タブ(外窓)で開く場合は「target=”_blank”」を記述する
  • mailto:よりもHTMLでメールフォームを導入するのが主流
  • リンクタグの設定方法やアンカーテキストなどはSEOの関連がある

 


外部リンクや内部リンクはSEOに効果があるとされる一方、リンクタグの設定方法を間違えるとスパム扱いされてしまう可能性があります。今回紹介したような内容を参考にリンクタグを適切に設定できれば、検索エンジンにスパム扱いされる心配もなく、SEO効果を高める重要な要素とされる良質な外部リンクや内部リンクを増やすことができます。

以上、リンクタグの意味や適切な設定方法についての解説でした。


この記事をシェアする