Best way to set up meta tags? #86

luminarious · 2022-02-08T11:24:19Z

luminarious
Feb 8, 2022

So there useHead, which is great for one-time changes. I tried app.ts, and I tried using it in layouts, but is there some way to not add computed to each frontmatter value individually? Because somehow none of the ways I tried updated these values when moving between pages with similar layout :/

function metaArr(array) {
	return Object.entries(array)
		.filter((x) => x[1])
		.map((x) => {
			let key = x[0].includes('og:') ? 'property' : 'name'
			return { hid: x[0], [key]: x[0], content: x[1] }
		})
}

export default function({frontmatter, site}) {
	return {
		htmlAttrs: { lang:'en' },
		link: [
			{ rel:'icon', href:'/favicon.ico', sizes:'any' },
			{ rel:'icon', href:'/favicon.svg', type:'image/svg+xml' },
			{ rel:'apple-touch-icon', href:'/apple-touch-icon.png' },
			{ rel:'manifest', href:'/the.webmanifest' },
		],
		title: (frontmatter.title) ? `${frontmatter.title} - ${site.title}` : site.title,
		meta: [{
			name: 'referrer',
			content: 'strict-origin-when-cross-origin'
		},
		...metaArr({
			'twitter:card': 'summary_large_image',
			'twitter:creator': site.social.twitter,
			'og:description': frontmatter.description,
			'og:image': frontmatter.coverSrc,
			'og:locale': frontmatter.lang || 'en',
			'og:site_name':  site.author,
			'og:title': frontmatter.title,
			'og:type': 'website',
			'description': frontmatter.description,
		}),
		],
		script: [{
			type: 'application/ld+json',
			json: {
				'@context': 'http://schema.org',
				'@type': 'Person',
				'email': site.email,
				'name': site.author,
				'url': site.url,
				'sameAs' : [
					`https://linkedin.com/in/${site.social.linkedin}`,
					`https://twitter.com/${site.social.twitter}`,
					`https://instagram.com/${site.social.instagram}`
				]
			}
		}]
	}
}

ElMassimo · 2022-02-08T16:06:24Z

ElMassimo
Feb 8, 2022
Maintainer

@luminarious The <Head> component is my favorite way to set meta tags, but any of the three options mentioned in the docs can achieve the same.

The advantage of <Head> is that for short expressions it allows you to skip the computed, as expressions in the template will be re-evaluated (for example, when frontmatter or meta change).

See the following examples:

Docs
Blog

For example, using this expression in the template directly would allow you to skip the computed. I kept it outside because I find it easier to read.

0 replies

luminarious · 2022-02-09T12:00:20Z

luminarious
Feb 9, 2022
Author

For context, all my recent posts are because I am moving my portfolio site from Saber to Iles. There, doing meta updates was really simple, because layouts had access to page, which similarly combined route information and frontmatter, but was automatically updated on every route update. I kind of miss the simplicity of that 😅

1 reply

ElMassimo Feb 9, 2022
Maintainer

Everything that comes out of usePage is reactive, and is automatically updated on every route update.

The issue you are running into above is related with the usage of script setup, where useHead is only called once with the current values (for meta tags, it would work as expected when building the site because the values will never change for a given page render, so you can keep it simple if you don't mind them being incorrect during dev).

If you use the <Head> component, and access those reactive variables in the template, the meta tags will be updated as the values change without having to think about computed properties.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Best way to set up meta tags? #86

{{title}}

Replies: 2 comments 1 reply

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Best way to set up meta tags? #86

luminarious Feb 8, 2022

Replies: 2 comments · 1 reply

ElMassimo Feb 8, 2022 Maintainer

luminarious Feb 9, 2022 Author

ElMassimo Feb 9, 2022 Maintainer

luminarious
Feb 8, 2022

Replies: 2 comments 1 reply

ElMassimo
Feb 8, 2022
Maintainer

luminarious
Feb 9, 2022
Author

ElMassimo Feb 9, 2022
Maintainer