Nuxt.jsでtitle・description・OGPタグを設定しSEO効果を出す方法【SSR(サーバーサイドレンダリング)】

Nuxt.jsの最大のメリットであるサーバーサイドレンダリング(SSR)。

Vue.jsのみでつくるシングルページアプリケーション(SPA)の弱点であったサーバーサイドでレンダリングできないという点が解消されたため、

  • titleやdescriptionなどのページ情報がクローラーに正しく認識されるようになった
  • OGPタグが設定できるようになったため、twitterやfacebookなどのシェア用の情報が設定できるようになった

というメリットがNuxt.jsによって提供されるようになりました。

今回は、titleやdescription、OGPタグといったHTMLのhead情報をNuxt.jsで設定する方法を紹介します。

共通設定する場合

ページすべてで使う設定は、nuxt.config.jsファイルに記述します。

nuxt.config.jsファイルの

の部分の記述を変更して、設定していきます。

例えば、簡易的なwebページを作成していて、全ページ

  • titleは【TEST WEB APP】
  • descriptionは【TEST WEB APP DESCRIPTION】
  • ogp titleは【TEST OGP TITLE】

に設定したい場合、

となります。

各ページごとに設定する

共通設定はnuxt.config.jsファイルで設定できますが、実際の運用ではページごとにOGPタグやTDK情報を設定したいもの。

ページごとにheadタグの情報を設定するには、pages配下の.vueファイルに

と記述すれば、各ページそれぞれの設定が可能です。

※descriptionやOG title等も同じように設定できます。

SPAのサイトが増えてくるかも!

シングルページアプリケーション(SPA)のサイトがあまり多くなかった理由は

  • 技術的ハードルが高い
  • SSRできないのでSEO対策やSNSマーケティングに不向き

という2つの大きな理由がありました。

しかし、Nuxt.jsの登場によって、2つめのSSRできないという欠点がなくなり、技術的課題が解決されればSPAサイトを実運用で使えるようになっています。

SPAはページ遷移スピードが格段に早く、従来のサイトにはできない動きをユーザーに提供できるためUXが格段に向上します。

これからSPAで作られた面白いサイトが増えてくるといいですね1

ABOUTこの記事をかいた人

新卒ノマドエンジニアとして独立し、半年で月収100万円を達成する。フリーランスのエンジニアとして活動しながら、事務所を売却(バイアウト)したり、Youtuber(最高月間視聴回数109万回、チャンネル登録者1万人)をしたり、Openrecの公式配信者としてゲーム生実況をしたり、ベンチャー企業のCOOをしたり、パラレルキャリアを歩んでいる。 2019年にミニマムライフコストを不労所得で稼げるようになったため、いまは好きなことだけ仕事にしています。