aタグとは href属性の書き方と別タブで開く設定 下線を消す方法

自社サイトのソースを開くと、a と書かれたタグがあちこちに並んでいた。

文字をクリックすると別のページへ飛ぶ。見た目は青い文字に下線で、それ以上のことは分からない。制作会社に任せたままで、リンクの中身を誰にも聞いたことがない。そういう経営者やWeb担当者に向けて、この記事を書いています。

結論から言います。aタグ（a要素）は、href 属性を書いたときだけリンクになるタグです。href に行き先を書き、タグで挟んだ文字や画像が、クリックする部分になります。

別のタブで開きたいときは target="_blank" を足します。下線を消したり色を変えたりするのは、CSSの役目です。

target="_blank" に rel="noopener" を毎回書き添える決まりは、いまのHTMLの仕様にはありません。_blank を指定した時点で、仕様が同じ扱いにするからです。この点は、ブラウザで実際に動かして測りました。

Googleがたどれるリンクは、href 属性を持つa要素です。検索順位やAI検索の引用に、aタグの書き方のどれが効くかは、公式の文書に記載が見つかりませんでした。

この記事の軸は、「リンクのタグ1つの書き方」です。行き先を決める href と、開き方を決める target を、仕様と計測で決められるようにします。

先に答え：a要素について、確かめられたこと

先に、この記事の結論を表にまとめます。右端の列は、答えの根拠にした資料です。

疑問	答え	根拠にした資料
aタグは何を表すか	href があればリンク。無ければ、リンクの代わりに置いた文字	HTMLの仕様（WHATWG）のa要素の章
行き先は何で書くか	href 属性に、有効なURLを書く	HTMLの仕様（WHATWG）のリンクの章
別タブで開くには	target="_blank" を足す	HTMLの仕様（WHATWG）の移動先の章
noopener は必須か	_blank なら、書かなくても同じ扱いになる	HTMLの仕様（WHATWG）とブラウザでの計測
下線を消してよいか	消せる。ただし色以外の手がかりも要る	WCAG（W3C）の達成基準1.4.1
Googleがたどれるか	href を持つa要素ならたどれる	Google 検索セントラルのリンクの案内
AIとの関係	公式に記載なし	Google・OpenAI・Anthropicの公式文書

この記事の読み方

表の「根拠にした資料」は、2026年11月9日に開いたものです。仕様書は更新され続けるため、日付を添えています。

ブラウザでの計測は、同じ日にChromium 145で行いました。ほかのブラウザでの結果は、この記事では確かめていません。

この記事の根拠にした資料

使った資料の一覧です。どれも公的な標準化団体か、検索エンジンやAIサービスの運営元が出している文書です。

資料	確かめたこと	開いた日
HTMLの仕様（WHATWG）の「a要素」「リンク」「移動先」「ページ内の位置」	定義、内容モデル、href・target・rel の扱い	2026年11月9日
IETFのRFC 6068とRFC 3966	mailto と tel の書き方	2026年11月9日
WCAG 2.2（W3C）の達成基準1.4.1と関連の技法	色だけでリンクを示してよいか。別タブの案内	2026年11月9日
WordPressの公式ソース（Gutenbergの開発版）	リンクを入れたときに出るHTMLの組み立て	2026年11月9日
Google 検索セントラル「リンクに関するベスト プラクティス」「AI 機能とウェブサイト」	たどれるリンクの条件。AI機能との関係	2026年11月9日
OpenAIとAnthropicのクローラーの公式文書	リンクの書き方についての記述の有無	2026年11月9日
弊社の公開記事50本の実測	実際に使われているリンクの属性	2026年11月9日

Q&Aサイトで見かけた「target=_blank の blank とは」という質問

先日、Q&Aサイトでこのような悩みを拝見しました。

質問者は、HTMLのaタグにある target=_blank の意味を知りたいと書いていました。

「blank」は日本語で空白という意味なのに、なぜ別のタブに飛ぶ指定になるのか。空白という言葉に、別タブへ飛ばす意味があるのか、という疑問です。

制作会社が作ったページのソースを見て、同じ疑問を持った方は多いと思います。

回答に書かれていたこと

回答は2件ありました。

1件目は、昔のブラウザにはタブの機能がなかったため、新しい空白のページを開いてリンク先を表示する指定だった、という説明です。いまはタブが当たり前になったので、新しい空白のタブに表示される、と続いていました。

2件目は、リンクをクリックしたあとにどう移動するかの指定だ、という説明です。いま見ているページのまま移動するか、新しいページ（新しいタブ）を開いて移動するかを選ぶもので、_blank は後者だと書かれていました。

どちらの回答も、質問への答えとして大筋は合っています。

