HTML5のaタグのrel=”noopener noreferrer”や、ページ内リンク、JavaScript実行を解説

HTML5のaタグのrel=”noopener noreferrer”や、ページ内リンク、JavaScript実行を解説


HTML5のaタグのrel=”noopener noreferrer”や、ページ内リンク、JavaScript実行を解説しながら、様々なaタグの使い方をまとめました。

HTML5関連記事

関連記事をもっとみる

aタグとは?

「aタグ」は、よく別ページへのリンクをするために使われるHTML要素です。

<A>タグはアンカー(Anchor)の略で、リンクの出発点と到達点を指定するタグです。 リンクの出発点ではhref属性でリンク先を指定します。

リンク先の指定

HTML

<a href="https://mugenweb-note.com/web/">トップページへ</a>

href属性にリンク先のURI(URL)を指定します。

ページ内リンクの指定

HTML

<a href="#ps2">ポジション2</a>
<h3 id="ps2">ポジション2</h3>

href属性にページ内リンクで移動したい箇所に存在する要素のidを指定します。
このaタグをクリックすると、h3までパッと移動します。

別ページの指定位置へリンクする

HTML

<a href="https://mugenweb-note.com/web/#footer">footerへ</a>

href属性に別ページのURI(URL)を指定し、最後に移動したい箇所に存在する要素のidを指定します。
このaタグをクリックすると、別ページのfooterまでパッと移動します。

スムーズなページ内リンクの指定

jQueryをしようすれば、スムーズにページ内リンクが実装できます。

ページ内リンクをjQueryでスムーズにスクロールさせる
ページ内リンクをjQueryでスムーズにスクロールさせる jQuery関連記事 ページ内リンクのの作り方 html まず、スクロール位置を移動させたい要素(上の例だとh...

リンクを別タブで開く指定

HTML

<a href="https://mugenweb-note.com/web/" target="_blank">別タブで開く</a>

target属性に_blankを指定すると、リンク先が、別タブで開かれます。

aタグをクリックを無効化する

HTML

<a href="javascript:void(0);">クリックを無効化する</a>

href属性にjavascript:void(0);を指定するとクリックしても何も起こりません。
主に、画面を遷移をせず、JavaScriptが動作するときの条件(トリガー)にしたい場合に使われます。

aタグをクリックするとJavaScriptを実行する

HTML

<a href="javascript:void(0);" onclick="alert('アラート');">クリックするとアラート</a>

onclickのイベント属性にJavaScriptを組み込むことができます。
上記の例だと、クリックすると画面遷移が起こらず、アラートが出ます。

aタグをクリックするとJavaScriptの関数を実行する

HTML

<a href="javascript:void(0);" onclick="getUrl();">クリックするとfunction実行</a>

onclickのイベント属性にJavaScriptの関数も組み込むことができます。
コードが長い場合など、予めJavaScriptで宣言しておいた関数を呼び出せます。

JavaScriptの関数の扱い方は、下記を参考にしてください。

JavaScriptのfunctionの書き方・引数・呼び出し方法
JavaScriptのfunctionを使った、関数の書き方、呼び出し方法、引数付きで呼び出す方法 jQuery関連記事 関数宣言でfunctionを書く JavaScript get...

rel属性でリンク先との関係を明示する

rel属性で、このページから見たリンク先との関係を明示できます。

rel=”noopener”で、外部リンクのセキュリティ対策をする

HTML

<a href="外部リンク" target="_blank" rel="noopener">外部リンク</a>

外部リンクにtarget="_blank"を使う場合に必須のセキュリティ対策です。
リンクをクリックした際に元ページのURLを勝手に書き換えることができてしまうという脆弱性をカバーするためにrel="noopener"を付けましょう!
また、パフォーマンス低下を防ぐという観点でも必要です。

rel=”noreferrer”で、リンク先へリファラを渡さないようにする

HTML

<a href="外部リンク" target="_blank" rel="noreferrer">外部リンク</a>

rel="noreferrer"とすると、URLに、知られたくないユーザーIDなどが含まれている場合にセキュリティ対策となります。

大体外部リンクには、rel="noopener noreferrer"のようにセットで使用されることが多いです。
WordPressも、自動で付与されるようになっています。

rel=”nofollow”で、リンク先とページを関連付けなくする

HTML

<a href="外部リンク" rel="nofollow">外部リンク</a>

rel="nofollow"とすると、リンクとサイトを関連付けたくない場合、もしくは、リンク先のページをサイトからクロールさせないようにできます。
使い方は、コメントスパム対策に使用されます。コメント欄に書き込まれたリンクに自動でnofollowを付与することにより、コメント欄を悪用してPageRankを獲得するスパム行為の対策をすることができるのです。

rel=”sponsored”の使い方

HTML

<a href="広告リンク" rel="sponsored">広告リンク</a>

基本的には、rel="nofollow"と変わりません。
rel="sponsored"は広告に関連したリンクに使用します。

rel=”ugc”の使い方

HTML

<a href="ユーザーが投稿したリンク" rel="ugc">ユーザーが投稿したリンク</a>

基本的には、rel="nofollow"と変わりません。
rel="ugc"は、ブログへのコメントやフォーラムに対する投稿など、ユーザーが自発的に作成したコンテンツへのリンクに使用します。

コメント

タイトルとURLをコピーしました