バズ部

  • icon株式会社ルーシー
  • 東京都港区新橋5-10-5 PMO新橋II 8階
  • 記事を探す
    • まず見て頂きたいページ
      • バズ部式マーケティングの進め方
      • コンテンツマーケティング101
      • SEO初心者向けマニュアル
      • バズ部メンバーの知見集
      • WordPress初心者向けガイド
    • 記事
      • 全ての記事を見る
      • SEO
        • SEOの基礎
        • SEO内部対策
        • コンテンツSEO
        • サーチコンソール
        • 高度なSEO
      • コンテンツマーケティング
        • 1.コンテンツマーケティングとは?
        • 2.コンテンツマーケティングをやるべきなのか
        • 3.あなたのブランドストーリーは何か?
        • 4.コンテンツマーケティング設計が全てだ
        • 5.必ず必要な社内体制と体制づくり
        • 6.まずは、小さな一歩を大切にしよう
        • 7.コンテンツ制作のコツを知ろう
        • 8.多くの人が陥る失敗を知っておこう
        • 9.顧客が「まだ気づいていないこと」に気づけるか
        • 10.素早く着実にコンバージョンにつなげよう
        • 11.正しく効果測定して成果を引き上げよう
        • 12.精度を上げてもっともっと成果を飛躍させよう
      • オウンドメディア
      • WordPress
        • wordpressウィジェット
        • wordpressテーマ
        • wordpressプラグイン
        • wordpressの基本操作
        • wordpressの導入と準備
        • wordpressの設定方法
        • ブログマーケティング
      • ソーシャルメディア
        • Facebook
      • ランディングページ
        • キャッチコピー
        • コピーライティング
      • メルマガ
      • EC
      • インタビュー
      • アーカイブ
    • 監修者/ライター一覧
      • 松澤 大輔
      • 木村 竜児
      • 野口 陽司
  • サービス一覧
    • サービスページ
      • コンテンツマーケティング立ち上げ&運用支援
      • SEO記事制作代行
      • キーワード設計代行
      • WEBサイト制作
      • 研修サービス
      • bazubu-shiki
      • ライティングツール「Pencii」
    • 資料請求
      • コンテンツマーケティング立ち上げ&運用支援サービス資料
      • SEO記事制作代行サービス資料
      • キーワード設計代行サービス資料
      • バズ部紹介資料
  • 支援実績
  • お役立ち資料
    • お役立ち資料一覧
      • 広告費を1/10にして売上を倍増させる全手法
      • バズ部が運営する月間20万PV超サイト11の生データ集
      • 良質なコンテンツを作成するための20のコツ
      • 最高のオウンドメディア支援会社を選ぶために行うべき7つの質問
      • バズ部紹介資料
      • バズ部公式メールマガジン
  • セミナー
  • 運営者情報

ご相談・お問い合わせ

© Copyright 2022 バズ部. All rights reserved.

ユーザーに届ける価値を徹底的に追求する
マーケティングを提供します

© Copyright 2022 バズ部. All rights reserved.

icon icon

icon
  • icon
  • icon
  • icon

05/22木8:00〜9:00

【5/22開催】バズ部の記事制作代行 商品説明会

  • オンライン
    1. バズ部 /
    2. SEO /
    3. aタグとは|役立つ6つの使い方と「SEO」に効果的な記述を解説!
  • 最終更新日 2023.09.22

aタグとは|役立つ6つの使い方と「SEO」に効果的な記述を解説!

aタグ(アンカータグ)とは、「HTML」で記述できるタグのひとつで、他のページへのリンクを貼る時に利用される。

検索エンジンはリンクをたどって別ページを発見するため、aタグの設定はSEOの観点からも重要な要素となる。

この記事では、aタグの意味や、知っておくべき使い方をわかりやすく解説していく。

この記事でわかること

・aタグとは
・【一覧】よく使われる「aタグ」7種類の属性​​
・aタグの6つの使い方「基本編」「応用編」
・aタグ設定ではSEOに効果的な「アンカーテキスト」の記述が重要!