回答のどこまでが確かめられるか

「昔のブラウザにタブがなかった」という経緯は、この記事では確かめていません。歴史の話は、仕様書のa要素の章には書かれていないためです。

仕様書で確かめられたのは、_blank の効果が表の中で「新しい移動先（new）」と書かれている点です。

その表に、「タブ」や「ウィンドウ」という言葉はありません。補足には、補助的なブラウジングコンテキストを使うことがあるが、ブラウザの設定や方針による、と書かれています（英語の原文を和訳）。

つまり、新しいタブで開くか、新しいウィンドウで開くかは、仕様書が決めていません。HTMLを書く側が選べるのは、「新しい移動先を用意する」というところまでです。

質問から読み取れる3つの疑問

この質問の底には、3つの疑問があります。

1つ目は、target に書く値の意味です。_blank 以外に何があるのかも、ここに含まれます。

2つ目は、別タブで開く指定を、いつ使うべきかです。使うと問題が起きるのか、という不安もあります。

3つ目は、WordPressの画面で設定したとき、HTMLがどう変わるのかです。制作会社に頼まず、自分でリンクを足せるようになりたい方が持つ疑問です。

先に短く答える

target に書く値は、_blank・_self・_parent・_top の4つの決まった言葉と、自分で付ける名前です。_blank は「新しい移動先で開く」、_self は「いまの場所で開く」という意味で、何も書かなければ _self と同じ動きになります。

別タブで開く指定は、読む人の迷子を生むことがあるため、使う場面を選びます。この点は、WCAG（W3C）の技法の文書に書かれていました。次の節以降で、1つずつ確かめていきます。

a要素とは何か：仕様に書かれた定義

HTMLの仕様（WHATWG）で、a要素を説明している章を開きました。2026年11月9日に確かめた内容です。

hrefがあるとリンクになる

仕様書は、href 属性があるa要素について、次のように書いています。

「a要素にhref属性があれば、その要素は、内容を表示文字とするハイパーリンク（ハイパーテキストのアンカー）を表す。」（英語の原文を和訳）

ここで言う内容とは、aタグで挟んだ文字や画像のことです。画面に出る青い文字がそれに当たります。

Chromiumで測ると、href を書いたa要素は、読み上げの仕組みの上で「リンク」として扱われました。キーボードのTabキーで止まり、標準の見た目は青い文字に下線、マウスを載せると指の形になります。

hrefが無いときは、リンクの代わりに置いた文字

href が無いa要素について、仕様書は次のように書いています。

「a要素にhref属性が無ければ、その要素は、リンクが置かれていたかもしれない場所の代わりを表す。内容の文字だけで成り立つ。」（英語の原文を和訳）

仕様書の例では、どのページにも同じ案内の列を置くサイトで、いま見ているページ自身の項目を href なしのa要素にしています。リンクにしないが、並びは揃える、という使い方です。

hrefの有無で変わること

同じa要素でも、href の有無で、画面と操作が変わります。Chromium 145で測った結果です。

比べる項目	href あり	href なし
読み上げでの扱い	リンク	ただの文字
Tabキーで止まるか	止まる	飛ばされる
標準の文字色	青（rgb 0・0・238）	黒
標準の下線	あり	なし
マウスを載せた形	指の形	通常の矢印

href なしのa要素に onclick を付けて、クリックで動くようにした場合も測りました。この場合もTabキーでは止まらず、読み上げでは文字として扱われました。

マウスで押せるが、キーボードでは押せない部品ができあがります。

hrefが無いときに書けない属性

仕様書は、href が無いa要素に、target・download・ping・rel・hreflang・type・referrerpolicy を書いてはいけない、と定めています。

試しに、href なしで target="_blank" だけを書いたa要素をクリックしました。新しいタブは開かず、何も起きませんでした。

制作会社が書いたソースで、target や rel が付いているのに href が空という箇所を見つけたら、リンクが壊れている可能性があります。

aの中に入れてよいもの

仕様書は、a要素の内容モデルを「透過的」と呼んでいます。a要素の親が許している中身を、そのままa要素の中にも置ける、という意味です。

ただし例外が3つあります。a要素の中に置けないのは、操作できる部品（ボタンなど）、別のa要素、tabindex 属性を持つ要素です。

仕様書には、段落・リスト・表、さらにはセクション全体をa要素で包んでもよい、という記述もあります。

Chromiumで、見出しの div と本文の p をa要素の中に置いて測りました。リンクの名前は「見出し 本文」と、中身の文字を合わせたものになりました。

aの中にaを入れると、どうなるか

a要素の中にa要素を入れた場合も測りました。外側のリンクの途中で内側のリンクが始まるように書いたものです。

