The Meta Tags That Matter (And the JSON-LD That Gets You Cited)

The Non-Negotiable Search Tags

Every page needs these, full stop:

<title>Your Article Title — Site Name</title>
<meta
	name="description"
	content="A compelling 150-160 character summary that includes your primary keyword."
/>
<link rel="canonical" href="https://example.com/your-page" /><title>Your Article Title — Site Name</title>
<meta
	name="description"
	content="A compelling 150-160 character summary that includes your primary keyword."
/>
<link rel="canonical" href="https://example.com/your-page" />

The title should be under 60 characters or Google truncates it. The description won't directly affect your ranking, but it absolutely affects whether people click. And the canonical tag prevents duplicate content issues when the same content lives at multiple URLs.

Social Sharing: Open Graph and Twitter Cards

Without Open Graph tags, social platforms just guess what to show. You'll get random images and truncated titles.

<!-- Open Graph (Facebook, LinkedIn, etc.) -->
<meta property="og:title" content="Your Article Title" />
<meta property="og:description" content="Description for social shares" />
<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta property="og:url" content="https://example.com/your-page" />
<meta property="og:type" content="article" />

<!-- Twitter/X Cards -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Article Title" />
<meta name="twitter:description" content="Description for Twitter" />
<meta name="twitter:image" content="https://example.com/twitter-image.jpg" /><!-- Open Graph (Facebook, LinkedIn, etc.) -->
<meta property="og:title" content="Your Article Title" />
<meta property="og:description" content="Description for social shares" />
<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta property="og:url" content="https://example.com/your-page" />
<meta property="og:type" content="article" />

<!-- Twitter/X Cards -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Article Title" />
<meta name="twitter:description" content="Description for Twitter" />
<meta name="twitter:image" content="https://example.com/twitter-image.jpg" />

Use summary_large_image for Twitter if you have a good featured image. The regular summary card is smaller and less engaging. And yes, you still need to call them Twitter Cards — that's what the specification is named even though the company is now X.

Multiple Image Aspect Ratios

Most people just slap one image in their structured data. But Google recommends multiple aspect ratios — 16:9 for rich results, 4:3 for standard displays, and 1:1 for square crops.

My BlogPosting schema handles this automatically:

schema.image = [
	`${siteBaseUrl}${post.coverImage}`, // Original (typically 16:9)
	`${siteBaseUrl}${post.coverImage.replace(/.(png|jpg|jpeg|webp)$/i, '-1x1.$1')}`, // 1:1 square
	`${siteBaseUrl}${post.coverImage.replace(/.(png|jpg|jpeg|webp)$/i, '-4x3.$1')}` // 4:3 standard
];schema.image = [
	`${siteBaseUrl}${post.coverImage}`, // Original (typically 16:9)
	`${siteBaseUrl}${post.coverImage.replace(/.(png|jpg|jpeg|webp)$/i, '-1x1.$1')}`, // 1:1 square
	`${siteBaseUrl}${post.coverImage.replace(/.(png|jpg|jpeg|webp)$/i, '-4x3.$1')}` // 4:3 standard
];

If the post doesn't have a cover image, it falls back to dynamically generated OG images with the same aspect ratio options. Your content looks right whether it appears in Google's rich results, Twitter cards, or LinkedIn shares.

ProfilePage Schema

For my homepage, I use Google's ProfilePage structured data — a relatively new schema type specifically designed for personal websites and author pages:

export function generateProfilePageSchema(postsCount?: number) {
	return {
		'@context': 'https://schema.org',
		'@type': 'ProfilePage',
		dateCreated: '2024-01-15',
		dateModified: '2026-04-11',
		mainEntity: {
			'@type': 'Person',
			name: 'Your Name',
			jobTitle: 'Software Engineer',
			image: [
				'https://example.com/photo.jpg', // 1:1 headshot
				'https://example.com/og-16x9.jpg', // 16:9 banner
				'https://example.com/og-4x3.jpg' // 4:3 alternative
			],
			sameAs: [
				'https://github.com/username',
				'https://linkedin.com/in/username',
				'https://twitter.com/username'
			],
			// This part is interesting:
			agentInteractionStatistic: {
				'@type': 'InteractionCounter',
				interactionType: 'https://schema.org/WriteAction',
				userInteractionCount: postsCount // e.g., 42
			}
		}
	};
}export function generateProfilePageSchema(postsCount?: number) {
	return {
		'@context': 'https://schema.org',
		'@type': 'ProfilePage',
		dateCreated: '2024-01-15',
		dateModified: '2026-04-11',
		mainEntity: {
			'@type': 'Person',
			name: 'Your Name',
			jobTitle: 'Software Engineer',
			image: [
				'https://example.com/photo.jpg', // 1:1 headshot
				'https://example.com/og-16x9.jpg', // 16:9 banner
				'https://example.com/og-4x3.jpg' // 4:3 alternative
			],
			sameAs: [
				'https://github.com/username',
				'https://linkedin.com/in/username',
				'https://twitter.com/username'
			],
			// This part is interesting:
			agentInteractionStatistic: {
				'@type': 'InteractionCounter',
				interactionType: 'https://schema.org/WriteAction',
				userInteractionCount: postsCount // e.g., 42
			}
		}
	};
}

