More than 3 years have passed since last update.

HTML外部リンクのrelについて

HTML

Last updated at 2020-10-25Posted at 2020-10-25

#はじめに
リンクにugc、noreferrer、noopener、sponsored、nofollowなどがよくあります。
それぞれの意味をまとめてみます。

Linkのrel

###ugc
コメントやフォーラム投稿など、ユーザー作成コンテンツ（UGC）のリンクとして、aタグのrelにugcでマークアップし、PageRank の算出やユーザーのクエリに対するページの関連性の判断には使用されないため、サイトに悪い評価を回避できます。

<a href="http://example.com/comment?id=123" rel="ugc">UGCについての説明</a>

###noreferrer
別のページへ移動する際にリンク元ページのURLなどの値を、外部サイトに送信しないようにする

<a href="http://example.com/product?id=123" rel="noreferrer">referrer情報を送信しないURL</a>

###noopener
リンクを新しい閲覧コンテキストで開き、リンク元の文書へアクセスできないようにすることをブラウザーに指示します。
これは信頼できないリンクを開く際、 Window.opener プロパティでリンク元の文書を変更できないように制御できます。外部リンクの場合は基本設定したほうがよいです。

<a href="http://example.com/product?id=123" rel="noopener">window.openerは使えないURL</a>

###sponsored
広告や有料プレースメントのリンク（有料リンク）の場合はマックアップしたほうがよいです。

<a href="http://example.com/product?id=123" rel="sponsored">広告商品のページ</a>

###nofollow
リンクとサイトを関連付けたくない場合、またはリンク先のページをサイトからクロールさせないようにする場合は、nofollow の値を使用します

<a href="http://example.com/product?id=123" rel="nofollow">本サイトと関係ないリンク</a>

###next,prev

<a href="/prev" rel="prev">前のページ</a>
<a href="/next" rel="next">次のページ</a>

###external
ページが存在するサイトの外部にあるリソースへのハイパーリンクであることを示す。

<a href="https://google.com" rel="external">Google</a>

###alternate

<a href="print.html" media="print" rel="alternate">印刷モードのページ</a>
<a href="hoge-en.html" hreflang="en-US" rel="alternate">英語ページ</a>
<a href="exaple.pdf" type="application/pdf" rel="alternate">PDF表示</a>

###author
作者について説明するページへのハイパーリンク、または作者へのメール送信するリンクを作成

<a href="mailto:author@example.com" rel="author">作者へメール送信</a>
<a href="/contact" rel="author">作者へお問い合わせ</a>

###複数記載の場合は空白か、コンマで複数設定可能

<a href="http://example.com/product?id=123" rel="nofollow noopener">空白で複数設定</a>
<a href="http://example.com/product?id=123" rel="nofollow,noopener">コンマで複数設定</a>

#ページのnoindex
サイトでユーザーがプロフィールページ、フォーラムスレッド、ウェブサイトなどのページを作成できるようにしている場合は、新しいコンテンツや信頼していないコンテンツが検索に表示されないようにすることでスパム行為を防止できます。

<html> <head> <META NAME="googlebot" CONTENT="noindex">

#robot.txt

User-Agent:*
Disallow:/mypage
Disallow:/admin

Sitemap:http://example.com/sitemap.xml

参考URL

以上

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up