feata: METADATA!

2025-12-07 21:07:44 +00:00 · 2023-09-27 20:39:57 +02:00
parent e71888654d
commit b677efb4db
27 changed files with 471 additions and 211 deletions
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
 		"svelte": "^4.2.0",
 		"svelte-check": "^3.5.1",
 		"svelte-markdoc-preprocess": "^0.3.2",
+		"svelte-seo": "^1.5.4",
 		"svelte-sequential-preprocessor": "^2.0.1",
 		"svgo": "^3.0.2",
 		"svgtofont": "^4.0.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -13,7 +13,7 @@ dependencies:
    version: 0.1.0-next.9
  '@appwrite.io/repo':
    specifier: github:appwrite/appwrite
-    version: github.com/appwrite/appwrite/c273e3d8e19ffbe4ebea2644e6318e01514c8217
+    version: github.com/appwrite/appwrite/59a850d8b8f2ff3a951b386f65e25a65efb7816a
  '@fontsource/inter':
    specifier: ^5.0.8
    version: 5.0.8
@@ -94,6 +94,9 @@ devDependencies:
  svelte-markdoc-preprocess:
    specifier: ^0.3.2
    version: 0.3.2
+  svelte-seo:
+    specifier: ^1.5.4
+    version: 1.5.4(typescript@5.2.2)
  svelte-sequential-preprocessor:
    specifier: ^2.0.1
    version: 2.0.1
@@ -3943,6 +3946,14 @@ packages:
    resolution: {integrity: sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==}
    dev: true

+  /schema-dts@1.1.2(typescript@5.2.2):
+    resolution: {integrity: sha512-MpNwH0dZJHinVxk9bT8XUdjKTxMYrA5bLtrrGmFA6PTLwlOKnhi67XoRd6/ty+Djt6ZC0slR57qFhZDNMI6DhQ==}
+    peerDependencies:
+      typescript: '>=4.1.0'
+    dependencies:
+      typescript: 5.2.2
+    dev: true
+
  /semver@7.5.4:
    resolution: {integrity: sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==}
    engines: {node: '>=10'}
@@ -4390,6 +4401,14 @@ packages:
      typescript: 5.2.2
    dev: true

+  /svelte-seo@1.5.4(typescript@5.2.2):
+    resolution: {integrity: sha512-pevGUiWkqLrSWXVkxE0SbkBLNsz2dVaiK8/kBq2eUHYdyzuPEZGbqtUARyJZHouv28xre7IU9t0VnoYt8d4kzA==}
+    dependencies:
+      schema-dts: 1.1.2(typescript@5.2.2)
+    transitivePeerDependencies:
+      - typescript
+    dev: true
+
  /svelte-sequential-preprocessor@2.0.1:
    resolution: {integrity: sha512-N5JqlBni6BzElxmuFrOPxOJnjsxh1cFDACLEVKs8OHBcx8ZNRO1p5SxuQex1m3qbLzAC8G99EHeWcxGkjyKjLQ==}
    engines: {node: '>=16'}
@@ -5067,8 +5086,8 @@ packages:
    engines: {node: '>=12.20'}
    dev: true

-  github.com/appwrite/appwrite/c273e3d8e19ffbe4ebea2644e6318e01514c8217:
-    resolution: {tarball: https://codeload.github.com/appwrite/appwrite/tar.gz/c273e3d8e19ffbe4ebea2644e6318e01514c8217}
+  github.com/appwrite/appwrite/59a850d8b8f2ff3a951b386f65e25a65efb7816a:
+    resolution: {tarball: https://codeload.github.com/appwrite/appwrite/tar.gz/59a850d8b8f2ff3a951b386f65e25a65efb7816a}
    name: appwrite
    version: 0.0.0
    dev: false
--- a/src/app.html
+++ b/src/app.html
@@ -5,6 +5,7 @@
 		<link rel="icon" type="image/svg+xml" href="/images/logos/logo.svg" />
 		<link rel="stylesheet" href="/icon-font/aw-icon.css" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<meta name="”twitter:site”" content="@appwrite" />
 		%sveltekit.head%
 	</head>
 	<body class="theme-dark" data-sveltekit-preload-data="hover">
--- a/src/lib/components/Metadata.svelte
+++ b/src/lib/components/Metadata.svelte
@@ -1,86 +0,0 @@
-<script lang="ts" context="module">
-	type MetaDataType = {
-		title: string;
-		description: string;
-		ogImage: string;
-		ogTitle: string;
-		ogDescription: string;
-		author: AuthorData;
-		post: PostsData;
-	};
-
-	const metadata = writable<Partial<MetaDataType>>();
-	export const DEFAULT_HOST = 'https://website-appwrite.vercel.app';
-	export function buildOpenGraphImage(title: string, description: string): string {
-		return `https://og.appwrite.global/image.png?title=${encodeURIComponent(
-			title
-		)}&subtitle=${encodeURIComponent(description)}`;
-	}
-	export function setMetadata(data: Partial<MetaDataType>) {
-		metadata.set(data);
-	}
-</script>
-
-<script lang="ts">
-	import type { AuthorData } from '$markdoc/layouts/Author.svelte';
-	import type { PostsData } from '$markdoc/layouts/Post.svelte';
-	import { writable } from 'svelte/store';
-
-	function createSchemaAuthor(author: AuthorData): string {
-		return JSON.stringify({
-			'@context': 'https://schema.org',
-			'@type': 'Person',
-			name: author.name,
-			url: author.href,
-			image: author.avatar
-		});
-	}
-
-	function createSchemaPost(post: PostsData): string {
-		return JSON.stringify({
-			'@context': 'https://schema.org',
-			'@type': 'BlogPosting',
-			headline: post.title,
-			image: post.cover,
-			datePublished: post.date,
-			dateModified: post.date
-		});
-	}
-</script>
-
-{#if $metadata?.title}
-	<title>{$metadata.title}</title>
-	<meta name="”twitter:site”" content="@appwrite" />
-	{#if !$metadata?.ogTitle}
-		<meta property="og:title" content={$metadata.title} />
-		<meta name="”twitter:title”" content={$metadata.title} />
-	{/if}
-{/if}
-{#if $metadata?.description}
-	<meta name="description" content={$metadata.description} />
-	{#if !$metadata?.ogDescription}
-		<meta property="og:description" content={$metadata.description} />
-		<meta name="”twitter:description" content={$metadata.description} />
-	{/if}
-{/if}
-{#if $metadata?.ogImage}
-	<meta property="og:image" content={$metadata.ogImage} />
-	<meta property="og:image:width" content="1200" />
-	<meta property="og:image:height" content="630" />
-	<meta name="twitter:image" content={$metadata.ogImage} />
-	<meta name="twitter:card" content="summary_large_image" />
-{/if}
-{#if $metadata?.ogTitle}
-	<meta property="og:title" content={$metadata.ogTitle} />
-	<meta name="”twitter:title”" content={$metadata.ogTitle} />
-{/if}
-{#if $metadata?.ogDescription}
-	<meta property="og:description" content={$metadata.ogDescription} />
-	<meta name="”twitter:description" content={$metadata.ogDescription} />
-{/if}
-{#if $metadata?.author}
-	{@html `<script type="application/ld+json">${createSchemaAuthor($metadata.author)}</script>`}
-{/if}
-{#if $metadata?.post}
-	{@html `<script type="application/ld+json">${createSchemaPost($metadata.post)}</script>`}
-{/if}
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -2,11 +2,9 @@ export { default as FooterNav } from './FooterNav.svelte';
 export { default as MainFooter } from './MainFooter.svelte';
 export { default as PreFooter } from './PreFooter.svelte';
 export { default as MobileNav } from './MobileNav.svelte';
-
 export { default as Switch } from './Switch.svelte';
 export { default as Newsletter } from './Newsletter.svelte';
 export { default as Tooltip } from './Tooltip.svelte';
 export { default as Spline } from './Spline.svelte';
 export { default as Article } from './Article.svelte';
 export { default as Carousel } from './Carousel.svelte';
-export { default as Metadata } from './Metadata.svelte';
--- a/src/lib/utils/metadata.ts
+++ b/src/lib/utils/metadata.ts
@@ -0,0 +1,34 @@
+import type { AuthorData } from '$markdoc/layouts/Author.svelte';
+import type { PostsData } from '$markdoc/layouts/Post.svelte';
+
+export const DEFAULT_HOST = 'https://website-appwrite.vercel.app';
+export function buildOpenGraphImage(title: string, description: string): string {
+	return `https://og.appwrite.global/image.png?title=${encodeURIComponent(
+		title
+	)}&subtitle=${encodeURIComponent(description)}`;
+}
+
+export function createSchemaAuthor(author: AuthorData): string {
+	return (
+		`< script type="application/ld+json">${JSON.stringify({
+			'@context': 'https://schema.org',
+			'@type': 'Person',
+			name: author.name,
+			url: author.href,
+			image: author.avatar
+		})}</` + 'script>'
+	);
+}
+
+export function createSchemaPost(post: PostsData): string {
+	return (
+		`< script type="application/ld+json">${JSON.stringify({
+			'@context': 'https://schema.org',
+			'@type': 'BlogPosting',
+			headline: post.title,
+			image: post.cover,
+			datePublished: post.date,
+			dateModified: post.date
+		})}</` + 'script>'
+	);
+}
--- a/src/markdoc/layouts/Article.svelte
+++ b/src/markdoc/layouts/Article.svelte
@@ -16,10 +16,10 @@
 <script lang="ts">
 	import { DocsArticle } from '$lib/layouts';
 	import { getContext, setContext } from 'svelte';
-	import { MainFooter, Metadata } from '$lib/components';
+	import { MainFooter } from '$lib/components';
 	import type { TocItem } from '$lib/layouts/DocsArticle.svelte';
 	import { DOCS_TITLE_SUFFIX } from '$routes/titles';
-	import { buildOpenGraphImage, setMetadata } from '$lib/components/Metadata.svelte';
+	import { buildOpenGraphImage, DEFAULT_HOST } from '$lib/utils/metadata';

 	export let title: string;
 	export let description: string;
@@ -56,13 +56,27 @@
 		return carry;
 	}, []);

-	setMetadata({
-		title: title + DOCS_TITLE_SUFFIX,
-		description,
-		ogImage: buildOpenGraphImage(title, description)
-	});
+	const seoTitle = title + DOCS_TITLE_SUFFIX;
+	const ogImage = buildOpenGraphImage(title, description);
 </script>

+<svelte:head>
+	<!-- Titles -->
+	<title>{seoTitle}</title>
+	<meta property="og:title" content={seoTitle} />
+	<meta name="”twitter:title”" content={seoTitle} />
+	<!-- Desscription -->
+	<meta name="description" content={description} />
+	<meta property="og:description" content={description} />
+	<meta name="”twitter:description" content={description} />
+	<!-- Image -->
+	<meta property="og:image" content={ogImage} />
+	<meta property="og:image:width" content="1200" />
+	<meta property="og:image:height" content="630" />
+	<meta name="twitter:image" content={ogImage} />
+	<meta name="twitter:card" content="summary_large_image" />
+</svelte:head>
+
 <DocsArticle {title} {back} {toc}>
 	<svelte:fragment slot="metadata">
 		{#if difficulty}
--- a/src/markdoc/layouts/Author.svelte
+++ b/src/markdoc/layouts/Author.svelte
@@ -13,13 +13,13 @@
 </script>

 <script lang="ts">
-	import { Article, FooterNav, MainFooter, Metadata } from '$lib/components';
+	import { Article, FooterNav, MainFooter } from '$lib/components';
 	import { page } from '$app/stores';
 	import { Main } from '$lib/layouts';
 	import { getContext } from 'svelte';
 	import type { PostsData } from './Post.svelte';
 	import { BLOG_TITLE_SUFFIX } from '$routes/titles';
-	import { DEFAULT_HOST, setMetadata } from '$lib/components/Metadata.svelte';
+	import { DEFAULT_HOST } from '$lib/utils/metadata';

 	export let name: string;
 	export let role: string;
@@ -35,13 +35,28 @@
 		(p) => $page.url.pathname.substring($page.url.pathname.lastIndexOf('/') + 1) === p.slug
 	);

-	setMetadata({
-		title: name + BLOG_TITLE_SUFFIX,
-		description: bio,
-		ogImage: DEFAULT_HOST + '/images/open-graph/blog.png'
-	});
+	const seoTitle = name + BLOG_TITLE_SUFFIX;
+	const description = bio;
+	const ogImage = DEFAULT_HOST + '/images/open-graph/blog.png';
 </script>

+<svelte:head>
+	<!-- Titles -->
+	<title>{seoTitle}</title>
+	<meta property="og:title" content={seoTitle} />
+	<meta name="”twitter:title”" content={seoTitle} />
+	<!-- Desscription -->
+	<meta name="description" content={description} />
+	<meta property="og:description" content={description} />
+	<meta name="”twitter:description" content={description} />
+	<!-- Image -->
+	<meta property="og:image" content={ogImage} />
+	<meta property="og:image:width" content="1200" />
+	<meta property="og:image:height" content="630" />
+	<meta name="twitter:image" content={ogImage} />
+	<meta name="twitter:card" content="summary_large_image" />
+</svelte:head>
+
 <Main>
 	<div class="aw-big-padding-section-level-1 u-position-relative u-overflow-hidden">
 		<div
--- a/src/markdoc/layouts/Category.svelte
+++ b/src/markdoc/layouts/Category.svelte
@@ -7,13 +7,13 @@
 </script>

 <script lang="ts">
-	import { Article, FooterNav, MainFooter, Metadata } from '$lib/components';
+	import { Article, FooterNav, MainFooter } from '$lib/components';
 	import { Main } from '$lib/layouts';
 	import { getContext } from 'svelte';
 	import type { PostsData } from './Post.svelte';
 	import type { AuthorData } from './Author.svelte';
 	import { BLOG_TITLE_SUFFIX } from '$routes/titles';
-	import { DEFAULT_HOST, setMetadata } from '$lib/components/Metadata.svelte';
+	import { DEFAULT_HOST } from '$lib/utils/metadata';

 	export let name: string;
 	export let description: string;
@@ -22,13 +22,27 @@
 	const postsList = getContext<PostsData[]>('posts');
 	const posts = postsList.filter((post) => post.category.includes(name.toLowerCase()));

-	setMetadata({
-		title: name + BLOG_TITLE_SUFFIX,
-		description,
-		ogImage: DEFAULT_HOST + '/images/open-graph/docs.png'
-	});
+	const seoTitle = name + BLOG_TITLE_SUFFIX;
+	const ogImage = DEFAULT_HOST + '/images/open-graph/blog.png';
 </script>

+<svelte:head>
+	<!-- Titles -->
+	<title>{seoTitle}</title>
+	<meta property="og:title" content={seoTitle} />
+	<meta name="”twitter:title”" content={seoTitle} />
+	<!-- Desscription -->
+	<meta name="description" content={description} />
+	<meta property="og:description" content={description} />
+	<meta name="”twitter:description" content={description} />
+	<!-- Image -->
+	<meta property="og:image" content={ogImage} />
+	<meta property="og:image:width" content="1200" />
+	<meta property="og:image:height" content="630" />
+	<meta name="twitter:image" content={ogImage} />
+	<meta name="twitter:card" content="summary_large_image" />
+</svelte:head>
+
 <Main>
 	<div class="aw-big-padding-section-level-1">
 		<div class="aw-big-padding-section-level-2">
--- a/src/markdoc/layouts/Post.svelte
+++ b/src/markdoc/layouts/Post.svelte
@@ -13,13 +13,13 @@
 </script>

 <script lang="ts">
-	import { Article, FooterNav, MainFooter, Metadata, Newsletter } from '$lib/components';
+	import { Article, FooterNav, MainFooter, Newsletter } from '$lib/components';
 	import { Main } from '$lib/layouts';
 	import { getContext } from 'svelte';
 	import type { AuthorData } from './Author.svelte';
 	import type { CategoryData } from './Category.svelte';
 	import { BLOG_TITLE_SUFFIX } from '$routes/titles';
-	import { DEFAULT_HOST, setMetadata } from '$lib/components/Metadata.svelte';
+	import { DEFAULT_HOST } from '$lib/utils/metadata';

 	export let title: string;
 	export let description: string;
@@ -42,15 +42,25 @@
 			cats.some((cat) => cat.toLocaleLowerCase() === c.name.toLocaleLowerCase())
 		);
 	}
-
-	setMetadata({
-		title: title + BLOG_TITLE_SUFFIX,
-		description,
-		ogTitle: title,
-		ogImage: DEFAULT_HOST + cover
-	});
 </script>

+<svelte:head>
+	<!-- Titles -->
+	<title>{title + BLOG_TITLE_SUFFIX}</title>
+	<meta property="og:title" content={title} />
+	<meta name="”twitter:title”" content={title} />
+	<!-- Desscription -->
+	<meta name="description" content={description} />
+	<meta property="og:description" content={description} />
+	<meta name="”twitter:description" content={description} />
+	<!-- Image -->
+	<meta property="og:image" content={DEFAULT_HOST + cover} />
+	<meta property="og:image:width" content="1200" />
+	<meta property="og:image:height" content="630" />
+	<meta name="twitter:image" content={DEFAULT_HOST + cover} />
+	<meta name="twitter:card" content="summary_large_image" />
+</svelte:head>
+
 <Main>
 	<div class="aw-big-padding-section">
 		<div class="aw-big-padding-section">
--- a/src/markdoc/layouts/Tutorial.svelte
+++ b/src/markdoc/layouts/Tutorial.svelte
@@ -9,12 +9,12 @@
 <script lang="ts">
 	import { DocsTutorial } from '$lib/layouts';
 	import { getContext, setContext } from 'svelte';
-	import { MainFooter, Metadata } from '$lib/components';
+	import { MainFooter } from '$lib/components';
 	import type { TocItem } from '$lib/layouts/DocsArticle.svelte';
 	import { writable } from 'svelte/store';
 	import type { LayoutContext } from './Article.svelte';
 	import { DOCS_TITLE_SUFFIX } from '$routes/titles';
-	import { setMetadata } from '$lib/components/Metadata.svelte';
+	import { DEFAULT_HOST } from '$lib/utils/metadata';

 	export let title: string;
 	export let description: string;
@@ -51,12 +51,26 @@
 		return carry;
 	}, []);

-	setMetadata({
-		title: title + DOCS_TITLE_SUFFIX,
-		description
-	});
+	const seoTitle = title + DOCS_TITLE_SUFFIX;
+	const ogImage = DEFAULT_HOST + '/images/open-graph/docs.png';
 </script>

+<svelte:head>
+	<!-- Titles -->
+	<title>{seoTitle}</title>
+	<meta property="og:title" content={seoTitle} />
+	<meta name="”twitter:title”" content={seoTitle} />
+	<!-- Desscription -->
+	<meta name="description" content={description} />
+	<meta property="og:description" content={description} />
+	<meta name="”twitter:description" content={description} />
+	<!-- Image -->
+	<meta property="og:image" content={ogImage} />
+	<meta property="og:image:width" content="1200" />
+	<meta property="og:image:height" content="630" />
+	<meta name="twitter:image" content={ogImage} />
+	<meta name="twitter:card" content="summary_large_image" />
+</svelte:head>
 <DocsTutorial {title} {toc} {tutorials} currentStep={step}>
 	<svelte:fragment slot="metadata">
 		{#if difficulty}
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -10,14 +10,12 @@
 	import '@fontsource/inter/900.css';
 	import '$scss/index.scss';
 	import { dev } from '$app/environment';
-	import { Metadata } from '$lib/components';
 </script>

 <svelte:head>
 	{#if !dev}
 		<script defer data-domain="appwrite.io" src="https://plausible.io/js/script.js"></script>
 	{/if}
-	<Metadata />
 </svelte:head>

 <slot />
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Main } from '$lib/layouts';
-	import { Metadata, Spline } from '$lib/components';
+	import { Spline } from '$lib/components';
 	import MainFooter from '../lib/components/MainFooter.svelte';
 	import FooterNav from '../lib/components/FooterNav.svelte';
 	import DeveloperCard from './DeveloperCard.svelte';
@@ -9,7 +9,7 @@
 	import Products from '$lib/animations/Products/Products.svelte';
 	import ProductsMobile from '$lib/animations/Products/ProductsMobile.svelte';
 	import Tooltip from '$lib/components/Tooltip.svelte';
-	import { DEFAULT_HOST, setMetadata } from '$lib/components/Metadata.svelte';
+	import { DEFAULT_HOST } from '$lib/utils/metadata';

 	const platforms: Array<{
 		name: string;
@@ -63,12 +63,28 @@
 		}
 	];

-	setMetadata({
-		title: 'Appwrite - Build like a team of hundreds',
-		ogImage: `${DEFAULT_HOST}/images/open-graph/website.png`
-	})
+	const title = 'Appwrite - Build like a team of hundreds';
+	const description = '';
+	const ogImage = `${DEFAULT_HOST}/images/open-graph/website.png`;
 </script>

+<svelte:head>
+	<!-- Titles -->
+	<title>{title}</title>
+	<meta property="og:title" content={title} />
+	<meta name="”twitter:title”" content={title} />
+	<!-- Desscription -->
+	<meta name="description" content={description} />
+	<meta property="og:description" content={description} />
+	<meta name="”twitter:description" content={description} />
+	<!-- Image -->
+	<meta property="og:image" content={ogImage} />
+	<meta property="og:image:width" content="1200" />
+	<meta property="og:image:height" content="630" />
+	<meta name="twitter:image" content={ogImage} />
+	<meta name="twitter:card" content="summary_large_image" />
+</svelte:head>
+
 <div
 	style:position="absolute"
 	style:top="0"
--- a/src/routes/assets/+page.svelte
+++ b/src/routes/assets/+page.svelte
@@ -1,17 +1,32 @@
 <script lang="ts">
-	import { Metadata } from '$lib/components';
-	import { DEFAULT_HOST, setMetadata } from '$lib/components/Metadata.svelte';
+	import { DEFAULT_HOST } from '$lib/utils/metadata';
 	import { Main } from '$lib/layouts';
 	import { TITLE_SUFFIX } from '$routes/titles';
 	import FooterNav from '../../lib/components/FooterNav.svelte';
 	import MainFooter from '../../lib/components/MainFooter.svelte';

-	setMetadata({
-		title: 'Assets' + TITLE_SUFFIX,
-		ogImage: DEFAULT_HOST + '/images/open-graph/website.png'
-	});
+	const title = 'Assets' + TITLE_SUFFIX;
+	const description = '';
+	const ogImage = DEFAULT_HOST + '/images/open-graph/website.png';
 </script>

+<svelte:head>
+	<!-- Titles -->
+	<title>{title}</title>
+	<meta property="og:title" content={title} />
+	<meta name="”twitter:title”" content={title} />
+	<!-- Desscription -->
+	<meta name="description" content={description} />
+	<meta property="og:description" content={description} />
+	<meta name="”twitter:description" content={description} />
+	<!-- Image -->
+	<meta property="og:image" content={ogImage} />
+	<meta property="og:image:width" content="1200" />
+	<meta property="og:image:height" content="630" />
+	<meta name="twitter:image" content={ogImage} />
+	<meta name="twitter:card" content="summary_large_image" />
+</svelte:head>
+
 <div class="u-position-absolute" style="pointer-events:none;">
 	<svg
 		class="aw-is-not-mobile"
--- a/src/routes/blog/+page.svelte
+++ b/src/routes/blog/+page.svelte
@@ -1,19 +1,35 @@
 <script lang="ts">
 	import { Main } from '$lib/layouts';
-	import { MainFooter, FooterNav, Article, Metadata } from '$lib/components';
+	import { MainFooter, FooterNav, Article } from '$lib/components';
 	import { TITLE_SUFFIX } from '$routes/titles.js';
-	import { DEFAULT_HOST, setMetadata } from '$lib/components/Metadata.svelte';
+	import { DEFAULT_HOST } from '$lib/utils/metadata';

 	export let data;

 	const featured = data.posts.find((post) => post.featured);

-	setMetadata({
-		title: 'Blog' + TITLE_SUFFIX,
-		ogImage: DEFAULT_HOST + '/images/open-graph/blog.png'
-	});
+	const title = 'Blog' + TITLE_SUFFIX;
+	const description = '';
+	const ogImage = DEFAULT_HOST + '/images/open-graph/blog.png';
 </script>

+<svelte:head>
+	<!-- Titles -->
+	<title>{title}</title>
+	<meta property="og:title" content={title} />
+	<meta name="”twitter:title”" content={title} />
+	<!-- Desscription -->
+	<meta name="description" content={description} />
+	<meta property="og:description" content={description} />
+	<meta name="”twitter:description" content={description} />
+	<!-- Image -->
+	<meta property="og:image" content={ogImage} />
+	<meta property="og:image:width" content="1200" />
+	<meta property="og:image:height" content="630" />
+	<meta name="twitter:image" content={ogImage} />
+	<meta name="twitter:card" content="summary_large_image" />
+</svelte:head>
+
 <Main>
 	<div class="aw-big-padding-section-level-1 u-position-relative">
 		<div
--- a/src/routes/community/+page.svelte
+++ b/src/routes/community/+page.svelte
@@ -5,14 +5,30 @@
 	import PreFooter from '$lib/components/PreFooter.svelte';
 	import { Carousel } from '$lib/components';
 	import { TITLE_SUFFIX } from '$routes/titles';
-	import { DEFAULT_HOST, setMetadata } from '$lib/components/Metadata.svelte';
+	import { DEFAULT_HOST } from '$lib/utils/metadata';

-	setMetadata({
-		title: 'Community' + TITLE_SUFFIX,
-		ogImage: DEFAULT_HOST + '/images/open-graph/website.png'
-	});
+	const title = 'Community' + TITLE_SUFFIX;
+	const description = '';
+	const ogImage = DEFAULT_HOST + '/images/open-graph/website.png';
 </script>

+<svelte:head>
+	<!-- Titles -->
+	<title>{title}</title>
+	<meta property="og:title" content={title} />
+	<meta name="”twitter:title”" content={title} />
+	<!-- Desscription -->
+	<meta name="description" content={description} />
+	<meta property="og:description" content={description} />
+	<meta name="”twitter:description" content={description} />
+	<!-- Image -->
+	<meta property="og:image" content={ogImage} />
+	<meta property="og:image:width" content="1200" />
+	<meta property="og:image:height" content="630" />
+	<meta name="twitter:image" content={ogImage} />
+	<meta name="twitter:card" content="summary_large_image" />
+</svelte:head>
+
 <Main>
 	<div class="aw-big-padding-section">
 		<div class="aw-big-padding-section-level-1">
--- a/src/routes/company/+page.svelte
+++ b/src/routes/company/+page.svelte
@@ -3,15 +3,30 @@
 	import MainFooter from '$lib/components/MainFooter.svelte';
 	import FooterNav from '$lib/components/FooterNav.svelte';
 	import { TITLE_SUFFIX } from '$routes/titles';
-	import { Metadata } from '$lib/components';
-	import { DEFAULT_HOST, setMetadata } from '$lib/components/Metadata.svelte';
+	import { DEFAULT_HOST } from '$lib/utils/metadata';

-	setMetadata({
-		title: 'Company' + TITLE_SUFFIX,
-		ogImage: DEFAULT_HOST + '/images/open-graph/website.png'
-	});
+	const title = 'Company' + TITLE_SUFFIX;
+	const description = '';
+	const ogImage = DEFAULT_HOST + '/images/open-graph/website.png';
 </script>

+<svelte:head>
+	<!-- Titles -->
+	<title>{title}</title>
+	<meta property="og:title" content={title} />
+	<meta name="”twitter:title”" content={title} />
+	<!-- Desscription -->
+	<meta name="description" content={description} />
+	<meta property="og:description" content={description} />
+	<meta name="”twitter:description" content={description} />
+	<!-- Image -->
+	<meta property="og:image" content={ogImage} />
+	<meta property="og:image:width" content="1200" />
+	<meta property="og:image:height" content="630" />
+	<meta name="twitter:image" content={ogImage} />
+	<meta name="twitter:card" content="summary_large_image" />
+</svelte:head>
+
 <Main>
 	<svg
 		style="position:absolute; inset-inline-start:0; inset-block-start:0"
--- a/src/routes/contact-us/+page.svelte
+++ b/src/routes/contact-us/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-	import { Metadata } from '$lib/components';
-	import { DEFAULT_HOST, setMetadata } from '$lib/components/Metadata.svelte';
+	import { DEFAULT_HOST } from '$lib/utils/metadata';
 	import { Main } from '$lib/layouts';
 	import { TITLE_SUFFIX } from '$routes/titles';
 	import FooterNav from '../../lib/components/FooterNav.svelte';
@@ -35,12 +34,28 @@
 		submitted = true;
 	}

-	setMetadata({
-		title: 'Contact us' + TITLE_SUFFIX,
-		ogImage: DEFAULT_HOST + '/images/open-graph/website.png'
-	});
+	const title = 'Contact us' + TITLE_SUFFIX;
+	const description = '';
+	const ogImage = DEFAULT_HOST + '/images/open-graph/website.png';
 </script>

+<svelte:head>
+	<!-- Titles -->
+	<title>{title}</title>
+	<meta property="og:title" content={title} />
+	<meta name="”twitter:title”" content={title} />
+	<!-- Desscription -->
+	<meta name="description" content={description} />
+	<meta property="og:description" content={description} />
+	<meta name="”twitter:description" content={description} />
+	<!-- Image -->
+	<meta property="og:image" content={ogImage} />
+	<meta property="og:image:width" content="1200" />
+	<meta property="og:image:height" content="630" />
+	<meta name="twitter:image" content={ogImage} />
+	<meta name="twitter:card" content="summary_large_image" />
+</svelte:head>
+
 <div class="u-position-absolute" style="pointer-events:none;">
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
--- a/src/routes/cookies/+page.svelte
+++ b/src/routes/cookies/+page.svelte
@@ -1,17 +1,32 @@
 <script lang="ts">
-	import { Metadata } from '$lib/components';
-	import { DEFAULT_HOST, setMetadata } from '$lib/components/Metadata.svelte';
+	import { DEFAULT_HOST } from '$lib/utils/metadata';
 	import { Main } from '$lib/layouts';
 	import { TITLE_SUFFIX } from '$routes/titles';
 	import FooterNav from '../../lib/components/FooterNav.svelte';
 	import MainFooter from '../../lib/components/MainFooter.svelte';

-	setMetadata({
-		title: 'Cookies' + TITLE_SUFFIX,
-		ogImage: DEFAULT_HOST + '/images/open-graph/website.png'
-	});
+	const title = 'Cookies' + TITLE_SUFFIX;
+	const description = '';
+	const ogImage = DEFAULT_HOST + '/images/open-graph/website.png';
 </script>

+<svelte:head>
+	<!-- Titles -->
+	<title>{title}</title>
+	<meta property="og:title" content={title} />
+	<meta name="”twitter:title”" content={title} />
+	<!-- Desscription -->
+	<meta name="description" content={description} />
+	<meta property="og:description" content={description} />
+	<meta name="”twitter:description" content={description} />
+	<!-- Image -->
+	<meta property="og:image" content={ogImage} />
+	<meta property="og:image:width" content="1200" />
+	<meta property="og:image:height" content="630" />
+	<meta name="twitter:image" content={ogImage} />
+	<meta name="twitter:card" content="summary_large_image" />
+</svelte:head>
+
 <div class="u-position-absolute" style="pointer-events:none;">
 	<svg
 		class="aw-is-not-mobile"
--- a/src/routes/docs/+layout.svelte
+++ b/src/routes/docs/+layout.svelte
@@ -1,11 +0,0 @@
-<script lang="ts">
-	import { DEFAULT_HOST, setMetadata } from '$lib/components/Metadata.svelte';
-	import { TITLE_SUFFIX } from '$routes/titles';
-
-	setMetadata({
-		title: 'Docs' + TITLE_SUFFIX,
-		ogImage: DEFAULT_HOST + '/images/open-graph/docs.png'
-	});
-</script>
-
-<slot />
--- a/src/routes/docs/+page.svelte
+++ b/src/routes/docs/+page.svelte
@@ -5,8 +5,31 @@
 	import Docs from '$lib/layouts/Docs.svelte';
 	import MainFooter from '../../lib/components/MainFooter.svelte';
 	import Sidebar from './Sidebar.svelte';
+	import { DEFAULT_HOST } from '$lib/utils/metadata';
+	import { TITLE_SUFFIX } from '$routes/titles';
+
+	const title = 'Docs' + TITLE_SUFFIX;
+	const description = '';
+	const ogImage = DEFAULT_HOST + '/images/open-graph/docs.png';
 </script>

+<svelte:head>
+	<!-- Titles -->
+	<title>{title}</title>
+	<meta property="og:title" content={title} />
+	<meta name="”twitter:title”" content={title} />
+	<!-- Desscription -->
+	<meta name="description" content={description} />
+	<meta property="og:description" content={description} />
+	<meta name="”twitter:description" content={description} />
+	<!-- Image -->
+	<meta property="og:image" content={ogImage} />
+	<meta property="og:image:width" content="1200" />
+	<meta property="og:image:height" content="630" />
+	<meta name="twitter:image" content={ogImage} />
+	<meta name="twitter:card" content="summary_large_image" />
+</svelte:head>
+
 <Docs variant="default">
 	<Sidebar />
 	<div class="u-position-absolute u-inset-inline-end-0 aw-u-opacity-40-mobile" style="">
--- a/src/routes/docs/quick-starts/+page.svelte
+++ b/src/routes/docs/quick-starts/+page.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
 	import { MainFooter } from '$lib/components';
+	import { DEFAULT_HOST } from '$lib/utils/metadata';
+	import { DOCS_TITLE_SUFFIX } from '$routes/titles';

 	type QuickStart = {
 		title: string;
@@ -34,7 +36,7 @@
 					icon: 'icon-svelte',
 					image: '/images/blog/placeholder.png',
 					href: 'sveltekit'
-				},
+				}
 			]
 		},
 		{
@@ -57,7 +59,7 @@
 					icon: 'icon-android',
 					image: '/images/blog/placeholder.png',
 					href: 'android'
-				},
+				}
 			]
 		},
 		{
@@ -68,7 +70,7 @@
 					icon: 'icon-node',
 					image: '/images/blog/placeholder.png',
 					href: 'node'
-				},
+				}
 				// {
 				// 	title: 'Python',
 				// 	icon: 'icon-python',
