WEBマーケティングをもっと身近に。
SEO対策 2023/11/17

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

リンクタグ

外部リンクや内部リンクはSEOに効果がある重要な要素とされる一方、リンクタグの設定方法を間違えると検索エンジンにスパム扱いされてしまう可能性があることをご存じでしょうか?ここでは、SEO効果を高める良質なリンクを増やすために知っておきたいリンクタグの意味や適切な作り方について解説します。

1

リンクタグとは?

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

リンクタグ
2

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

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

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

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


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

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

3

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

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

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

絶対リンク-相対リンク 図
3-1

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

絶対リンク

絶対リンクは、今見ているページから見て絶対的な位置を示します。リンク先の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>

3-2

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

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

絶対リンクのメリット

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

絶対リンクのデメリット

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

相対リンクのメリット

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

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

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

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

4-1

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

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

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

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

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

4-2

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

リンクタグに画像を設置する場合は、アンカーテキスト部分に画像を表示する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属性の書き方についてはこちら

4-3

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

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

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

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

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


別タブで開く例

SEM Plus

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

4-4

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

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

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

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

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

WordPress_ビジュアルエディタ

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

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

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

WordPress_テキストエディタ
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属性に関連するテキストを入れる
  • ユーザーの助けになるコンテンツへのリンクを設定する
  • コンテンツの文脈上、離脱してほしくない箇所にはリンクを設置しない

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

5-3

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

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

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

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

6

まとめ

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


ホワイトリンク 記事内用バナー


この記事を書いたライター

SEO施策部

SEMを軸にSEOの施策を行うオルグロー内の一部署。 サイト構築段階からのSEO要件のチェックやコンテンツ作成やサイト設計までを一貫して行う。社内でもひときわ豊富な知見を有する。またSEO歴15年超のノウハウをSEOサービスに反映し、3,000社を超える個人事業主から中堅企業までの幅広い顧客層に向けてビジネス規模にあった施策を提供し続けている。

RECOMMENDED ARTICLES

ぜひ、読んで欲しい記事

  • サイトマップとは?作り方とデザイン例・SEO効果についてのサムネイル画像です
    SEO対策
    2024/03/18

    サイトマップとは?種類と作るメリット・注意点を分かりやすく解説

    2024/03/18

  • CPMとは│計算方法・CPCとの違いを解説のサムネイル画像です
    SEO対策
    2024/03/18

    CPMとは?計算式とCPM課金方式のメリット・CPCとの違いを解説

    2024/03/18

  • CVR(コンバージョンレート)とは│計算式と改善方法を解説のサムネイル画像です
    SEO対策
    2024/03/15

    コンバージョン率(CVR)とは│計算式と平均値・改善方法を解説

    2024/03/15

  • 直帰率とは|離脱率との違いと計算方法を分かりやすく解説のサムネイル画像です
    SEO対策
    2024/03/14

    直帰率とは|離脱率との違いと計算方法を分かりやすく解説

    2024/03/14

  • 検索順位の仕組みとは?Googleの評価プロセスを解説のサムネイル画像です
    SEO対策
    2024/03/13

    検索順位の仕組みとは?Googleの評価プロセスを解説

    2024/03/13

  • オーガニック検索の流入をSEOで上位表示させて増やす方法のサムネイル画像です
    SEO対策
    2024/03/11

    オーガニック検索の流入をSEOで上位表示させて増やす方法

    2024/03/11

backtotop