Nuxt.jsで行ったSEO対策をまとめました。 抜け漏れがないか確認してみてください。参考になれば幸いです。
ユーザーの行動や数を把握するために、Google Analyticsを設定しましょう。
計測しなければSEO対策のゴールや成果がわかりません。
Nuxt.jsにGoogle Analyticsを導入する方法
Googleサーチコンソールにサイトマップを送信することで、ページのインデックス状況や検索パフォーマンスを確認することができます。
canonicalはの正規化です。ページの評価分散やGoogleのペナルティを防ぎます。
<link rel="canonical" href="リンク">
noindexは、価値の低いページを検索結果に表示させないようにして、サイト全体の評価を下げるのを防ぎます。
<meta name="robots" content="noindex" >
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="説明">
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サイトでニーズのある検索を調べることができます。闇雲に記事を書くのは良くないので、自分の興味のある分野×ニーズのある記事を書いていきましょう。