I've been trying to set up some dynamic meta tags for my Nuxt SSR project following the Nuxt documentation. Surprisingly neither having head property as an object, not using it as a function did not result in meta tags displaying properly when I view page source. Link preview doesn't work either.
Here's my head object in nuxt.config.js:
head: {
title: 'Somesite',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'og:site_name', property: 'og:site_name', content: 'Somesite' },
{ hid: 'og:type', property: 'og:type', content: 'website' },
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
},
And here's what I have in my pages:
head() {
return {
title: 'Some title',
meta: [
{
property: 'og:title',
content: 'Some title',
},
{
hid: 'description',
name: 'description',
content: 'Some description',
},
{
property: 'og:description',
content: 'Some description',
},
{
property: 'og:image',
content:
'https://res.cloudinary.com/practicaldev/image/fetch/s--arLlmpvP--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1xgexxq7w0ejq02zqd5r.png',
},
{
property: 'og:url',
content: 'http://google.com/',
},
{
hid: 'twitter:site',
name: 'twitter:site',
content: '@sometwitter',
},
{
hid: 'twitter:description',
name: 'twitter:description',
content: 'Some description',
},
{
hid: 'twitter:creator',
name: 'twitter:creator',
content: '@sometwitter',
},
{
hid: 'twitter:title',
name: 'twitter:title',
content: 'Some title',
},
{
hid: 'twitter:card',
name: 'twitter:card',
content: 'summary',
},
{
hid: 'twitter:image',
name: 'twitter:image',
content:
'https://res.cloudinary.com/practicaldev/image/fetch/s--arLlmpvP--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1xgexxq7w0ejq02zqd5r.png',
},
],
}
},
The title works fine but not the meta tags. Here's what I see when I view page source:
<meta data-n-head="ssr" data-hid="description" name="description" content="## Build Setup">
<meta data-n-head="ssr" data-hid="og:title" name="og:title" property="og:title" content="bamboo">
<meta data-n-head="ssr" data-hid="og:description" name="og:description" property="og:description" content="## Build Setup">
Side note: I wasn't even able to determine where ## Build Setup comes from.
Interestingly though, when I inspect component in Vue Devtools I see correct meta info (screenshot).
