Nuxt.jsで行ったSEO対策まとめ
Nuxt.jsで行ったSEO対策をまとめました。
抜け漏れがないか確認してみてください。参考になれば幸いです。
Google Analyticsを設定する
ユーザーの行動や数を把握するために、Google Analyticsを設定しましょう。
計測しなければSEO対策のゴールや成果がわかりません。
Nuxt.jsにGoogle Analyticsを導入する方法
サイトマップを送信する
Googleサーチコンソールにサイトマップを送信することで、ページのインデックス状況や検索パフォーマンスを確認することができます。
canonicalを設定する
canonicalはの正規化です。ページの評価分散やGoogleのペナルティを防ぎます。
<link rel="canonical" href="リンク">
noindexを設定する
noindexは、価値の低いページを検索結果に表示させないようにして、サイト全体の評価を下げるのを防ぎます。
<meta name="robots" content="noindex" >
nofollowを設定する
nofollowは、外部リンクをページの評価(ページランク)に含めないようにします。
<a href="リンク先URL" rel="nofollow">リンクテキスト</a>
また、markdown-itのプラグインを使えば簡単に設定することができます。
ページスピードを改善する
Googleが用意している「Light House」や「ページスピードインサイト」でサイトのスピードを計測することができます。その他にも「画像の軽量化」や「次世代画像フォーマットの使用」「遅延読み込み」などが挙げられます。
また、Nuxt.jsにはパフォーマンス改善に役立つ機能が用意されています。
パンくずリストの設置
Nuxt.jsを使用しているので、コンポーネント化して使いまわしています。
メタキーワードの設定
HeadlessCMSのContentful側で記事モデルに設定してます。
記事と関連性の高いキーワードを2~3ワードで設定しています。
<meta name="keywords" content="キーワード">
メタディスクリプションの設定
こちらもHeadlessCMSのContentful側で記事モデルに設定してます。
大体記事の冒頭の文章を設定することが多いです。
<meta name="description" content="説明">
OGPタグの設定
Twitterを含めたOGPタグを各ページに設定しています。
OGP(Open Graph Protcol)は、記事がシェアされたときの設定です。
head() {
return {
meta: [
{ hid: "og:site_name", property: "og:site_name", content: "サイト名" },
{ hid: "og:type", property: "og:type", content: "website" },
{ hid: "og:url", property: "og:url", content: "サイトURL" },
{ hid: "og:title", property: "og:title", content: "サイトタイトル" },
{ hid: "og:description", property: "og:description", content: "ディスクリプション" },
{ hid: "og:image", property: "og:image", content: "サイトイメージ" },
{ hid: "twitter:image", name: "twitter:image", content: "サイトイメージ" },
{ name: "twitter:card", content: "summary" },
{ hid: "twitter:site", name: "twitter:site", content: "TwitterID" }
],
}
}
明示的なタイトルをつける
- 解決できる課題をタイトルで示す
- 分かりやすいタイトルにする
上記を心がけています。
記事の質を上げていく
- 冒頭に結論
- 読みやすさ
- 分かりやすさ
上記を意識して書いています。
キーワードを考える
などのWebサイトでニーズのある検索を調べることができます。闇雲に記事を書くのは良くないので、自分の興味のある分野×ニーズのある記事を書いていきましょう。
