Posts Learn Components Snippets Categories Tags Tools About
/

Nuxt Js Social Meta Tags for Social Sharing

Learn how to add social meta tags in Nuxt Js for better search engine optimization and social sharing

3 years ago

15 mins read

2027 views

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 with the package, all we have to do is install it using npm or yarn.
yarn add nuxt-social-meta
Include it in the module's 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 metadata.

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 🍻

Alternative Tags

If you like our tutorial, do make sure to support us by being our Patreon or buy us some coffee ☕️

Load comments for Nuxt Js Social Meta Tags for Social Sharing

new

PostSrc Code Snippets

Learn new snippets today, level up your Laravel, Alpine JS, Vue JS, Tailwind CSS skills and more.

Learn New Snippets

Sponsors 👑

+ Add Yours
new

PostSrc Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that are right for your project.

View Components
)