[HTML] リンクタグ（aタグ）って何?基本から応用まで紹介!

リンク先の内容が伝わるように!

まず、「こちら」という言葉は指示詞です。具体的じゃありません。上の例では文脈から「こちら」の先には「ヨスのプロフィール」があるんだなと予想できます。人間には。

でもGoogleには「こちら」の先には「『こちら』について書かれたページ」があるんだな!と解釈されます。これはSEOでは非常によくないです。

なのでここを……

「ヨスについて」のページでは、私の詳細プロフィールが書かれています。

のようにすると、Googleは「『ヨスについて』の説明」があるのだなと理解し、評価してくれます。つまり、「ヨスについて」というキーワードで、このリンク先が評価されるということになります。

これがどういう意味を持つかというと、「ヨスについて」で検索されたときに、上位に来やすくなるということです。

Googleが混乱しないように!

もう一つのダメな理由は、Googleが混乱するからです。

私の詳細プロフィールはこちらに書かれています。

こういう表現が同じページにたくさんあったらどうでしょうか?

• ヨスについてはこちら
• バジルのレシピについてはこちら
• サンスクリット語についてはこちら

たぶんGoogleは「えぇ!? これも、これも『こちら』について書いてんのかよ! わけわかんねぇよ!」と錯乱するでしょう。

なので、1個1個を違うテキストにしてやることが大切です。ついでに言うと本当は、ブログのトップページなんかにある「続きを読む」と表記して記事ページにリンクさせるのは微妙なんですよね。だってリンク先は全部違うページなのに同じテキストですから。

alt属性をお忘れなく

画像をリンクさせたいときは、画像の「alt属性」を必ず入れることを、意識しましょう（もちろんリンクしないときも入れたほうがいいけど）。

さきほども書いたように、SEOでは何のキーワードでリンクされたかが重要です。でも画像って、Googleは何を書いているか読み取れないんですよ。テキストとコードしか読めませんから。

でも「alt="ヨッセンスのトップページへ"」と書いてあれば、「ああ、この画像の先は『ヨッセンスのトップページ』ってわけやな」とわかってくれるんです。

<a href="◆リンク先ページのURL◆">
<img src="◆画像のURL◆" alt="◆ここにリンク先のページの内容を簡単に入れる◆">
</a>

「alt」には「キーワードを入れたらいい」と書きましたが、キーワードの詰め込みすぎはスパム（違反行為）になります。ご注意下さいね。

「alt」を記述する順番はどこでも問題ないです。<img alt="ヨッセンスのトップページへ"  src="https://yossense.com/images/base/title_logo_01.gif">でもOK!

クリックできるのが分かると良いよ

ついでに言うと、画像をクリックしてリンクできるようにするとき、その画像がリンクできるかどうかが分かりやすいのが良いです。

ほら、私のブログの場合は、画像の上にマウスを持って行くと、半透明になるでしょ?「クリックできるよ!」っていうのが一目瞭然です（スマホとかタブレットの場合はなりませんが……）。これはCSS（スタイルシート）でちょろっと指定しているだけです。

a:hover img {
filter: alpha(opacity=60);
-moz-opacity:0.6;
opacity:0.6;
}

これだけです。数値を適当に変えると、半透明具合が変わってきますよー。

まぁ、リンクされている画像は、上にカーソルを持って行くと「指マーク」になるから分かると言えばわかるんですけど、ユーザー視点に立てばこちらの方が親切だということは言うまでもありません。

新規タブで開かせる方法

リンク先を新規タブで開かせる方法は超簡単です。「target="_blank"」を<a>タグの中に入れてやるだけです。

<a href="https://yossense.com/example/faq/" target="_blank">FAQページサンプル</a>です。

これをブラウザで見るとこうなります。

FAQページサンプルです。

ほら、クリックすると新しいタブで開いたでしょ? ちなみに上のリンク先のように、トップページに戻れないページ（ヘッダーもパンくずもサイドメニューもないようなページ）を開くときには必ず新規タブで開くようにしましょう。じゃないと思わず閉じてしまったときに戻れなくなります。

