Optimizing for Search Engines: Implementing Meta Tags for Static and Dynamic Content in Your Nuxt.js Store

Check this post in my web notes!

And simply want to remind that you can check demo of what are we building here, and source code here.

In this article let's talk about SEO (Search Engine Optimisation) a little bit. Why is SEO important for our e-commerce store? It's simple, we want our store was not only a catalog of products, but we also want users could find our products simply by serfing the internet. For that, we need our e-commerce store to get a higher ranking than possible competitors, and to achive that we need to add some meta tags to each page, static and dynamic pages also.

Search Engine Optimization (SEO) is the practice of optimizing websites and web pages to improve their visibility and ranking in search engine results pages (SERPs). It involves a combination of techniques, including on-page optimization, technical SEO, and off-page strategies, to make websites more easily discoverable and user-friendly for both search engines and users.

Meta tags are snippets of text that describe a page's content, and they are not visible to users on the web page itself. Search engines use meta tags to understand the topic, relevance, and other attributes of a web page, which can influence its ranking and visibility in search results. While meta tags alone are not the sole factor in determining search rankings, they play a crucial role in optimizing web pages for better SEO.

Here are 5 common meta tags and a brief description for each:

1. Title Tag: This tag specifies the title of the web page, which appears in the browser tab and as the clickable headline in search results. It should accurately and concisely describe the page's content.
2. Meta Description Tag: This tag provides a brief summary of the page's content, which may be displayed as a snippet in search results. A well-written meta description can entice users to click through to the page.
3. Meta Keywords Tag: While not as important as it once was, this tag allows you to specify relevant keywords for the page, which can potentially assist search engines in understanding the page's topic.
4. Meta Robots Tag: This tag provides instructions to search engine crawlers on how to handle the page, such as whether to index it, follow links, or apply other directives.
5. Open Graph and Twitter Card Tags: These are meta tags used for social media sharing, allowing you to control how the page's content appears when shared on platforms like Facebook, Twitter, and others.

If you need to get more about implementing meta tags to Nuxt.js projects you can check "Simple Meta Tags" article.

Great, now we can start implementing those meat tags into our Nuxt.js e-commerce store.

1. Setting up meta tags for static pages in Nuxt.js

It's the simplest part because we know what will be rendered on each specific page and we can define those tags.

Nuxt.js allows us to add a head method into the component, but previously we needed to update component creation and use the "defineNuxtComponent" function, then we can add a "head" function that will return meta, scripts, and links.

export default defineNuxtComponent({
    name: "Main",
    head() {
        return {
            title: `TryBuy Store`,
            meta: [
                { name: 'description', content: `Discover the latest fashion trends at TryBuy Store. Our online clothing store offers a wide range of stylish and affordable apparel for men, women, and children. Shop our curated collection of dresses, tops, jeans, accessories, and more from top brands. Find inspiration for your perfect look with our style guides and easy returns policy.` },
                { name: 'keywords', content: `online clothing store, fashion trends, women's apparel, men's apparel, kids clothes, dresses, tops, jeans, accessories, affordable fashion, style guide, easy returns` },
                { property: 'og:title', content: `TryBuy Store` },
                { property: 'og:description', content: `Discover the latest fashion trends at TryBuy Store. Our online clothing store offers a wide range of stylish and affordable apparel for men, women, and children. Shop our curated collection of dresses, tops, jeans, accessories, and more from top brands. Find inspiration for your perfect look with our style guides and easy returns policy.`},
                { property: 'og:url', content: `https://trybuy.com/` },
                { property: 'site_name', content: 'TryBuy Store' },
            ],
            link: [
                { rel: 'canonical', href: `https://trybuy.com/` },
            ],
        }
    },
})

As was mentioned at the beginning of this article we define the canonical link of our page, description, and keywords. Also, we add "og" tags that define the view of our page in the social networks.

You have to modify all this data to your specific website and do the same steps to each of your static pages like the "shop" or "about-us" page. And let's move on!

2. Generating dynamic meta tags based on page content

We will have dynamicly generated pages for each product, and we can not define meta tags for each page separately, that is why we need to configure our "product" page so that it can generate some sort of data into those tags for each page. Let's do it!

As previously we will add a "defineNuxtComponent" function as a component wrapper and then create a head function as previously, and add "nuxtApp as a parameter. "nuxtApp" is an object that provides access to various Nuxt-specific utilities and the context of the current app instance, with its help we will get our route parameter and fetch product data. Also, we will use our products store and dynamically add all product metadata to the page.

async head(nuxtApp) {
    const productId = nuxtApp.$router.currentRoute._value.params.product;
    const productsStore = useProductsStore();
    productsStore.aGetAllProducts();
    const product = productsStore.gProductsList.find(item => item.id == productId);
    return {
        title: `TryBuy Store | ${product.name}`,
        meta: [
            { name: 'description', content: `${product.description}` },
            { name: 'keywords', content: `${product.description}` },
            { property: 'og:title', content: `TryBuy Store | ${product.name}` },
            { property: 'og:description', content: `${product.description}`},
            { property: 'og:url', content: `https://trybuystore.com/shop/${product.id}` },
            { property: 'site_name', content: 'TryBuy Store' },
        ],
        link: [
            { rel: 'canonical', href: `https://trybuystore.com/shop/${product.id}` },
        ],
    }
},

How it will work under the hood? When we generate our product page nuxt will get the product id, then fetch data about the product and return meta with all information needed. As many product pages we will generate, as many meta tags will be dynamically added. And that is crucial for our SEO.

How can we test it? We will check it in our next articles when we will configure our Nuxt generation process.

In conclusion, implementing proper meta tags is an essential step for optimizing your Nuxt.js e-commerce store for search engines. By setting up meta tags for static pages and generating dynamic meta tags based on product content, you can ensure that your website provides accurate and relevant information to search engines, improving its visibility and ranking in search results. This, in turn, can lead to increased organic traffic and potentially more sales for your online store. While meta tags are just one aspect of SEO, they play a crucial role in helping search engines understand and properly index your website's content.

If you need a source code for this tutorial you can get it here.