doors doors

aタグでリンクを繋げる際に気をつけたい事

  • HOME
  • MEMO
  • aタグでリンクを繋げる際に気をつけたい事

aタグでリンクを繋げる際に気をつけたい事

aタグで外部へリンクを繋げる時、単純に
<a href=”〜〜〜〜” target=”_blank”>リンクを繋げる</a>
と「target=”_blank”」の設定をするだけに止まっていませんでしょうか?

aタグにはいくつものパラメーターがあり、それらを設定しないことには、ページ表示におけるパフォーマンスの低下や、SEOにおけるページ評価のダウンに繋がりかねません。
rel属性をつけて対処をする必要があります。

aタグのrel属性

aタグにはrel属性をつけ、そのリンク先が何であるのか、またはページ先へ移動したときに元のページの情報をどうするのか、などの指定ができるようになっています。

rel属性の種類と意味

alternate 現在のページの代替ドキュメントへのリンクである
author リンク先の著者
bookmark ページ内におけるパーマリンクである
help ヘルプ内容のリンクである
license 著作権情報へのリンクである
next/prev 次へ、または前のページへのリンクである
tag 現在のページに定義づけられたタグを説明するページへのリンクである
search 検索ページへのリンクである
nofollow リンクを自分のサイトと関連付けない(詳細は以下へ)
noopener 新しい閲覧コンテキストで開き、リンク元の文書へアクセスできないようにする(詳細は以下へ)
noreferrer 現在のページの情報をリンク先へ渡さないようにする(詳細は以下へ)

上記のうち、altenate〜searchの上8つはリンクの意味を表す設定になりますが、
下3つのnofollow〜noreferrerについては、リンク先と現ページとのデータのやりとりの設定となり、重要な項目となります。

ドメイン外への外部リンクを繋げる時に設定しておくべきrel属性

noopener

端的に言うと「セキュリティのためにつけておくべき設定」となります。
例えば何も設定がない状態でリンク先を開いた時、リンク元のページの文書を渡している状態になります。
すると、もしリンク先のページに、リンク元への書き換えスクリプトが仕込まれていたとしたら、
元のページにそのまま戻ると、表示されている状態では書き換わっている状態になってしまうのです。

これはJavaScriptのwindow.openerを使用することで可能となる技術の一つです。

別のウィンドウから(Window.open を使用して)開かれたウィンドウは、主ウィンドウへの参照を window.opener として保持します。

この方法を利用して、リンク先からリンク元に戻った時に別ドメインに転送されてしまうという状態に陥ることもあります。
このように悪意のあるスクリプトが仕込まれているページと切り離すため、まっさらで新しいページとして立ち上げ直す、という意味があります。

セキュリティの観点からnoopenerを設定しないと飛べないブラウザもある

「target=”_blank”」をつけるだけではリンクが繋がらないという状態も発生しています。
noopenerはつけておいて損は無いようです。

また、元のページとは違う新たなページとして立ち上げることで各タブの処理もそれぞれに行われます。
パフォーマンスの向上にも繋がります。

nofollow

Googleは検索順を決めるために、ページを評価しています。
評価されたページとリンクされた外部ページは、「評価が高いページにリンクされた」として評価を受け継ぐことができます。
数年前に流行った、リンク評価によるSEO対策はこの仕組みを利用していたというわけです。(今では古い手法で今ではわざとやるとペナルティを受けます)

しかし逆もあります。「悪い評価がされているページにリンクされたページ」という評価も存在します。
このように評価はリンクによっても影響を受け合うということです。

そこでこの「nofollow」の出番です。
「nofollow」は「自分のサイトとリンク先を関連付けない」とするので、評価の受け渡しを行いません。
これでページ先に迷惑はかかりませんし、万が一悪い評価のページと繋がってもこの影響を受けなくなります。

同ドメインやグループなど、管理者として関連があれば特段必要ありませんが、
基本、他所へのページリンクにはnofollowを設定することを推奨します。

noreferrer

URLを移動する際、情報もリンク先に渡っていきます。
身近なところで言うと、Google Analyticsなどで「参照元」という「どのページからやってきたか」という情報を計測できるかと思います。
これらはnoreferrerをつけていないと渡っていく情報となります。
一見危険なように見えませんが、万が一IDなどの大事な情報が入っていた場合にそれらも送信されることになり、analyticsなどでこれを拾われてしまう結果となります。
表には見えなくても裏では様々な情報が渡っていくことを認識しておきましょう。

リンクの設定は今一度確認を

リンクの設定がページの評価に全て直結しているとは一概に言えません。
しかしページそのものの情報や、閲覧者などを守るためには上記のような設定を仕込んでおく必要があります。
「target=”_blank”」を使用する場合は設定を再確認してみてください。

参照サイト一覧

 

[HTML] Aタグにおけるrel属性の意味と効果について

https://ocws.jp/blog/post1974/

https://blog.jxck.io/entries/2016-06-12/noopener.html

 

https://www.araccoon.com/rel-attribute-3no/

関連記事

【WordPress】投稿をblogディレクトリに分けたら設定が大変だった

2020/12/29:追記こちらの記事は解決しました。 【WordPress/SEO】投稿(カスタムポスト)をblogディレクトリに分けてみた なぜうまくいかな...

【CSS】比率指定にも使える!heightとpadding、marginの計算方法

前回、calc計算で100vwを基準にすれば画像や要素の比率が維持できるというお話をしました。 要素のアスペクト比(縦横比)を維持する方法 しかしPCとなると話...

【jQuery】slidetoggleの落とし穴

アコーディオンナビが作りやすい、jQueryのslidetoggle。 設定するだけでcssなどのアニメーションをつけなくても自動で動いてくれます。 クリックし...

WEB:企業サイト、PRサイト、ランディングページ、バナー制作やCMS構築、モーショングラフィックス、VP、動画制作、パンフレット、ポスター、チラシ、DMなど制作から印刷・納品まで。 お気軽にお問い合わせください。

Illustrator|3Dとマテリアル

イラストレータの3Dが復活! しかもパワーアップして戻ってきました!  バージョ...

Dreamweaver|ライブラリのリンク

状況 Dreamweaverのライブラリを使用する場合で、トップページ(inde...

Brackets|サポート終了からその後・・・

Brackets|サポート終了からその後 結論からお伝えすると、今は「Brack...

Brackets|サポート終了

Brackets|突然、告げられるサポート終了 参りました・・・2021年9月を...