Nuxt Js Social Meta Tags for Social Sharing

In this post, you'll learn how to add social meta tags for better search engine optimization and social sharing. This will ensure that social networks such as Facebook and Twitter can get the appropriate data to show when contents are shared hence also improve the Google search engine result.

Nuxt Social Meta

By default, the easiest way to add the metadata is to use Nuxt Social Share which is a community package that has been around for a while. This package is great for simple use but not flexible enough to control the data.

To get started the package all we have to do is install it using npm or yarn.

yarn add nuxt-social-meta

Include it in the modules config and define the property and value pairs representing your website details.

module.exports = {
  modules: [
    ...[
      "nuxt-social-meta",
      {
        url: "Site url",
        title: "Title",
        site_name: "Site name",
        description: "Site description",
        img: "Link to image in static folder",
        locale: "en_US",
        twitter: "@user",
        twitter_card: "summary_large_image",
        themeColor: "#theme-color",
      },
    ],
  ],
};

Once you have defined that, now do run "yarn dev" and view the "head" section of the page. The necessary meta tags are generated by it. That's great but it lacks customization and flexibility to control and change the data. For the above example, all pages will have the same metadata which is not ideal for it's purpose.

Custom Implementation Helper (Better Nuxt Social Meta)

The solution that I have come up with is to define a custom plugin that injects a simple function that will generate the head metadata and then call the function in the head meta property which is available on every page.

The first thing to do is to create the file of the plugin. Call it "social-meta.js" and in this file, you need to copy the following code as a boilerplate which you can fully customize with your heart content.

function socialMeta(options) {
    // All meta tags
    const metaTags = [
        // Global
        { name: "author", content: options.url },
        { name: "publisher", content: options.url },
        { name: "apple-mobile-web-app-title", content: options.title },
        { name: "theme-color", content: options.themeColor },

        // Facebook & LinkedIn
        { property: "og:title", content: options.title },
        { property: "og:description", content: options.description },
        { property: "og:type", content: "website" },
        { property: "og:url", content: options.url },
        { property: "og:image", content: options.img },
        { property: "og:image:alt", content: options.title + ' page cover' },
        { property: "og:locale", content: options.locale },
        { property: "og:site_name", content: options.site_name },

        // Twitter
        { name: "twitter:card", content: options.twitter_card },
        { name: "twitter:site", content: options.twitter },
        { name: "twitter:creator", content: options.twitter },
        { name: "twitter:title", content: options.title },
        { name: "twitter:description", content: options.description },
        { name: "twitter:image", content: options.img },
    ];

    // Add meta tags to head
    return metaTags.map((tag) => {
        if (tag.content !== undefined && tag.content !== null) {
            if (tag.hasOwnProperty("name")) {
                return {
                    hid: tag.name,
                    name: tag.name,
                    content: tag.content,
                }
            } else if(tag.hasOwnProperty("property")){
                return {
                    hid: tag.property,
                    property: tag.property,
                    content: tag.content,
                }
            }
        }
    })
}

export default ({ app }, inject) => {
    inject('socialMeta', socialMeta)
}

What the code above does is that we'll define the required metadata in an array of key-value pairs which in turn create a collection of objects stored in an array of metadatas.

Using the Helper

Now make use of the helper in any page you want the social meta to appear. In this case let's say the homepage of your Nuxt Js site.

head () {
    const description = 'Your website description here'

    return {
      title: 'Homepage',
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: description
        },
        ...this.$socialMeta({
          url: "your-website.com",
          title: "Website Homepage",
          site_name: "Website",
          description: description,
          img: 'website-image.jpg',
          locale: "en",
          twitter: "@website-twitter-handle",
          twitter_card: "summary_large_image",
          themeColor: "#hex-color-theme",
        })
      ]
    }
  }

Run yarn dev and head over to the page that contains this data. Do note that this is valid if defined on the layout page, any other pages that contain the same code will override the content of the layout head content.

By now you should be able to customize and add any of the necessary head metadata on your own. If you have any suggestions do comment down below. If you find it helpful do share it with your friends and keep on learning. cheers 🍻

This post is originally published at PostSrc. If you like this kind of tutorial, I would really appreciate it if you give it a visit.