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
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", }, ], ], };
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) }
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", }) ] } }
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 🍻