SEOのチェックに役立つChrome拡張

# はじめに

新しいWebページを作成する際にSEOの観点で問題ないかをチェックしようとした時、HTMLソースを検索したり、目視でチェックしたりするのは辛いですよね。
そんな時に便利なChrome拡張を紹介したいと思います。

# 目次
[1. SEO META in 1 CLICK](#1-seo-meta-in-1-click)
[2. Redirect Path](#2-redirect-path)
[3. No Follow](#3-no-follow)

# 1. SEO META in 1 CLICK
ページのメタタグ情報や、ヘッダーの構造などを確認できる拡張機能です。
[SEO META in 1 CLICK のインストールはこちら](https://chrome.google.com/webstore/detail/seo-meta-in-1-click/bjogjfinolnhfhkbipphpdlldadpnmhc/support?hl=ja&gl=001)

ページを読み込んだ後で拡張のアイコンをクリックして起動します。
以下の情報が確認できます。

## 1-1. SUMMARY

title, description, robots, canonicalなどのタグの内容が確認できます。
<img width=500 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44046/2119b338-df07-cfd2-fad7-cecf0bdae949.png">
下にスクロールすると、**ALL LINKS**で`<link>`に設定した情報が、**ALL METAS**で`<meta>`に設定した情報が確認できます。

<img width=500 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44046/fa5b95da-750e-bc0a-d114-6da57990fde0.png" width=500 />

さらに下にスクロールすると、**スクリプト**や**XFN**の情報が確認できます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44046/d4844c4e-9ff5-83e9-5dc7-8e268c9993d3.png" width=500 />

## 1-2. HEADERS

H1〜H6のヘッダーの構造と内容が確認できます。
階層構造が一目でわかるので、H3の下にH2があるなどの間違いがすぐにわかります。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44046/74d8928c-63bb-0cad-9a9a-661c57519b19.png" width=500 />

## 1-3. IMAGES

ページに存在する画像のalt属性、title属性の概要と内容が確認できます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44046/63cd0182-a918-4cd3-f2e2-929f4e71db62.png" width=500 />

## 1-4. LINKS

ページに存在するアンカーリンクの概要と、リンク先URLやtitle属性、ページ上に重複するリンクがいくつあるか等を確認できます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44046/642a1b1b-e4c3-f657-6376-e3b90fb6d2ce.png" width=500 />

## 1-5. SOCIAL

OGPの情報（SNSでリンクがシェアされた際にタイトルや詳細、画像がどのように表示されるか）が確認できます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44046/55e96b8e-a68b-91e4-1b01-4da21a26b6f5.png" width=500 />

## 1-6. TOOLS

さらに詳しい解析をする上で便利なツールへのリンクが記載されています。
ツールのリンクをクリックすると表示中のページに対して解析してくれるので便利です。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44046/86650bb8-b8b3-93a7-991f-be7aef917938.png" width=500 />

上段にあるツールで検証できる内容は上から以下の通りです。

ツール名 | 概要 |
| -- | -- |
| モバイルフレンドリーテスト | スマートフォンでページを閲覧した際にGoogleの定める基準を満たしているか？ |
| GTmetrix | ページ読み込みのパフォーマンスや改善点 |
| PageSpeed Insights | ページ読み込みのパフォーマンスや改善点（Chromeユーザーの実際の利用データも計測データとして使用される） |
| W3C Markup Validator | HTMLが標準仕様に従っているか？ |
| W3C CSS Validation Service | CSSが標準仕様に従っているか？ |
| Facebook シェアデバッガー | リンクがFacebookにシェアされた際の見え方に問題がないか？ |
| Keyword Density Analyzer | ページ内のキーワードの密度やスコア |
| リッチリザルト テスト | 構造化マークアップがGoogleが定めたリッチリザルトの表示基準を満たしているか？ |

# 2. Redirect Path

リダイレクトの有無と経路が確認できます。
[Redirect Path のインストールはこちら](https://chrome.google.com/webstore/detail/redirect-path/aomidfkchockcldhbkggjokdkkebmdll?hl=ja)

拡張機能のアイコンをアドレスバーの横に配置して使用します。
ページを読み込むと、アドレスバーに入力したURLに対するダイレクトの発生有無によってアイコンの表示が変わります。
リダイレクト有りの場合は、リダイレクトの種類（301: 恒久的な移動, 302: 一時的な移動）が表示されます。

| リダイレクトの有無 | アイコン表示 |
| -- | -- |
| 無し | <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44046/c6a9579d-d24e-8dac-95ee-3776da435d53.png" width=50 /> |
| 有り | <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44046/d239dced-fd92-504a-33a3-bab0645bb453.png" width=50 /><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44046/c5801134-85c9-b7d3-eb5d-0e046f511b12.png" width=50 /> |

リダイレクト有りの場合、さらにアイコンをクリックするとリダイレクトの経路が確認できます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44046/177f322c-3616-ad37-3563-c66f3ff57850.png" width=500 />

# 3. No Follow

アンカーリンクにnofollowが設定されているかどうかが確認できます。
[No Follow のインストールはこちら](https://chrome.google.com/webstore/detail/nofollow/dfogidghaigoomjdeacndafapdijmiid?hl=ja)

拡張機能を有効にした状態でページを読み込むと、`rel="nofollow"` が設定されたアンカーリンクが下の画像のように赤い破線で囲まれて表示されます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44046/f05c19ef-43ea-653b-3a1a-c360f0b22b25.png" width=500 />