ブラウザは、これを2つの別のリンクとして読み込みました。外側のリンクは、内側の手前で終わります。内側のリンクの後ろに書いた文字は、どちらのリンクにも入らず、ただの文字になりました。

「リンクの中のリンク」は作れません。意図せず片方が切れた形になるため、書かないほうが安全です。

入れてよいものと、入れてはいけないものの早見表

中に置くもの	置いてよいか	測った結果
文字、画像	よい	文字や画像の説明が、リンクの名前になる
段落・見出し・リスト	よい	中身を合わせた名前になる
ボタン	いけない	仕様書が禁じている
別のa要素	いけない	2つの別のリンクに分かれ、後ろの文字がリンク外になる
tabindex を付けた要素	いけない	仕様書が禁じている

href属性の書き方：行き先を決める

仕様書は、href の値を「有効なURL（前後に空白があってもよい）」と定めています。ここでは、書き方ごとの行き先を確かめます。

絶対URLと相対URL

行き先の書き方は、大きく2つあります。ドメインから全部書く書き方と、いま見ているページを起点にして書く書き方です。

後者を相対URLと呼びます。ブラウザは、相対URLを、いま開いているページの住所を元にして、完全な住所へ直します。

Chromiumで、/dir/sub/page.html というページに、いくつかの href を置いて、行き先を測りました。

href の書き方	行き先	読み方
x.html	/dir/sub/x.html	同じフォルダにあるファイル
./x.html	/dir/sub/x.html	上と同じ。./ は「いまのフォルダ」
../x.html	/dir/x.html	1つ上のフォルダ
/x.html	ドメイン直下の /x.html	ドメインの先頭から数える
//other.test/x.html	別ドメインの /x.html	ドメインから書く。通信方式は元のページに合わせる
?q=1	同じページに ?q=1 を足したもの	検索の条件だけを変える
空（href=""）	同じページ	ページを開き直すリンク

弊社の公開記事50本に出てくるリンク421件は、すべてドメインから全部書いた絶対URLでした（2026年11月9日・弊社実測）。

ドメインを変えるときは、記事ごとに書き換えが要ります。相対URLの利点は、その手間が減ることです。どちらが正しいという決まりはなく、サイトの引っ越しを見込むかで選びます。

ページ内リンクと、id属性

同じページの中の別の場所へ飛ぶときは、# に続けて、飛び先の id を書きます。

仕様書は、# に続く文字と同じ id を持つ要素を探し、最初に見つかったものへ移動する、と書いています。id が見つからないときは、name 属性を持つa要素を探します。

Chromiumで、ページの下に id="target" の見出しを置き、href="#target" のリンクを押しました。見出しの位置までスクロールし、URLの末尾が #target になりました。

href=”#” は、ページの先頭に戻る

href="#"、つまり # だけを書いたときは、仕様書によると、# の後ろが空の文字なので「ページの先頭」が飛び先になります。

ページを下までスクロールしてから押すと、先頭に戻り、URLの末尾に # が付きました。測った結果は仕様書の記述と同じです。

ボタンの代わりに href="#" を置いて、クリックで別の動きをさせる書き方も見かけます。この場合、動作の途中でページが先頭に戻るため、読む人が迷います。ボタンの代わりにする使い方は、後の節で扱います。

メールと電話：mailto と tel

メールを書く画面を開くリンクは href="mailto:…"、電話をかけるリンクは href="tel:…" と書きます。

HTMLの仕様の、a要素とリンクの章には、この書き方の定めがありません。別の標準が定めています。IETFが出しているRFC 6068が mailto の書き方を、RFC 3966が tel の書き方を決めています。

RFC 3966は、電話番号について「国際形式（先頭が + で、国番号が続く形）で書かなければならない。表せない番号を除く」という趣旨を定めています（英語の原文を和訳）。例として、tel:+1-201-555-0123 が挙げられています。

日本の番号をどう書くかは、RFCの範囲を超えるため、この記事では確かめていません。実際にスマートフォンで電話が始まるかも、確かめていません。

hrefの値ごとのまとめ

やりたいこと	href に書くもの	確かめた資料
別のページへ移動	絶対URLか相対URL	HTMLの仕様（WHATWG）
同じページの別の場所へ	# と飛び先の id	HTMLの仕様（WHATWG）。Chromiumで測定
ページの先頭へ	# だけ	HTMLの仕様（WHATWG）。Chromiumで測定
メールを書く	mailto: に続けて宛先	RFC 6068
電話をかける	tel: に続けて国際形式の番号	RFC 3966

別タブで開く target=”_blank” の決め方

行き先を決めたら、次は開き方です。href が「どこへ」を決め、target が「どこで開くか」を決めます。

この記事で扱う判断を、1枚の図にまとめました。左から順に決めていくと、書くべき属性が決まります。

targetに書ける値は、4つの言葉と名前

仕様書は、target の値を「有効な移動先の名前、またはキーワード」と定めています。キーワードは _blank・_self・_parent・_top の4つです。

アンダースコアで始まる名前は、キーワード用に取ってあります。自分で名前を付けるときは、アンダースコアで始めてはいけません。

target の値	開く場所	補足
書かない、または空	いまの場所	標準の動き
_self	いまの場所	書かないときと同じ
_blank	新しい移動先	タブかウィンドウかは、ブラウザが決める
_parent	1つ上の入れ物	枠の中にページを埋め込んだときに意味を持つ
_top	いちばん上の入れ物	同じく、枠を使ったページ向け
自分で付けた名前	その名前の移動先	無ければ、新しい移動先を作る

通常のサイトで使うのは、書かないか、_blank のどちらかです。_parent と _top は、ほかのページを枠で埋め込む作りのときだけ登場します。

_blankが開くのは、新しいタブとは限らない

先ほど確かめたとおり、仕様書の表は _blank の行に「新しい移動先」としか書いていません。

実際にタブで開くかウィンドウで開くかは、ブラウザの設定で変わります。HTMLに「必ずタブで」と指定する方法はありません。

質問にあった「別タブに飛ぶ」という理解は、実際の見え方を言い表したものです。ただし、仕様が約束している動きは「新しい移動先」までで、複数のブラウザの設定までは、この記事では確かめていません。

noopenerは、書かなくても同じ扱いになる

別タブの指定には、rel="noopener" を書き添える、という説明を読んだことがある方もいるはずです。

仕様書の「リンクをたどる」の章に、ブラウザが従う手順が書かれています。その中に、次の2つの条件があります。

1つ目は、リンクの種類に noopener か noreferrer が含まれていれば、noopener として扱う、という条件です。

2つ目は、リンクの種類に opener が含まれず、target が _blank であれば、noopener として扱う、という条件です（英語の原文を和訳）。

つまり、target="_blank" と書いた時点で、rel="noopener" を書いたのと同じ扱いになります。書き添えなくても、仕様の上では同じ動きです。

ブラウザで測った結果

この記述を、Chromium 145で確かめました。リンク先のページに、元のページを指す手がかり（window.opener）が渡るかを調べたものです。

書き方	元のページへの手がかり
target="_blank" だけ	渡らない
target="_blank" と rel="noopener"	渡らない
target="_blank" と rel="opener"	渡る

rel="noopener" の有無で、結果は変わりませんでした。手がかりを渡したいときだけ、opener を明示します。

noreferrer は、仕様書によると、noopener と同じ効果に加えて、リンク元のページの情報（Refererヘッダ）を送らない効果を持ちます。リンク先に、どのページから来たかを知らせたくないときの指定です。

書いても害はない

noopener を書いても、動きは変わりません。古い記事を読んで書き添えているサイトも、そのままで問題ありません。

後の節で触れますが、WordPressのリンクの設定で、新しい場所で開く項目を選ぶと、rel="noopener" が自動で付く仕組みでした。自分で足す作業は要りません。

別タブにするかどうかの判断

仕様書が決めているのは書き方です。別タブで開くべきかどうかの判断は、W3CのWCAGの技法の文書に書かれていました。

技法G200は、次のように書いています。

「一般に、新しいウィンドウやタブは開かないほうがよい。方向感覚を失わせることがあり、特に視覚的な内容を理解しにくい人にとってそうだからである。」（英語の原文を和訳）

同じ文書は、例外も挙げています。入力途中のフォームから、補足説明のページへ送る場面です。別タブで開けば、入力した内容が消えません。

もう1つ、技法G201が、新しいタブで開くリンクは前もって知らせるとよい、と書いています。知らせないと、戻るボタンが効かなくなる理由が分からず、迷う人がいるためです。

どちらの技法も、達成基準を満たすために必須とは書かれていません。助言として書かれた文書です。

別タブにする場面とそうでない場面

弊社の整理です。仕様やWCAGが決めた表ではありません。

場面	開き方	理由
同じサイト内の次のページ	同じタブ	戻るボタンで戻れる
入力中のフォームから補足ページへ	別タブ	入力内容を残せる（技法G200の例）
出典として挙げる外部の文書	別タブにしてもよい	読み終えたら元の記事へ戻れる。この場合は、リンクの文字で予告する
メール・電話	指定しない	移動先のページが無く、開き方を指定する意味が薄い

別タブのリンクに添える一言

技法G201に沿うなら、リンクの文字の後ろに「（新しいタブで開きます）」と添えるのが、最も簡単です。

マークで示す方法もあります。技法G200は、「新しいウィンドウ」を表すアイコンを例に挙げています。

下線を消す・色を変える：CSSで見た目を決める

下線や色は、HTMLの属性では決まりません。CSSが決めます。aタグそのものに、色を変える属性はありません。

標準の見た目

CSSを何も書かなかったとき、href を持つa要素は、青い文字に下線で表示されます。Chromiumで測った標準の見た目は、文字色が rgb(0, 0, 238)、下線あり、マウスを載せると指の形でした。

サイトの見た目を整えるテーマは、この標準を上書きしています。画面上で青くないリンクがあるのは、そのためです。

下線を消す書き方

下線を消すCSSは、次の1行です。メニューの中のリンクだけに効かせる例です。

.menu a { text-decoration: none; }

Chromiumで測ると、text-decoration: none を指定したa要素は、下線が消えました。HTMLの側は何も変わりません。

色だけでリンクを示してはいけない

下線を消すときに、守るべき基準があります。WCAGの達成基準1.4.1です。

「色が、情報を伝える、動作を示す、反応を促す、視覚的な要素を区別するための、唯一の視覚的な手段になっていない。」（英語の原文を和訳）

W3Cの説明文書は、色だけで示してはいけない例の1つに、「リンクが新しいウィンドウで開くことを色で示す」場合を挙げています。

下線を消すと不合格になる場面

技法F73は、文章の中のリンクについて、次のように書いています。

「そのようなリンクで下線を消し、色の違いだけを残すのは不合格である。色のほかに、リンクだと分かる視覚的な手がかりが無くなるからである。」（英語の原文を和訳）

同じ文書は、ナビゲーションのリンクのように、ページの作りや文脈でリンクだと分かる場合は別だ、とも書いています。

色の違いだけで区別するなら、技法G183が、リンクの文字と周りの文字の明るさの差を、3対1以上にするよう求めています。背景との読みやすさの比率とは、別の基準です。

場面ごとの判断

場面	下線	根拠
文章の中のリンク	残す	技法F73。消すと、色以外の手がかりが無くなる
ナビゲーションのメニュー	消してよい	技法F73。並び方や位置で、リンクだと分かる
色だけで区別するリンク	周りの文字との明るさの差を3対1以上に	技法G183
ボタンのように見せたリンク	背景や枠で形を示せば、消してよい	弊社の整理。仕様やWCAGの記述ではない

弊社の記事の末尾にある相談の入口は、a要素に背景色と余白をつけて、ボタンの形にしています。インラインのCSSで下線を消し、押せる部品だと分かるようにしています（2026年11月9日に、公開記事のHTMLで確認）。

リンクの中身：文字・画像・空のリンク

リンクの名前は、読み上げソフトを使う人が最初に聞く手がかりです。a要素の中身が、そのまま名前になります。

文字のリンク

文字で挟んだリンクは、その文字が名前になります。どんな文字を選ぶかは、別の記事で詳しく書きました。アンカーテキストとは 例と書き方で、リンクの文字を決める4つの問いを扱っています。

この記事では、HTMLの書き方に絞ります。名前になるのは、a要素で挟んだ文字だけです。

画像のリンク

画像をa要素で挟んだ場合は、画像の説明文（alt 属性）が名前になります。

Chromiumで測ると、alt="料金表を見る" を持つ画像を挟んだリンクは、「料金表を見る」という名前のリンクとして扱われました。

Googleの案内にも、同じ趣旨の記述があります。画像をリンクとして入れている場合、Googleは img 要素の alt 属性をアンカーテキストとして使う、というものです。

alt の書き方は、alt属性とは 画像ごとの書き方と空にする判断に書きました。

空のリンクは、名前が無い

中身が空のa要素と、alt="" の画像だけを挟んだa要素も測りました。どちらも、リンクとしては存在するのに、名前が付きませんでした。

読み上げソフトは「リンク」とだけ読み上げ、行き先の手がかりが無い状態です。

Googleの案内は、悪い例の1つに、空のリンクテキストを挙げています。a要素が空のときは、代わりに title 属性の値がアンカーテキストとして使われることがある、とも書かれています。

Chromiumで title="料金のご案内" だけを持つ空のa要素を測ると、「料金のご案内」という名前になりました。ただし、これは最後の手段です。文字や alt で名前を付けるほうが確実です。

ブロックごと包むリンク

仕様書は、a要素で段落・リスト・表などを包んでよいと書いています。見出しと説明文を持つカード全体を、1つのリンクにする作りです。

Chromiumで測ると、名前は「見出し 本文」と、中身の文字をつなげたものでした。カードの文章が長いと、名前も長くなります。