「新規タブ」という言葉の代わりに「新規ウィンドウ」という言葉が使われることもあります。これは流通度の高いブラウザのIEがタブでの管理が出来なかった時代の名残だと思います。私もつい言ってしまいます。

新規タブで開くページには印を入れよう

私は、新規タブで開くページにはすべてマークを入れています。

FAQページサンプルです。

上の例みたいに。擬似要素の「after」で指定して、矢印のような画像WEBフォントを表示させています。詳しくは下記記事で。

新規タブで開かせるな??

実は、この件、「制作側で新規タブで開くように設定するべきかどうか」についてはいろいろな意見があります。

新規タブで開くかどうかはユーザーが決めることなので、絶対に使わない方がいい!という意見もありますが、私は基本的に外部リンク（外部サイトへのリンク）は新規タブで開かせる派です。

理由は「新規タブ」の存在自体にピンと来ていないユーザーもいるからです。私のブログの場合は、ネットに詳しい人も、詳しくない人も両方がたくさん来てくれていますので、詳しくない方に合わせる方がユーザビリティーが高いと思っています。私もマウスのホイールをクリックすると新規タブで開くなんてだいぶ経ってから気づきましたし（笑）。

リンクさせたい場所に印をつける

まずはリンクで飛ばしたい場所に「id」で印をつけます。これを「ラベルをつける」ともいいます。

<p id="jump">ここに飛ばしたい</p>

ここでは<p>タグに「id」をつけていますが、<div>でも、<table>でもなんのタグでもOKです。

同じ「id」は、同じページ内では使わないようにしましょう。あと、半角アルファベットを使いましょう。

リンクタグで指定

お次はクリックする場所にリンクタグを入れます。ページ内リンクの場合は、「#」を使い、続けて、先ほど作った「id」と同じ記号を揃えて入れます。

<a href="#jump">ここをクリックするとページ内を移動</a>します。

アフィリエイトへのリンクなどには「sponsored」を

アフィリエイトへのリンクへも「rel="sponsored"」を入れることが好ましいです。

あと、お金をもらって依頼された記事（記事広告）を書く場合、「その企業へのリンクには『rel="sponsored"』を付けること」をちゃんと伝えましょう。

「title属性」は入れたほうが良い?

この「title属性」ですが、私はほぼ入れていません。個人的にはホバーで文字が出てくるのが邪魔すぎるので嫌いだからです（笑）。うっとうしくないですか??

SEOにも効果はないと思っています。だって、<a>タグの中にテキストを入れることが被リンクの評価になるのに、なんなの自分?!って感じですよ!

じゃあいつ使うの?

ではどういう時に使うと有効なんでしょうか? 例えば、さっき私の例で出したような「お遊び的な使い方」があります。ただ、連発したらうざすぎるので、1年に1回ぐらいでいいです（笑）。ほんと嫌いです。

あとは、サイドメニューなど、横幅に限りがあって、情報量を詰め込められない場合に、ホバーメッセージがユーザーにとって有益な場合はやったらいいと思います。

サイドメニューの例

例えば、こんなサイドメニューがあったとします。

• グルメ
• 音楽
• スポーツ
• ゲーム

SEOで言うと、本当は下の例のように具体的にする方がいいんですけど……

• 讃岐うどん
• 洋楽女性ボーカル
• フィギュアスケート
• ドラゴンクエスト3

そんなことよりもシンプルにしたい!っていうときです。

そういう時に、具体的な内容をホバーで出てくるようにするという技です。

• グルメ
• 音楽
• スポーツ
• ゲーム

サイドメニューに1個だけやたら長いもの……例えば「スリジャヤワルダナプラコッテ紀行記」があるときは使えそうですね。ほら、長いと折り返しになって格好悪いですし。

個人的には使いませんが、文章を短くしたいけど、説明もほしい!ってときには使ってもいいかもしれません。まぁ、嫌いやけど。