SEOの観点から見たlinkタグのrel属性一覧とその用途
目的
本稿は、プロジェクトで dns-prefetch を使用しているメンバがいた為、
今後の知見のために、上記についてまとめることで今後自身で対応する際に
調べる時間を減らすことを目的とする。
＃ どうせならば dns-prefetch 以外rel属性もまとめることで、
＃ 関連付けて覚えてしまおうという魂胆からプロジェクトで頻出度
＃ が高いrel属性も記載する。
rel属性とは
自分のページと外部ページやファイルを関連づけるlinkタグの属性
であり、href属性で記載したURLとの関係性を表す属性である。
＃ linkタグは <HEAD>～</HEAD> 間で使用
rel属性一覧
rel属性は複数あり、その一覧を以下に記載する。
- href先との関係性を検索エンジンに示す
- リソースをバックグラウンドで先に読み込む
＃ 随時追加予定
href先との関係性を検索エンジンに示す
▼ 使用例
<link rel="canonical" href="https://sample.co.jp">
検索エンジンに対してhrefで記載したURLが正規のURLであることを示す。
内容が同じなのにURLに差異があると、検索エンジンに別のページだと見なされる
可能性がある。その場合、評価が分散し、結果的にページの評価が下がってしまう。
＃ 同ページにhttps://sample.co.jp と https://sample.co.jp/
＃ をhrefに記載している場合など。
そのため canonical を設定することでページの評価分散を避ける。
リソースをバックグラウンドで先に読み込む
hrefで記載したリソースを事前に読み込んでおくことで、
ページ遷移時のパフォーマンスを向上させる（Resouce Hints）。
また Resouce Hints は以下で構成されており、各説明は以降で記載する。
- dns-prefetch
- preconnect
- prefetch
- prerender
■ dns-prefetch
▼ 使用例
<link rel=”dns-prefetch” href=”//sample.co.jp”>
外部サイトから通信を確立する際に、事前に名前解決
を行うことで遷移時の処理を省略することが出来る。
■ preconnect
▼ 使用例
<link rel=”preconnect” href=”//sample.co.jp”>
TCP three-way handshaking1や SSL/TLS session negotiation2を事前に処理する。
■ prefetch
▼ 使用例
<link rel=”prefetch” href=”/sample.js” as="script">
リソースを予めキャッシュに格納する。
dns-prefetch や preconnect と違い、通信の確立ではなく画像のような
リソースを取得する際に使用する。また、as属性 で取得するリソースの種類
を指定することで、ブラウザ側が最適なプロセスでリソースを取得可能となる。
＃ リソースのサイズが大きいまたはネットワーク速度が遅い場合は行わない。
■ prerender
▼ 使用例
<link rel=”prerender” href=”//sample.co.jp”>
prefetch のようなリソースのダウンロードだけでなく、リンク先のDOM構築や
JavaScriptの実行まで行う。CSSやJavaScriptが実行されることで、遷移した際はレン
ダリングが完了している状態となる。
＃ アクセス前なのにCSSのアニメーションが動作するといった事象が発生する。
＃ その場合、Page Visibility API などで対策する必要がある。
＃ 複数指定は不可。
参照URL
Author And Source
この問題について(SEOの観点から見たlinkタグのrel属性一覧とその用途), 我々は、より多くの情報をここで見つけました https://qiita.com/yt_andante_11/items/1796b929cee4aba5e3b2著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .