Nuxt 3 SSR: Simple Meta Tags - Adding Meta Tags to Static and Dynamic Pages

Introduction:

Imagine this: you've been working on a project. Now, it's time to promote it to the world. You know that meta tags are essential for SEO and how your content appears in search results. Adding them to a single static page is a breeze, but what if you're dealing with a massive website with 2000 pages, each needing its own set of meta tags and structured data?

In this article, we're diving deep into the world of meta tags in Nuxt 3 SSR. We will show you how to tackle the task of adding meta tags to individual pages and also explore the power of structured data. With practical examples, you'll be well-equipped to enhance your personal projects, boost SEO, and improve user engagement. Let's get started!

(Node js and npm last versions should be installed already)

Step 1: Create and configure new app.

If you don’t have a Nuxt js app already, create one. Open your project folder in your favorite code editor (e.g., VS Code), navigate to the project folder in your terminal, and type the following command to start a new Nuxt.js project.

If you want to create your project in the default folder then add “.” Instead, type your project name. It will offer to install nuxi type “y”, and install all initial dependencies.

Step 2: Create all project components.

We need to prepare all pages and components that will be generated in the final project. For demo purposes, I will add a single static page and a dynamic page in the pages folder. So my project structure will look like this:

Step 3: Add meta tags to a static page.

To configure meta tags in a component, we simply need to add a head method to the specific Vue component for that page and return the meta settings: title (responsible for page title), script (place for structured data), meta (all our tags), link (here we add canonical). Also, we can use our nuxt app object "nuxtApp" as a parameter. Check the example below:

<template>
    <div class="static">
        Simple static page
    </div>
</template>

<script>
export default defineNuxtComponent({
    name: 'StaticPage',

    head(nuxtApp) {
        return {
            title: 'Nuxt',
            script: [
                { type: 'application/ld+json', innerHTML: '[{"@context":"http://schema.org","@type":"BreadcrumbList" ...' }
            ],
            meta: [
                { name: 'description', content: 'About us info...' },
                { name: 'keywords', content: 'Nuxt, About us, new website' },
                { property: 'og:title', content: 'Nuxt | About Us' },
                { property: 'og:description', content: 'About us info...'},
                { property: 'og:url', content: 'https://dev.to/kucherol' },
                { property: 'og:image', content: 'https://dev.to/kucherol' },
                { property: 'site_name', content: 'Nuxt' },
            ],
            link: [
                { rel: 'canonical', href: 'https://dev.to/kucherol' },
            ],
        }
    },
})
</script>

Now, if we generate our project and check the web page, we will see SEO friendly project description.

Step 4: Add meta tags to dynamical pages.

Continue reading ...