インターネットの最大の特徴ともいえる「リンク」設定。

普段あたり前のように使っているが、リンクはその設定方法によってさまざまな意図に対応し、ユーザービリティに大きな影響を与える。

ユーザーの行動心理を考えた、ストレスなく見れるWEBサイト作成のために、aタグについての理解を深めていこう。

また、私たちバズ部は12年で400社以上のメディア支援を行い、

  • 立ち上げから10ヶ月で14.6億円の売上を産んだ不動産メディア
  • 8ヶ月で月間140万PVを実現したアプリメディア

など大きな成果を挙げ続けている。

各サイトの成功要因をインタビューしているので、
あなたのサイトに役立てて欲しい
⇒25サイトの成功事例インタビューはこちら

ebook
ebook

目次

  • 1.aタグとは|検索エンジンはaタグ以外のリンクはたどれない
    • 1-1.aタグとは
    • 1-2.リンクの設定で有効なのは「aタグ」だけ
  • 2.【一覧】よく使われる「aタグ」7種類の属性
  • 3.基本編|押さえておくべき「aタブ」の3つの使い方
    • 3-1.「href​​」|リンク先を指定する
    • 3-2.target属性の「blank」|別タブでリンク先のページを開く
    • 3-3.画像にリンクを貼る
  • 4.応用編|「aタグ」の知っていると便利な3つの使い方
    • 4-1.同一ページ内の他の場所にリンクする
    • 4-2.電話がかかるようにする
    • 4-3.ダミーリンクを貼る
  • 5.aタグ設定ではSEOに効果的な「アンカーテキスト」の記述が重要!
  • 6.まとめ

1.aタグとは|検索エンジンはaタグ以外のリンクはたどれない

aタグとはどんなタグなのか?、くわしく解説していこう。

1-1.aタグとは

aタグ(アンカータグ)とはHTML(※)で記述できるタグの1つで、他のページへのリンクを貼る時に利用される。

(※)HTML:Webページを作成するために用いられる言語(技術)。HTMLの記述によって、検索エンジンがWEBページの構造を把握する

aタグの設定は、下記のように行う。

<a href=”(リンク先のURL)”>テキストサンプル</a>


このように記述することで、「<a href=”(リンク先のURL)”>」と「</a>」に囲まれた「テキストサンプル」の部分がリンクになる。

サイト記事を読んでいる際に、「青い色+下線が引かれた状態」のリンク表示を目にすることがあると思うが、それがこの記述の「テキストサンプル」の部分にあたる。

チェック!

HTMLのaタグでリンクを設定した文字の部分(上記の「テキストサンプル」の部分)を「アンカーテキスト」という。

アンカーテキストはサイトの内部リンクを整理してユーザーや検索エンジンにとって、より使いやすい形を作り上げるためになくてはならないテキストだ。

この記事の「5.aタグ設定ではSEOに効果的な「アンカーテキスト」の記述が重要!​​」でも触れていくが、関連記事『アンカーテキスト最適化でSEO効果を高める3つのポイント』も合わせて確認しておこう。

1-2.リンクの設定で有効なのは「aタグ」だけ

リンクの設定で有効なのは、基本的に「aタグ」を使う方法だけだといえる。

なぜなら、Googleの公式ページでも記載されているように、検索エンジンがたどることができるのは、aタグが使用されたリンクのみだからだ。

「​​Google のクローラがたどれるリンクは、解決可能な URL が指定された適切な <a> タグが使用されているリンクのみです。」

引用元:Google検索セントラル|リンクをクロールできるようにする

サイト内のリンクは、クロールへの影響を考慮し、適切なaタグを使って設定しよう。

