Add SEO optimization and meta tags

This commit is contained in:
Realmy 2024-03-11 20:19:31 +01:00
parent c6d20d1c7f
commit 2b106f5028
2 changed files with 23 additions and 3 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

View file

@ -2,16 +2,36 @@
import { XCircleOutline } from "flowbite-svelte-icons";
import { Dialog } from "radix-svelte";
import type { ResolvedProps } from "radix-svelte/internal/helpers";
import embedImage from '$assets/branding/suyu__Embed-Image.png';
let rootOpen: boolean;
let rootModal: boolean = true;
let portalContainer: HTMLElement | string;
let contentOpenAutoFocus: boolean = true;
let contentCloseAutoFocus: boolean = true;
let metadata = {
url: "https://suyu.dev",
title: "suyu - Open-source, non-profit Switch emulator",
description: "suyu is a familiar C++ based Nintendo Switch emulator with a focus on compatibility. Completely free and open-source, forever. Download it here.",
image: embedImage,
};
</script>
<svelte:head>
<title>suyu - Open-source, non-profit Switch emulator</title>
<title>{metadata.title}</title>
<meta name="description" content={metadata.description} />
<meta property="og:url" content={metadata.url} />
<meta property="og:title" content={metadata.title} />
<meta property="og:description" content={metadata.description} />
<meta property="og:image" content={metadata.image} />
<meta name="twitter:url" content={metadata.url} />
<meta name="twitter:title" content={metadata.title} />
<meta name="twitter:description" content={metadata.description} />
<meta name="twitter:image" content={metadata.image} />
<meta name="twitter:card" content="summary_large_image" />
</svelte:head>
<div
@ -39,8 +59,8 @@
suyu is the open-source, non-profit Switch emulator
</h1>
<p class="max-w-[36rem] text-lg leading-relaxed text-[#A6A5A7]">
suyu is a familiar C++ based Switch emulator with a focus on compatibility. Completely free and
open-source, forever.
suyu is a familiar C++ based Switch emulator with a focus on compatibility. Completely free
and open-source, forever.
</p>
<div class="flex flex-row gap-4">
<Dialog.Root bind:modal={rootModal} bind:open={rootOpen}>