名前が長くなるのが気になるときは、見出しの文字だけをa要素にする作りも考えられます。これは弊社の整理で、仕様の記述ではありません。

リンクの中身の早見表

a要素の中身	リンクの名前	測った結果
文字	その文字	文字がそのまま名前
説明つきの画像	画像の説明	「料金表を見る」
説明が空の画像だけ	無し	名前が付かない
何も無い	無し	名前が付かない
何も無い（title あり）	title の値	「料金のご案内」
見出し＋段落	つなげた文字	「見出し 本文」

リンクとボタンの使い分け

見た目がボタンでも、a要素で作ってよい場合があります。移動するか、操作するかで決めます。

移動するならa、操作するならbutton

a要素は、URLへ移動する部品です。button 要素は、画面の中で何かを起こす部品です。たとえば、メニューを開く、フォームを送る、といった操作です。

Chromiumで、キーボードでの動きを測りました。リンクにフォーカスを合わせて、Enterキーを押し、Spaceキーを押すと、動いたのは1回でした。ボタンは、Enterキーでも、Spaceキーでも動き、2回になりました。

比べる項目	リンク（a要素）	ボタン（button要素）
向く用途	ページや場所への移動	画面内の操作、フォームの送信
Enterキー	動く	動く
Spaceキー	動かない	動く

Chromiumの読み上げ情報では、button 要素は「button」、a要素は「link」と、別の種類で出ました。href="#" に処理を付けて操作に使ったa要素も、「link」として出ます。

見た目と種類を合わせておくと、押したら何が起きるかを予想しやすくなります。

hrefなしのaにクリックの処理を付ける書き方

href を書かず、onclick でクリックの処理だけを付けたa要素は、ここまでの測定で見たとおり、Tabキーで止まりません。

Googleの案内は、この書き方について、次のように書いています。

「href 属性のない <a> 要素や、スクリプト イベントによりリンクとして機能するタグから URL を信頼できる形で抽出することはできません。」

ページの移動を伴うなら、href に行き先を書きます。移動を伴わない操作なら、button を使います。

弊社の記事の末尾にある入口

弊社の公開記事の末尾には、ボタンのように見える入口があります。見た目は背景色のついた四角ですが、HTMLの正体はa要素です。

それぞれが別のページへ移動するため、a要素を使っています。href に行き先を書き、onclick で押されたことを計測する処理を足しています。

移動するものをa要素にし、見た目をCSSで整える、という使い分けの例です。

WordPressでリンクを入れたときに出るHTML

WordPressの管理画面は、この調査では開いていません。公式のソースを読んで、確かめられた範囲だけを書きます。読んだのは、2026年11月9日時点の、Gutenberg（ブロックエディタ）の開発版のソースです。

サイトに入っている版は、これと異なる場合があります。管理画面での出力は、未確認です。

文字にリンクを付けたとき

文字にリンクを付ける機能のソースには、HTMLの要素名として a が書かれていました。対応表は、次のとおりです。

画面での設定	出力されるHTMLの属性
リンク先のURL	href
新しい場所で開く設定	target="_blank" と rel="noopener"
検索エンジンへの指定（nofollow）	rel に nofollow を追加
リンク先の種類と番号	data-type と data-id
追加のクラス	class

新しい場所で開く設定のソースを読むと、target に _blank を入れ、rel に noopener を足していました。nofollow も選んだ場合は、さらに後ろへ nofollow が付く書き方です。

旧版のソースが出力する内容は、この記事では確かめていません。

ボタンのブロック

ボタンのブロックのソースには、tagName という項目があり、a か button のどちらかを選べる作りでした。標準は a です。

a のときは、href・target・rel が出力されます。button のときは、type が出力され、href・target・rel は出力されません。

つまり、ボタンのブロックで作った入口は、設定しだいで、リンクにもボタンにもなります。見た目が同じでも、中身のタグが違います。

同じソースには、title 属性は、新しく作るボタンには付けない方針だという趣旨の注釈もありました（英語の原文を和訳）。

弊社の公開記事で数えたa要素

弊社の公開記事を新しい順に50本取得し、本文のa要素を数えました。公開日が2026年11月5日から8日の記事です。

項目	結果
a要素の数	421件
href が無いもの	0件
ドメインから全部書いた絶対URL	421件
弊社のサイト以外へのリンク	85件
target="_blank" を持つもの	78件
78件の rel	すべて noopener のみ（noreferrer と nofollow は0件）
target を持たず rel も無いもの	343件
別タブのリンクを1件以上含む記事	50本のうち34本
文字が「こちら」「詳細」「ここ」だけのリンク	0件

別タブのリンクは、出典として挙げた公式文書や論文へのものが大半でした。同じサイト内で別タブにしているのは、4件です。

rel="noopener" が付いているのは、target="_blank" を持つ78件だけでした。HTMLの出力の順番は、href、rel、target の順です。

Googleがたどれるリンクの条件

リンクの書き方が、検索にどう関わるかを確かめます。Google 検索セントラルの「リンクに関するベスト プラクティス」を開きました。最終更新日は2025年12月31日と表示されていたページです。

公式の記述

同じ案内の冒頭に、たどれるリンクの条件が書かれています。

「通常、リンクが href 属性を持つ <a> HTML 要素（アンカー要素とも呼ばれます）である場合のみ、Google はリンクをクロールできます。」

続けて、次の記述もあります。

「href 属性のない <a> 要素や、スクリプト イベントによりリンクとして機能するタグから URL を信頼できる形で抽出することはできません。」

ここまでの内容と、きれいにつながります。href が無いa要素は、仕様上はリンクにならず、Googleもたどれません。

たどれる例と、たどれない例

案内には、解析できるリンクと、できないリンクの例が並んでいます。要点を表にしました。

書き方	Googleの扱い
href に行き先を書いたa要素	解析できる
href を持ち、class や onclick も付いたa要素	解析できる
JavaScriptで後から挿入しても、href を持つa要素	クロールできる
<span href="…"> のように、a以外に href を付けたもの	解析を試みることはあるが、非推奨
href が無く、onclick だけのa要素	解析を試みることはあるが、非推奨
href="javascript:…" のような書き方	解決を試みることはあるが、非推奨

「非推奨」の行は、公式が「同様に解析を試みることはある」と添えている部分です。たどれるとは約束されていません。

文字と、隣り合うリンク

同じ案内には、リンクの文字の書き方も書かれています。空のリンクテキストは悪い例とされ、「こちら」や「詳細」のような大雑把な文字も、悪い例として並んでいました。

隣り合うリンクについても、「リンクのすぐ隣にリンクを配置しないでください」と書かれています。読者がリンク同士を識別しにくくなるためです。

リンクの数については、「1 ページあたりに含まれるリンクの数に関して、理想的な値というものはありません」と書かれています。

関連する記事

リンクのまわりの話は、別の記事でそれぞれ詳しく書きました。この記事とは答えが違うため、必要な方は進んでください。

知りたいこと	記事
リンクの文字の決め方	アンカーテキストとは 例と書き方
rel に書く値の使い分け	nofollowとは 意味と3つの値の使い分け
Googleの案内の読み解き	リンクの張り方の公式ガイド
外部リンクの関係性の伝え方	リンクの関係性をGoogleに伝えるrel属性

AI検索との関係：公式に書いてあること

a要素の書き方が、AI検索の引用に効くのか。公式の文書で確かめました。

Google 検索セントラル「AI 機能とウェブサイト」

2026年11月9日に開いたページです。最終更新日は2025年12月31日と表示されていました。

「AI による概要や AI モードにコンテンツが表示されるための追加の要件はなく、別途特別な最適化を行う必要もありません。」

同じページに、これまでの検索の基本が引き続き重要だとして、項目が並んでいます。その中に、「コンテンツがウェブサイトの内部リンクから簡単に見つけられるようにします」という項目があります。

内部リンクで見つけられる状態にする、という趣旨です。a要素の属性のうち、どれを書けば有利になるか、という記述は見つかりませんでした。

OpenAIとAnthropicの公式文書

OpenAIのクローラーの概要ページと、Anthropicのヘルプにあるクローラーの説明を、2026年11月9日に開きました。

どちらも、クローラーの名前、役割、robots.txt での許可と拒否の方法を説明していました。リンクの書き方、href・target・rel の扱いについての記述は、見つかりませんでした。

確かめた範囲を表にする

疑問	公式の記述	扱い
Googleは href を持つa要素をたどれるか	あり（検索セントラル）	書く
AIによる概要やAIモードに、特別な最適化は要るか	追加の要件も、特別な最適化も不要（検索セントラル）	書く
target="_blank" はAI検索に影響するか	公式に記載なし	書かない
rel="noopener" はAI検索に影響するか	公式に記載なし	書かない
OpenAIとAnthropicは、リンクの書き方をどう扱うか	公式に記載なし	書かない

「公式に記載なし」は、効かないという意味ではありません。記載が見つからなかった、という意味です。

リンクの書き方で順位や引用が決まる、とは言えません。記載の無い部分は、確かめられないまま、判断を留めておきます。

リンクを書く前の4つの問い

ここまでの内容を、リンクを1本書くときの手順にまとめます。図の順番と同じです。

問い1：行き先のURLが書けるか

書けるなら、href に書きます。書けないなら、そもそもリンクではありません。