成功したオウンドメディアの要因を学ぶ

  • Article Image 1Article Image 1

    累計106億円の売上を叩き出した不動産会社のコンテンツマーケティング事例

    1

  • Article Image 2Article Image 2

    わずか8ヶ月で月間140万PVを実現したアプリ企業メディア成功事例

    2

  • Article Image 3Article Image 3

    問い合わせが月4,400件以上!自社メディアで驚異的なCV数を生み出した弁護士事務所

    3


2.【一覧】よく使われる「aタグ」7種類の属性

aタグでは、情報を付加するためのさまざまな属性を指定することができる。

ここでは、使用する機会の多い7種類の属性を一覧で紹介しておこう。

【aタグの属性】

【概要】

href

リンク先のURLの指定を行う。

id

タグに固有の識別名を付ける​​。
※タグの中にid=”識別名”と記述

charset

リンク先の文字コードを指定する。
※UTF-8、Shift_JIS、EUC-JP、など​​

hreflang

リンク先の言語コードを指定する。
※ja(日本語)、en(英語)、fr(フランス語)など

rel

現在の文書からみた、リンク先となるリソースの位置づけを表す。
※nofollow(重要でないリンク​​)、external(外部サイトへのリンク)、alternate​​(代替文書​​)、help​​(ヘルプへのリンク)

type

リンク先のMIMEタイプ(マイムタイプ=ファイルの種類を表す情報)を指定する

target

リンク先の表示方法を指定する
例)
▶_self(現在のフレーム(ウィンドウ)に表示​​。現在表示している内容が更新されてしまうので注意​​が必要)
▶_blank(新しいタブ、または新規のウィンドウで開く)
▶_parent(親の閲覧コンテキストがある場合はそこで開く)
▶_top(自身がフレーム分割の1ページであった場合、分割を解除してウィンドウ全体に表示する)


3.基本編|押さえておくべき「aタブ」の3つの使い方

数多くの種類があるaタブだが、ここでは最低限押さえておくべき基本的なaタブの使い方を解説する。

・「href​​」|リンク先を指定する
・target属性の​​「blank」|別タブでリンク先のページを開く
・画像にリンクを貼る

しっかり把握していこう。

3-1.「href​​」|リンク先を指定する

href属性(※)は、リンク先のURLを指定する際に使用する。

(※)hrefは「ハイパーテキストリファレンス」の略で「エイチレフ」と読む

書き方は1章でも示したが、下記の通りだ。

【書き方】

<a href=”(リンク先のURL)“>アンカーテキスト</a>

 

3-2.target属性の「blank」|別タブでリンク先のページを開く

target属性はリンク先ページを表示する方法を指定する。

target属性のblank値を設定すると、そのリンクをクリックした時に別のタブが開き、そこでページが表示される。

【書き方】

<a href=”(リンク先のURL)“target=”​​_blank”>アンカーテキスト</a>

 

チェック!
【「target=”_blank”」を使う際の注意点​​】

aタブの基本として、覚えておくべき「target=”_blank”」​​だが、セキュリティ上に脆弱性がある。

なので、「target=”_blank”」を使う際には、「rel=”noopener”」または「rel=”noreferrer”」をセットでつけることをおすすめしたい。

2020年にはGoogleの技術者が、「他のサイトへのリンクのtarget = “_ blank”は、サイトをパフォーマンスとセキュリティの問題にさらす可能性がある。修正するには、これらのリンクにrel = “noopener”またはrel = “noreferrer”を追加してください」という内容を下記のようにツイートしている。​​

Tip: target=”_blank” on links to other sites can expose your site to performance and security issues. To fix, add rel=”noopener” or rel=”noreferrer” to these links: https://t.co/HdA7ooNzx5 ✅ pic.twitter.com/T7X5r7MKWz

— Addy Osmani (@addyosmani) March 1, 2020


わかりやすく説明すると、target=”_blank”を設定して別タブでリンク先のページを開く場合、元のページとリンク先のページの両方がブラウザ内に存在しているということになる。

すると、リンク先のページに悪意のあるJavaScript(※)が書かれていたらリンク元である貴社ホームページが改ざんされてしまう可能性がある。

