Webサイトでは、それぞのページをリンクで繋ぐことができます。インターネットをブラウズする際、URLをキーボードから入力することは、ほとんどなく、ページ内に配置されたリンクを使ってそれぞれのページを移動します。
リンクのSEO面からの視点
リンクの流れは、アクセスを誘導するだけでなく、検索エンジンの検索結果にも影響します。
SEOの視点では、リンクは、外部のサイトから張られる「外部リンク」と、自分のサイト内で張られる「内部リンク」の２つに分けて考えます。
外部リンクの役割
SEO対策における外部リンクの主な役割は、「クローラーの入口」と「評価の受け渡し」です。検索エンジンにクローラは、ページ感のリンクをたどってWebサイトにたどり着きます。外部リンクが多く張られていると、検索エンジンは、人気のあるサイトやページと判断し評価を高めると言われています。そして、外部のサイトにリンクを張ると、評価をリンクしたのサイトに渡してしまい、そのページの評価がその分下がると言われています。外部サイトへ評価を渡す仕組みは、メニューページやハブページとと呼ばれる、他のページへのリンクのみで構成される本で言う目次のような、そのページ自体には、内容が存在しないページヘの対応と思われます。
内部リンクの役割
SEO対策における内部リンクの主な役割は「クローラの巡回経路」と「相対的重要度の指標」です。
クローラーは、内部リンクを手がかりにWebサイト内のページを探し、情報を収集していきます。
ページへの内部リンクの数は、検索エンジンに対し、そのページの相対的な重要度を伝える指標となっています。そのため、重要なページに多くの内部リンクが集まり、あまり重要でないページには、内部リンクが集まらないように、Webサイトを設計する必要があります。
この考えを反映すると、サイトの構造は、階層構造にすると効率的にトップページのページ評価が高まります。
aタグ（リンクタグ）
Webサイト上のテキストや画像をクリックすることによって、他のページに移動できるようにすることを「リンクを張る」と表現します。 リンクを張るには、a要素のhref属性に呼び出すページの位置を指定します。
他のページへのリンク
他のページへのリンクを設置するには、以下に示すタグを利用します。
<a href="○○.html">他のページに移動する</a>href(エッチレフ)属性に、移動するページのURLを指定します。指定するURLの形式は、絶対表記や相対表記が利用できます。絶対URLで表記すると、ローカルフォルダ内のファイルであっても、インターネット状のページに移動しますが、相対URL指定を使うと、ローカルフォルダ内でリンクが機能するので、フォーカルフォルダ内でWebサイトを作成している際には、便利です。
href属性に指定するページの位置は、以下の方法で、指定可能です。
- 絶対パスつまり「http://」で始まるURL（※「//」で初めてもよいとされていますが、この表記は、エディタが対応していない場合があります。）
- base要素で指定したページ、指定してなければ、現在のページを基準にした相対パス
- ページ内の位置を示すid属性。絶対パスや相対パスと組み合わせて使用することもできます。
ページ内へのリンク
ページ内の特定の位置に移動するリンクを設置するリンクを設置できます。
あらかじめ、移動したい位置のタグに、id属性を設置しておきます。
そして、aタグのhref属性に、#を先頭につけたid名を指定します。
<div id="△△">ここに移動する</div>
<a href="#△△">他のページに移動する</a>他のページの特定の位置に移動するリンクを使用したい場合は、URL名の後に#を付けid名を指定します。
<a href="○○.html#△△">指定したページに移動する</a>○○.htmlの後に"/"を記入するのは誤りなので注意して下さい。
href属性の値の誤った指定方法の例
<a href="○○.html/#△△">指定したページに移動する</a>絶対URLと相対URL指定
href属性の指定方法は、絶対URLと相対URLがあります。書籍によっては、絶対パスと相対パスと表記されている場合がありますが、正式な名称は、確認していません。パスとURLの使い分けについては、正確に理解していません。ご存知の方は、読み替えて下さい。
| 記号 | 意味 |
|---|---|
| . | 現在のディレクトリ（フォルダ） |
| .. | 一回層上のディレクトリ（フォルダ） |
| / | ディレクトリ（フォルダ）の区切り |
基準は、aタグを記入するページの場所になります。
リンク先を新しいウインドウで表示する
広告やページの内容で参考にしたページをページ内にリンクとして設置する場合、元のページから移行してほしくありません。新しいタグやウィンドウとして開き、元のページはそのまま表示してもらいたい場合があります。
その場合、リンクを示すaタグの属性に「target="_blank"」を追加します。
<a href="○○.html#△△" target="_blank">指定したページを開く</a>rel="nofollow"属性とは
aタグにrel="nofollow"属性を指定することで、クローラーがそのリンクを辿らないように制御することができます。
"nofollow"属性は、aタグとmetaタグで使用することができます。
<a href="#△△" rel="nofollow">他のページに移動する</a>リンク先のファイルにクローラーが辿らないように指示します。
<meta name="robots" content="nofollow" >このタグが設置されたページに設置されたリンク先をクローラーが辿らないようにします。
nofollow属性の用途
信頼できないサイト（コンテンツ）へのリンク
掲示板やコメント欄など、不特定多数の人が自由に書き込むことができるコンテンツやリンク先のサイトの評価著しく低い場合、具体的には、憎悪を拡散するコンテンツ、間違ったWebページの例を示すためのページ、詐欺や信頼性の低い商品を扱うサイトを紹介する場合など、リンク元の内容がよろしくない時に使います。
有料リンクや認証（ログイン）が必要なページ
クローラーは、使用量が必要なサイトや登録者のみが利用できる、ユーザー認証が必要なサイトは、巡回しません。そのようなサイトへのリンクには、あらかじめ、リンクにnofollow属性を指定して、クローラーが辿らないようにすることで、他のリンクが効率的に巡回されます。
広告リンク
リンクをクリックしたり、リンク先の商品を購入したり、リンクを設置するだけで、サイトの運営者が利益を得るリンクには、nofollow属性を指定することが推奨されています。
css3を使用して、リンクテキストのデザインを変更する
cssでスタイルを指定することで、aタグでしていたリンクのデザインを変更することができます。
