Manifests in SEO Pages
Unlock the power of web manifests in SEO! Discover how leveraging web application manifests can significantly impact your website's search engine performance. Learn about optimizing user experience, enhancing search engine indexing, and staying ahead in the competitive digital landscape. Dive into the world of SEO manifests for a stronger online presence.
generate manifest.json in your static files folder /static
Copy and paste this code, Edit all the values here according to your own page.
{
"name": "List Of SEO",
"short_name": "listofseo.com",
"theme_color": "#fff",
"background_color": "#fff",
"display": "browser",
"orientation": "",
"scope": "/",
"start_url": "/",
"icons": [
{
"src": "icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icons/safari-pinned-tab.svg",
"sizes": "192x192",
"type": "image/svg"
},
{
"src": "icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
You can create all the icons you see here from online icon creation pages or design them yourself.
static folder should look like this
Then, you will find a list called links in the meta object in nuxt-config.js. Place the following codes in it.
link: [
{
rel: 'apple-touch-icon',
hid: 'icon',
sizes: '72x72',
href: '/icons/icon-72x72.png',
},
{
rel: 'apple-touch-icon',
hid: 'icon',
sizes: '96x96',
href: '/icons/icon-96x96.png',
},
{
rel: 'apple-touch-icon',
hid: 'icon',
sizes: '144x144',
href: '/icons/icon-144x144.png',
},
{
rel: 'apple-touch-icon',
hid: 'icon',
sizes: '128x128',
href: '/icons/icon-128x128.png',
},
{
rel: 'apple-touch-icon',
hid: 'icon',
sizes: '152x152',
href: '/icons/icon-152x152.png',
},
{
rel: 'mask-icon',
hid: 'icon',
sizes: '152x152',
href: '/icons/safari-pinned-tab.svg',
},
{
rel: 'icon',
hid: 'icon',
type: 'image/png',
sizes: '192x192',
href: '/icons/icon-192x192.png',
},
{
rel: 'icon',
hid: 'icon',
type: 'image/png',
sizes: '384x384',
href: '/icons/icon-384x384.png',
},
{
rel: 'icon',
hid: 'icon',
type: 'image/png',
sizes: '512x512',
href: '/icons/icon-512x512.png',
},
{
rel: 'manifest',
href: '/manifest.json',
},
],
check your website manifest.json like this https://listofseo.com/manifest.json
and of course check your icons, there are be avaliable.