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

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

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

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

WEBマーケティングをもっと身近に：SEM Plus

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

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

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

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

絶対リンクは、今見ているページから見て絶対的な位置を示します。リンク先のURLは「http://」も含めてそのまま記述するのが絶対リンクの書き方です。自社サイトから外部のサイトへリンクを貼る場合はhttp://を含めた絶対リンクで記述します。

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

<a href=”https://white-link.com/sem-plus/wp/〇〇〇〇〇”>このページへジャンプ</a>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<a href="https://white-link.com/sem-plus/wp/"><img src="https://white-link.com/sem-plus/wp /sample/logo.jpg" alt="SEO World" /></a>

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

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

【関連記事】

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

【リンクを別タブ（外窓）で開く設定】

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

<a href="https://white-link.com/sem-plus/wp/"target="_blank">SEOWorld</a>

■ 別タブで開く例

SEM Plus

上記のリンクをクリックすると、SEM Plusのトップページがブラウザの別タブで開きます。

WordPress（主にブログ作成を目的に公開されたオープンソースのソフトウェア）を編集して、適切なリンクタグを設定する方法を紹介します。WordPressは、ビジュアルエディタとテキストエディタのどちらかの編集画面でリンクタグを設定します。

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

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

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

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

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

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

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

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

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

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

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

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

尚、アンカーテキストの最適化については別記事でまとめているのでそちらもご覧ください。

【関連記事】

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

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

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

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