(※)JavaScript(ジャバスクリプト):Webサイトやシステムの開発に使われているプログラミング言語​​

これを防ぐ手段として、「target=”_blank” にrel=”noopener” 、または rel=”noreferrer” ​​を追加してください」、と注意喚起しているのだ。

要は、下記のように付け加えればいいだけなので、セキュリティ上の脆弱性を補うために忘れず使用していこう。

(例)
<a href=”(リンク先のURL)”target=”​​_blank”rel=”noopener”>>アンカーテキスト</a>​​
<a href=”(リンク先のURL)”target=”​​_blank”rel=”noreferrer”>>アンカーテキスト</a>​​


ちなみに、「target=”_blank”」の部分を「target=”_self”」とすると同じタブでリンク先が開かれる。ただ、何も記述しなければ同じタブで開かれるため、基本的には設定する必要はない。

3-3.画像にリンクを貼る

img要素(※)を包含する形でaタグをコーディングすることで、画像にリンクを貼ることができる。

(※)img要素:「image」の略で、文書内に画像を表示するためのタグ​​

【書き方】

<a href=”(リンク先のURL)“><img src=”(画像の保存場所)” alt=”(画像の説明)“/></a>


「alt」の部分は検索エンジンが画像の内容を把握するためのヒントにするため、その画像を説明するテキストを入力する。

たとえば、「画像にリンクを貼る方法ロゴ画像」というようなわかりやすい記述がいいだろう。


4.応用編|「aタグ」の知っていると便利な3つの使い方

基本をしっかりマスターした人向けの応用編として、知っていると便利なaタグの3つの使い方を紹介しよう。

・同一ページ内の他の場所にリンクする​​
・電話がかかるようにする
・ダミーリンクを貼る

​​aタグを上手く活用して、サイト構築を進めていこう。

4-1.同一ページ内の他の場所にリンクする

id属性を使い、リンク先の名前を指定することで、同一ページ内の任意の場所に飛ばすことができる。

記事などでよく目にする「目次」は、多くの場合これを利用して設定されている。

【書き方】

<a href=”#(リンク先のid名)“>アンカーテキスト</a>

4-2.電話がかかるようにする

aタグでは、電話番号を掲載し、その番号をクリックすると電話がかかるようにすることができる。

※ただし、スマートフォンからしかクリックして電話をかけることはできない

【書き方】

<a href=”tel:電話番号“>アンカーテキスト</a>
↓(例)
<a href=”tel:0120123456“>こちらにお電話ください</a>

4-3.ダミーリンクを貼る

ダミーリンクは、リンク先がまだ準備中で、ページが完成したらリンクを追加する予定である場合に用いられる。

ダミーリンクを貼ると、クリックはできるがクリックしても何も起きない。

書き方はいくつかあるが、ここでは一番シンプルな方法を紹介する。

【書き方】

<a>aタグとは|使い方をくわしく解説(公開予定)</a>


ダミーリンクは、リンク先のページがまだないが、準備中であることを知らせておきたいといった場合に有効だ。


5.aタグ設定ではSEOに効果的な「アンカーテキスト」の記述が重要!

aタグを設定する際には、具体的で理解しやすい「アンカーテキスト」の記述が何より重要だ。

<a href=”(リンク先のURL)”>アンカーテキスト</a>


アンカーテキストに含まれるテキスト情報は、下記に示したGoogle公式サイトの説明にもある通り、検索エンジンのページ理解に用いられるなど、SEOに関わる要素になる。

「リンクテキストとは、リンク内に表示されるテキストです。このテキストはユーザーや Google に対して、リンク先のページについての情報を伝えます。ページ上のリンクには内部的なリンク(サイト上の他のページを参照しているもの)もあれば、外部的なリンク(他のサイトのコンテンツにつながるもの)もあります。どちらの場合も、アンカーテキストが効果的であればあるほど、ユーザーはナビゲートしやすくなり、Google はリンク先のページを理解しやすくなります。​​」

