Nuxt.js is a powerful framework for building server-side-rendered Vue.js applications. In addition to providing a solid foundation for building complex applications, Nuxt.js also makes it easy to add meta tags to your pages.

Find out how to include meta tags in your Nuxt app to improve your site’s SEO and visibility on social media.

What Are Meta Tags?

Meta tags are snippets of code that provide information about a web page. These tags are present in the HTML source, just like the content of your page, but they’re not visible on the page itself.

Meta tags can provide information such as the page title, description, and keywords. They are also used to provide information for social media sharing and search engine optimization.

Adding the Meta Tags

Before diving into adding meta tags, create a new Nuxt.js app. For that, make sure you have Node.js installed on your device. Then, open up your terminal and run the following command:

        npx create-nuxt-app my-app
    

This will create a new Nuxt.js app in a directory called my-app. Follow the prompts to configure your app as needed.

Adding Meta Tags Globally

One way to add meta tags to your Nuxt.js app is to add them globally. To do this, add a title tag and two meta tags: one for the character set and one for the viewport. Open up your nuxt.config.js file and add a head property to the module.exports object:

        module.exports = {
  head: {
    title: 'My App',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
    ]
  }
}
    

Adding Meta Tags on Single Pages

Sometimes you may want to add meta tags only to specific pages in your app. To do this, you can add a head property to the component definition for the page:

        <template>
  <div>
    <h1>About Us</h1>
  </div>
</template>

<script>
export default {
  head: {
    title: 'About Us',
    meta: [
      { name: 'description', content: 'Learn more about our company' }
    ]
  }
}
</script>
    

Adding Meta Tags Dynamically

Adding meta tags dynamically lets you generate specific meta tags for each page, depending on the content. This can be useful when you have multiple pages with different types of content, and you want to optimize them for search engines and social media sharing.

For example, let's say you have a blog section in your Nuxt.js app with multiple posts. To optimize each blog post for search engines and social media, you can dynamically generate meta tags for it.

        <template>
  <div>
    <h1>{{ post.title }}</h1>
    <p>{{ post.body }}</p>
  </div>
</template>

<script>
export default {
  async asyncData({ params }) {
    const post = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`)
      .then(res => res.json())
    return { post }
  },
  head() {
    return {
      title: this.post.title,
      meta: [
        { hid: 'description', name: 'description', content: this.post.body },
        { hid: 'og:title', property: 'og:title', content: this.post.title },
        { hid: 'og:description', property: 'og:description', content: this.post.body },
        { hid: 'og:image', property: 'og:image', content: this.post.image },
        { hid: 'og:url', property: 'og:url', content: `https://example.com/blog/${this.post.id}` },
        { hid: 'article:published_time', property: 'article:published_time', content: this.post.date },
        { hid: 'article:author', property: 'article:author', content: this.post.author },
        { hid: 'article:section', property: 'article:section', content: this.post.category }
      ]
    }
  }
}
</script>
    

By dynamically generating these meta tags, you can provide more detailed information about each blog post to search engines and social media platforms. This can help increase visibility, click-through rates, and engagement for our blog posts.

Running the App

Once you’ve added meta tags to your Nuxt.js app, you’ll need to run it to see the changes in action. You can do so using the Nuxt.js development server, which follows the same process as the React.js app.

To start the development server, open your terminal, navigate to your app directory, and run the following command:

        npm run dev
    

This will start the development server and launch your app in a web browser. If you open the browser's page source and look at the head section, you should see the meta tags.

It's important to note that the meta tags generated by Nuxt.js are only visible to search engines and social media platforms when the page renders on the server side. If you're using client-side rendering, the meta tags may not be visible to search engines and social media platforms.

Improve Your Website’s Ranking With Meta Tags

As well as improving the appearance of your web pages when they’re shared on social media platforms, meta tags can improve your site's ranking in search engine results. By providing accurate and relevant meta-tag information, you can help search engines understand the content of our web pages and rank them higher for relevant search queries.