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この記事をかいた人

新卒でノマドワーカー(webデザイナー)として独立し、半年で月収100万円を達成する。その後、事務所を売却(バイアウト)したり、Youtuber(最高月間視聴回数109万回、チャンネル登録者1万人)をしたり、Openrecの公式配信者としてゲーム生実況をしたり、ベンチャー企業のCOOをしたり、パラレルキャリアを歩んできました。 2019年にミニマムライフコストを不労所得で稼げるようになったため、いまは、お金のことを考えずに、様々な企業でエンジニア修行をさせていただきながら、複数のメディアやアプリとweb制作事務所を運営しています。 趣味は株式投資(米国・日本株メイン)で、トレードを楽しむ日も多いです!