引用元:検索エンジン最適化(SEO)スターター ガイド(Google検索セントラル)​​

アンカーテキストはそれだけ見ればどのようなページヘのリンクであるのかが理解できるような、具体的でわかりやすい記述が望ましい。

たとえば…

リンク先が「天然酵母パン」のページなら、「天然酵母パンの〇〇〇」「冷凍できる天然酵母パン〇〇〇」というような具体的な記述をいれると良い。

悪い例としては、「冷凍できる天然酵母パンならこちら」と記載して、その中の「こちら」をアンカーテキストにしてしまうことだ。

こうしたリンクの貼り方をする人は案外多く、悪いアンカーテキストの例として他に、

・ココ
・クリック
・詳細

などがある。

こうしたアンカーテキストでは、検索エンジンはリンク先が、「こちら」や「ココ」についてのページだと把握してしまい、何を表しているかが伝わらない。


アンカーテキストが最適化されていれば、検索エンジンが、そのサイトが何について扱っているサイトなのか、そのサイトの階層構造はどのようになっているのかを理解する手助けになる。

その上で、可能な範囲で対策キーワードを含めるなどの工夫をすることで、さらにSEO上の効果が期待できる。

関連記事

バズ部|アンカーテキスト最適化でSEO効果を高める3つのポイント​​


6.まとめ

aタグ(アンカータグ)とは、WEBサイトでリンクを貼るときに使う「HTML」タグのこと。

検索エンジンはリンクをたどって別ページを発見する。

よって、aタグの設定はSEOの観点からも重要な要素といえる。

aタグ設定の際、特に留意すべきなのが「アンカーテキスト」の記述だ。

アンカーテキストは、リンク先の内容が分かる​​具体的で簡潔なフレーズにすることで、検索エンジンに正確な評価を促せる。

記事を参考に、aタグの特性を十分に理解し、これからのサイト構築に活かしていこう。

カテゴリー SEO

記事をシェアする

  • B!

無料eBook:バズ部式マーケティング
広告費を1/10にして売上を倍増させる全手法

広告に頼り切ったマーケティングの打開策としてコンテンツマーケティングについて調べているけれど、よく分からないと悩んでいませんか?

本書は弊社やクライアント様がコンテンツマーケティングに取り組み

  • ・SEOのみで月間100万PV集めた方法
  • ・平均6.92%のコンバージョン率が出た新規顧客獲得法
  • ・CPLやCPAを大幅に改善した方法とそのからくり

など、コンテンツマーケティングの効果と、具体的な施策内容を全94ページに渡って詳細に解説しているものです。

ぜひ、貴社のWEBマーケティングにもご活用ください。

eBookをダウンロード

未読

参考にしていただきたい事例

liskulのtopページ

リスティング広告

1年でプッシュ型営業からプル型へ!毎月約200件の問い合わせを獲得するデジタルマーケティングブログ

  • SOLDOUT
  • ソウルドアウト株式会社様

学校 コンテンツマーケティング

学校・教育

1年半で億単位の貢献を果たすまでに成長した学校法人のコンテンツマーケティング事例

  • 神田外語学院
  • 神田外語学院 様
アバター
  • 著者 : バズ部編集部

ユーザーに届ける価値を徹底的に追及するのがバズ部式マーケティング。
バズ部では、ユーザー主義を貫きながら、なおかつ数字にこだわり結果を出してきた手法やノウハウを惜しみなく提供していきます。

  • 会社概要
  • 採用情報
  • セミナー
  • サービス紹介
  • 記事一覧

icon

株式会社ルーシー東京都港区新橋5-10-5 PMO新橋II 8階

ABOUT US

  • 運営者情報
  • セミナー
  • 採用情報
  • お問い合わせ
  • プライバシーポリシー
  • 特定商取引法に基づく表記
  • 紹介メディア

© Copyright 2025 バズ部. All rights reserved.