行き先が無いのに文字を青くしたり下線を引いたりすると、押せそうに見えて押せない部品になります。

問い2：移動か、操作か

別のページや場所へ移るなら、a要素です。メニューを開く、フォームを送る、といった画面の中の操作なら、button 要素です。

見た目をボタンにするかどうかは、CSSで決めます。

問い3：別タブで開く理由があるか

理由が思い当たらなければ、target は書きません。理由があるときだけ target="_blank" を書き、リンクの文字で予告します。

rel="noopener" は、書かなくても同じ扱いになります。

問い4：色以外の手がかりがあるか

文章の中のリンクは、下線を残します。下線を消すなら、メニューのように、位置や並びでリンクと分かる場所に限ります。

画像のリンクは alt を、文字のリンクは具体的な文字を、確かめます。

4つの問いの判定表

問い	答えが「はい」のとき	答えが「いいえ」のとき
行き先のURLが書けるか	href に書く	リンクにしない
移動か、操作か	移動ならa要素	操作なら button 要素
別タブで開く理由があるか	target="_blank" と予告の文字	target を書かない
色以外の手がかりがあるか	下線を消してもよい	下線を残す

書き直しの例

操作用のa要素を、移動用に直す例です。

<a href="#" onclick="openPage()">料金表</a>
<a href="/price/">料金表</a>

上の行は、href="#" に処理を付けた書き方です。ページを移動したいだけなら、下の行のように、行き先を href に書きます。

チームで決めておくとよいこと

制作会社やチームで、次の3点を決めておくと、リンクの書き方が揃います。

1つ目は、別タブで開く場面です。出典のリンクだけを別タブにする、などと決めます。

2つ目は、別タブのリンクに添える文字です。「（新しいタブで開きます）」のように、書き方を統一します。

3つ目は、下線を消してよい場所です。メニューとボタンだけに限る、と決めます。

よくある質問

Q1. aタグとは何ですか

HTMLで、リンクを作るタグです。href 属性に行き先を書くと、挟んだ文字や画像がクリックできる部分になります。

href が無いと、ただの文字として扱われます。

Q2. aタグで別タブで開くには、どう書きますか

target="_blank" を足します。新しい移動先で開く指定です。

タブで開くかウィンドウで開くかは、ブラウザの設定で変わります。rel="noopener" は、書かなくても同じ扱いになります。

Q3. aタグの下線を消すには、どうしますか

CSSで text-decoration: none を指定します。HTMLの側で消す属性はありません。

文章の中のリンクで下線を消すと、色の違いだけが手がかりになり、WCAGの技法F73では不合格とされています。

Q4. href属性には、何を書けばよいですか

行き先のURLを書きます。同じサイトの中なら、/ から始まる相対の書き方でも、ドメインから書く書き方でも構いません。

同じページの中なら、# に続けて飛び先の id を書きます。

Q5. aタグの書き方は、SEOやAI検索に有利になりますか

Googleは、href を持つa要素のリンクをたどれると書いています。それ以外の書き方で有利になるという記述は、見つかりませんでした。

OpenAIとAnthropicの公式文書には、リンクの書き方についての記載が見つかりませんでした。

まとめ：リンクは、行き先と開き方を順に決める

a要素は、href があるときだけリンクになります。行き先を href に書き、開き方を target に書きます。

target="_blank" は、新しい移動先を作る指定です。rel="noopener" は、書いても書かなくても同じ動きでした。

下線や色はCSSで決めます。文章の中のリンクは、色以外の手がかりとして下線を残します。

検索やAI検索との関係は、公式に書いてある範囲までです。href を持つa要素をGoogleがたどれる、という点だけが確かめられました。

今日できる点検

自社サイトのリンクを、次の表の順に確かめてください。ソースの表示と、ブラウザの検索機能だけでできます。

点検すること	確かめ方	見つかったときの直し方
href が無いa要素が無いか	ソースで <a を探し、href の有無を見る	行き先を書く。操作なら button に替える
別タブのリンクに予告があるか	target="_blank" を探し、文字を見る	「（新しいタブで開きます）」を添える
文字が「こちら」だけのリンクが無いか	ページを読み、リンクの文字だけを拾う	行き先が分かる文字に直す
本文のリンクに下線があるか	画面でリンクの見た目を確かめる	下線を残す。消すなら明るさの差を確かめる
画像のリンクの alt が空でないか	画像のリンクを探し、alt を見る	リンク先が分かる説明を書く
a要素の中にa要素が入っていないか	ソースでリンクの入れ子を探す	外側と内側を分ける

ページを増やしても問い合わせが来ないなら、原因はページの外にあります。その場合は、下の入口からご相談ください。