Skip to content

Instantly share code, notes, and snippets.

@shash7
Last active December 14, 2022 17:33
Show Gist options
  • Save shash7/76b759de71e61dfa266b23921681d643 to your computer and use it in GitHub Desktop.
Save shash7/76b759de71e61dfa266b23921681d643 to your computer and use it in GitHub Desktop.
A SEO optimized nuxtjs config file. Comes with all standard meta tags as well as social tags. Quick configuration. Read the comments first before integrating in your config file.
/**
* Before copy-pasting this code inside your nuxt config file, read the instructions first.
*
* 1. Go to https://realfavicongenerator.net/ and generate a bunch of favicons.
* It will take only 5 minutes to generate them(assuming you have a base favicon in 512x512 size ready)
* When generating the favicons select the path directory as /favicons
* 2. Make a facebook cover image. Use something like figma or canva to create one quickly. Name the file cover.jpg
* 3. Inside your nuxt project create a folder called favicons and dump all the favicon files(generated from the favicon generator)
* as well as the facebook cover image.
* 4. Configure the variables below to your liking. You can also change the delimiter.
* Copy the variables and the head section from this file and replace it with your project's nuxt.config.js's head section.
* Ta-da, that's all folks.
*
* ---
*
* Couple of extras:
* - Make sure the cover image, as well as other social media based images are optimized.
* - Use https://metatags.io/ to preview social tags
* - For a complete list of meta tags, see https://gist.github.com/lancejpollard/1978404
* ---
*
* These tags were gathered from various websites which have a fairly good internal SEO structure.
* In my opinion these are the bare minium tags you need, although you can always add more.
* Let me know in the comments below if you would like to add more tags.
*/
var siteName = "redditwallpapers";
var delimiter = " | ";
var description =
"Displaying wallpapers from reddit's most popular wallpaper subreddits";
var url = "https://redditwallpapers.com";
module.exports = {
head: {
title: siteName,
meta: [
{ charset: "utf-8" },
{ name: "viewport", content: "width=device-width, initial-scale=1" },
{
hid: "description",
name: "description",
content: siteName + delimiter + description
},
{
hid: "og:title",
name: "og:title",
content: siteName
},
{
hid: "og:url",
name: "og:url",
content: url
},
{
hid: "og:image",
name: "og:image",
content: url + "/favicons/fb-cover.jpg"
},
{
hid: "og:type",
name: "og:type",
content: "website"
},
{
hid: "og:site_name",
name: "og:site_name",
content: siteName
},
{
hid: "og:description",
name: "og:description",
content: description
},
{
hid: "twitter:card",
name: "twitter:card",
content: "summary" // Can be "summary","summary_large_image","app","player"
},
{
hid: "twitter:creator",
name: "twitter:creator",
content: "@shash122tfu"
},
{
hid: "twitter:url",
name: "twitter:url",
content: url
},
{
hid: "twitter:title",
name: "twitter:title",
content: siteName
},
{
hid: "twitter:description",
name: "twitter:description",
content: description
},
{
hid: "twitter:image",
name: "twitter:image",
content: url + "/favicons/fb-cover.jpg"
}
],
link: [
{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
{
rel: "canonical",
href: url
},
{
rel: "apple-touch-icon",
sizes: " 180x180",
href: "/favicons/apple-touch-icon.png"
},
{
rel: "icon",
type: "image/png",
sizes: "32x32",
href: "favicons/favicon-32x32.png"
},
{
rel: "icon",
type: "image/png",
sizes: "16x16",
href: "favicons/favicon-16x16.png"
},
{
rel: "manifest",
href: "favicons/site.webmanifest"
},
{
rel: "mask-icon",
color: "#000000",
href: "favicons/safari-pinned-tab.svg"
},
{
rel: "shortcut icon",
href: "favicons/favicon.ico"
}
]
}
};
@shash7
Copy link
Author

shash7 commented Aug 16, 2019

17/8/2019 - Updated buggy twitter meta tags, updated opengraph meta tags.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment