7
6

More than 3 years have passed since last update.

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

Last updated at Posted 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

以上

7
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
6