The agentInteractionStatistic with WriteAction tells Google how many posts you've written. When someone searches for your name, they might see "42 posts" in your knowledge panel. That's social proof in search results.

BlogPosting Schema: Author and Publisher

Google has specific guidelines for authorship markup. You need both an author (the Person who wrote it) and a publisher (the Organization responsible for it). Even on a personal blog, you're both:

export function generateBlogPostingSchema(post: Post) {
	return {
		'@context': 'https://schema.org',
		'@type': 'BlogPosting',
		headline: post.title,
		description: post.description,
		author: {
			'@type': 'Person',
			name: authorName,
			url: siteBaseUrl,
			sameAs: authorSameAs // Links to GitHub, LinkedIn, etc.
		},
		publisher: {
			'@type': 'Organization',
			name: authorName,
			url: siteBaseUrl
		},
		datePublished: '2026-04-11T08:00:00+00:00',
		dateModified: '2026-04-11T10:00:00+00:00',
		// ISO 8601 duration format for reading time
		timeRequired: 'PT8M' // 8 minutes
	};
}export function generateBlogPostingSchema(post: Post) {
	return {
		'@context': 'https://schema.org',
		'@type': 'BlogPosting',
		headline: post.title,
		description: post.description,
		author: {
			'@type': 'Person',
			name: authorName,
			url: siteBaseUrl,
			sameAs: authorSameAs // Links to GitHub, LinkedIn, etc.
		},
		publisher: {
			'@type': 'Organization',
			name: authorName,
			url: siteBaseUrl
		},
		datePublished: '2026-04-11T08:00:00+00:00',
		dateModified: '2026-04-11T10:00:00+00:00',
		// ISO 8601 duration format for reading time
		timeRequired: 'PT8M' // 8 minutes
	};
}

The sameAs array matters — it connects your content to your established presence on GitHub, LinkedIn, Twitter, etc. Google uses these E-E-A-T (Experience, Expertise, Authoritativeness, Trustworthiness) signals for ranking.

FAQ Schema for "People Also Ask"

If you want to capture featured snippets, FAQ schema is your best bet:

export function generateFAQSchema(items: FAQItem[], post: Post) {
	return {
		'@context': 'https://schema.org',
		'@type': 'FAQPage',
		mainEntity: items.map((item) => ({
			'@type': 'Question',
			name: item.question,
			acceptedAnswer: {
				'@type': 'Answer',
				text: item.answer
			}
		}))
	};
}export function generateFAQSchema(items: FAQItem[], post: Post) {
	return {
		'@context': 'https://schema.org',
		'@type': 'FAQPage',
		mainEntity: items.map((item) => ({
			'@type': 'Question',
			name: item.question,
			acceptedAnswer: {
				'@type': 'Answer',
				text: item.answer
			}
		}))
	};
}

Keep answers to 40-60 words. Longer answers get truncated or ignored by Google's snippet extraction. I store FAQ items in the post frontmatter and render them both visually on the page and invisibly in the JSON-LD.

Using the Component

In your +page.svelte, pass the data from your loader:

<script>
	import SEO from '@components/SEO/index.svelte';

	let { data } = $props();
</script>

<SEO
	title={data.post.title}
	description={data.post.description}
	post={data.post}
	faq={data.post.faq}
	readingTime={data.readingTime}
/><script>
	import SEO from '@components/SEO/index.svelte';

	let { data } = $props();
</script>

<SEO
	title={data.post.title}
	description={data.post.description}
	post={data.post}
	faq={data.post.faq}
	readingTime={data.readingTime}
/>

That's it. The component generates all the meta tags, OG images, and JSON-LD automatically. Since it renders in svelte:head during SSR, crawlers see the complete markup without waiting for JavaScript.

When you build for Cloudflare Workers (pnpm build), the output in .svelte-kit/cloudflare/ contains static HTML with all the JSON-LD already injected. No client-side rendering required — search engine crawlers get the structured data on the first request.

A note on tooling: Google Search Console's Rich Results Test has a caching layer that can make results inconsistent — run it twice and you may get different output. More importantly, the schema.org documentation lists hundreds of properties, but only a fraction are recognized by Google. Use the Google Search Central documentation as your source of truth — it's what actually triggers rich results.