@@ -90,8 +92,29 @@
 			]
 		}
 	];
+
+	const title = 'Quick starts' + DOCS_TITLE_SUFFIX;
+	const description = '';
+	const ogImage = DEFAULT_HOST + '/images/open-graph/docs.png';
 </script>

+<svelte:head>
+	<!-- Titles -->
+	<title>{title}</title>
+	<meta property="og:title" content={title} />
+	<meta name="”twitter:title”" content={title} />
+	<!-- Desscription -->
+	<meta name="description" content={description} />
+	<meta property="og:description" content={description} />
+	<meta name="”twitter:description" content={description} />
+	<!-- Image -->
+	<meta property="og:image" content={ogImage} />
+	<meta property="og:image:width" content="1200" />
+	<meta property="og:image:height" content="630" />
+	<meta name="twitter:image" content={ogImage} />
+	<meta name="twitter:card" content="summary_large_image" />
+</svelte:head>
+
 <main class="aw-main-section">
 	<article class="aw-article">
 		<header class="aw-article-header">
--- a/src/routes/docs/references/[version]/[platform]/[service]/+page.svelte
+++ b/src/routes/docs/references/[version]/[platform]/[service]/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
-	import { MainFooter, Metadata } from '$lib/components';
-	import { DEFAULT_HOST, setMetadata } from '$lib/components/Metadata.svelte';
+	import { MainFooter } from '$lib/components';
+	import { DEFAULT_HOST } from '$lib/utils/metadata';
 	import { layoutState, toggleReferences } from '$lib/layouts/Docs.svelte';
 	import { parse } from '$lib/utils/markdown';
 	import {
@@ -66,13 +66,28 @@
 	$: platform = $page.params.platform as Platform;
 	$: platformType = platform.startsWith('client-') ? 'CLIENT' : 'SERVER';
 	$: serviceName = serviceMap[data.service?.name];
-	$: setMetadata({
-		title: serviceName + DOCS_TITLE_SUFFIX,
-		description: data.service?.description,
-		ogImage: DEFAULT_HOST + '/images/open-graph/docs.png'
-	});
+	$: title = serviceName + DOCS_TITLE_SUFFIX;
+	$: description = data.service?.description;
+	$: ogImage = DEFAULT_HOST + '/images/open-graph/docs.png';
 </script>

+<svelte:head>
+	<!-- Titles -->
+	<title>{title}</title>
+	<meta property="og:title" content={title} />
+	<meta name="”twitter:title”" content={title} />
+	<!-- Desscription -->
+	<meta name="description" content={description} />
+	<meta property="og:description" content={description} />
+	<meta name="”twitter:description" content={description} />
+	<!-- Image -->
+	<meta property="og:image" content={ogImage} />
+	<meta property="og:image:width" content="1200" />
+	<meta property="og:image:height" content="630" />
+	<meta name="twitter:image" content={ogImage} />
+	<meta name="twitter:card" content="summary_large_image" />
+</svelte:head>
+
 <main class="u-contents">
 	<article class="aw-article u-contents">
 		<header class="aw-article-header">
--- a/src/routes/docs/tutorials/+page.svelte
+++ b/src/routes/docs/tutorials/+page.svelte
@@ -1,7 +1,30 @@
 <script lang="ts">
 	import { MainFooter } from '$lib/components';
+	import { DEFAULT_HOST } from '$lib/utils/metadata';
+	import { DOCS_TITLE_SUFFIX } from '$routes/titles';
+
+	const title = 'Tutorials' + DOCS_TITLE_SUFFIX;
+	const description = '';
+	const ogImage = DEFAULT_HOST + '/images/open-graph/docs.png';
 </script>

+<svelte:head>
+	<!-- Titles -->
+	<title>{title}</title>
+	<meta property="og:title" content={title} />
+	<meta name="”twitter:title”" content={title} />
+	<!-- Desscription -->
+	<meta name="description" content={description} />
+	<meta property="og:description" content={description} />
+	<meta name="”twitter:description" content={description} />
+	<!-- Image -->
+	<meta property="og:image" content={ogImage} />
+	<meta property="og:image:width" content="1200" />
+	<meta property="og:image:height" content="630" />
+	<meta name="twitter:image" content={ogImage} />
+	<meta name="twitter:card" content="summary_large_image" />
+</svelte:head>
+
 <main class="aw-main-section">
 	<article class="aw-article">
 		<header class="aw-article-header">
--- a/src/routes/heroes/+page.svelte
+++ b/src/routes/heroes/+page.svelte
@@ -1,15 +1,31 @@
 <script lang="ts">
-	import { FooterNav, MainFooter, Metadata } from '$lib/components';
-	import { DEFAULT_HOST, setMetadata } from '$lib/components/Metadata.svelte';
+	import { FooterNav, MainFooter } from '$lib/components';
+	import { DEFAULT_HOST } from '$lib/utils/metadata';
 	import { Main } from '$lib/layouts';
 	import { TITLE_SUFFIX } from '$routes/titles';

-	setMetadata({
-		title: 'Heroes' + TITLE_SUFFIX,
-		ogImage: DEFAULT_HOST + '/images/open-graph/website.png'
-	});
+	const title = 'Heroes' + TITLE_SUFFIX;
+	const description = '';
+	const ogImage = DEFAULT_HOST + '/images/open-graph/website.png';
 </script>

+<svelte:head>
+	<!-- Titles -->
+	<title>{title}</title>
+	<meta property="og:title" content={title} />
+	<meta name="”twitter:title”" content={title} />
+	<!-- Desscription -->
+	<meta name="description" content={description} />
+	<meta property="og:description" content={description} />
+	<meta name="”twitter:description" content={description} />
+	<!-- Image -->
+	<meta property="og:image" content={ogImage} />
+	<meta property="og:image:width" content="1200" />
+	<meta property="og:image:height" content="630" />
+	<meta name="twitter:image" content={ogImage} />
+	<meta name="twitter:card" content="summary_large_image" />
+</svelte:head>
+
 <div
 	class="u-position-absolute aw-is-not-mobile"
 	style="pointer-events:none; inset-inline-start:822px;"
--- a/src/routes/pricing/+page.svelte
+++ b/src/routes/pricing/+page.svelte
@@ -1,18 +1,34 @@
 <script lang="ts">
-	import { FooterNav, MainFooter, Metadata, PreFooter } from '$lib/components';
-	import { DEFAULT_HOST, setMetadata } from '$lib/components/Metadata.svelte';
+	import { FooterNav, MainFooter, PreFooter } from '$lib/components';
+	import { DEFAULT_HOST } from '$lib/utils/metadata';

 	import { Main } from '$lib/layouts';
 	import { TITLE_SUFFIX } from '$routes/titles';
 	import ComparePlans from './compare-plans.svelte';
 	import Faq from './faq.svelte';

-	setMetadata({
-		title: 'Pricing' + TITLE_SUFFIX,
-		ogImage: DEFAULT_HOST + '/images/open-graph/website.png'
-	});
+	const title = 'Pricing' + TITLE_SUFFIX;
+	const description = '';
+	const ogImage = DEFAULT_HOST + '/images/open-graph/website.png';
 </script>

+<svelte:head>
+	<!-- Titles -->
+	<title>{title}</title>
+	<meta property="og:title" content={title} />
+	<meta name="”twitter:title”" content={title} />
+	<!-- Desscription -->
+	<meta name="description" content={description} />
+	<meta property="og:description" content={description} />
+	<meta name="”twitter:description" content={description} />
+	<!-- Image -->
+	<meta property="og:image" content={ogImage} />
+	<meta property="og:image:width" content="1200" />
+	<meta property="og:image:height" content="630" />
+	<meta name="twitter:image" content={ogImage} />
+	<meta name="twitter:card" content="summary_large_image" />
+</svelte:head>
+
 <div class="u-position-absolute u-overflow-hidden" style="pointer-events:none; inline-size:100%;">
 	<img src="/images/bgs/pricing-hero.svg" alt="" style="margin-inline:auto; display:block;" />
 </div>
--- a/src/routes/privacy/+page.svelte
+++ b/src/routes/privacy/+page.svelte
@@ -1,18 +1,33 @@
 <script lang="ts">
-	import { Metadata } from '$lib/components';
-	import { DEFAULT_HOST, setMetadata } from '$lib/components/Metadata.svelte';
+	import { DEFAULT_HOST } from '$lib/utils/metadata';
 	import { Main } from '$lib/layouts';
 	import { TITLE_SUFFIX } from '$routes/titles';

-	import FooterNav from '../../lib/components/FooterNav.svelte';
-	import MainFooter from '../../lib/components/MainFooter.svelte';
+	import FooterNav from '$lib/components/FooterNav.svelte';
+	import MainFooter from '$lib/components/MainFooter.svelte';

-	setMetadata({
-		title: 'Privacy' + TITLE_SUFFIX,
-		ogImage: DEFAULT_HOST + '/images/open-graph/website.png'
-	});
+	const title = 'Privacy' + TITLE_SUFFIX;
+	const description = '';
+	const ogImage = DEFAULT_HOST + '/images/open-graph/website.png';
 </script>

+<svelte:head>
+	<!-- Titles -->
+	<title>{title}</title>
+	<meta property="og:title" content={title} />
+	<meta name="”twitter:title”" content={title} />
+	<!-- Desscription -->
+	<meta name="description" content={description} />
+	<meta property="og:description" content={description} />
+	<meta name="”twitter:description" content={description} />
+	<!-- Image -->
+	<meta property="og:image" content={ogImage} />
+	<meta property="og:image:width" content="1200" />
+	<meta property="og:image:height" content="630" />
+	<meta name="twitter:image" content={ogImage} />
+	<meta name="twitter:card" content="summary_large_image" />
+</svelte:head>
+
 <div class="u-position-absolute" style="pointer-events:none;">
 	<svg
 		class="aw-is-not-mobile"