Implement v3 Docs SEO and Open Graph (#3160)

sites/next.skeleton.dev/src/components/homepage/HomeDesignSystem.svelte

@@ -63,7 +63,12 @@
 				</button>
 			{/each}
 		</nav>
-		<p class="opacity-60">{steps[state].desc}</p>
+		<div class="space-y-4">
+			<p class="opacity-60">{steps[state].desc}</p>
+			{#if state === 0}
+				<a href="/figma" class="btn preset-tonal w-full">Learn More &rarr;</a>
+			{/if}
+		</div>
 	</div>
 	<!-- Carousel -->
 	<div class="card bg-noise preset-filled-primary-500 aspect-video flex justify-center items-center overflow-hidden shadow-xl">

sites/next.skeleton.dev/src/components/homepage/HomeEvenMore.astro

@@ -24,39 +24,39 @@ import {
 			<div class="w-full h-full flex flex-col justify-end space-y-2">
 				<IconFramework class:list="size-8 opacity-60" />
 				<h3 class="h4">Framework Agnostic</h3>
-				<p class="opacity-60">Core features require only a single single depdendency &mdash; Tailwind CSS.</p>
+				<p class="opacity-60">Core features require only a single depdendency for themes and utility classes &mdash; Tailwind CSS.</p>
 			</div>
 		</div>
 		<!-- 2 -->
 		<div class="card preset-outlined-surface-200-800 bg-surface-50-950 p-10">
 			<div class="w-full h-full flex flex-col justify-end space-y-2">
 				<IconZag class:list="size-8 opacity-60" />
-				<h3 class="h4">Zag.js Components</h3>
-				<p class="opacity-60">A foundation for cross-framework components. Standardizing features and accessessibly.</p>
+				<h3 class="h4">Built with Zag.js</h3>
+				<p class="opacity-60">Enables cross-framework components with standardized features and accessibility.</p>
 			</div>
 		</div>
 		<!-- 3 -->
 		<div class="card preset-outlined-surface-200-800 bg-surface-50-950 p-10">
 			<div class="w-full h-full flex flex-col justify-end space-y-2">
 				<IconIntegrations class:list="size-8 opacity-60" />
 				<h3 class="h4">Integrations</h3>
-				<p class="opacity-60">Extend Skeleton with easy to follow guides for popovers, code blocks, and more.</p>
+				<p class="opacity-60">Easily extend Skeleton using turnkey guides for popovers, code blocks, and more.</p>
 			</div>
 		</div>
 		<!-- 4 -->
 		<div class="card preset-outlined-surface-200-800 bg-surface-50-950 p-10">
 			<div class="w-full h-full flex flex-col justify-end space-y-2">
 				<IconDesign class:list="size-8 opacity-60" />
 				<h3 class="h4">Adaptive Design</h3>
-				<p class="opacity-60">Utilize themes as the foundation of your design to replicate any visual aesthetic.</p>
+				<p class="opacity-60">Utilize themes as the foundation for implementing any visual aesthetic.</p>
 			</div>
 		</div>
 		<!-- 5 -->
 		<div class="card preset-outlined-surface-200-800 bg-surface-50-950 p-10">
 			<div class="w-full h-full flex flex-col justify-end space-y-2">
 				<IconDarkMode class:list="size-8 opacity-60" />
 				<h3 class="h4">Dark Mode</h3>
-				<p class="opacity-60">Skeleton themes supports Tailwind's dark mode mechanisms out of the box.</p>
+				<p class="opacity-60">Full support for Tailwind's dark mode mechanisms out of the box.</p>
 			</div>
 		</div>
 		<!-- 6 -->

sites/next.skeleton.dev/src/components/homepage/HomePlayground.astro

@@ -7,7 +7,7 @@ import { Ellipsis as IconEllipsis } from 'lucide-react';
 	<!-- Text -->
 	<div class="self-center space-y-1">
 		<h2 class="h2">Try it Live.</h2>
-		<p class="xl:text-balance xl:max-w-96">Test drive Skeleton within your browser for each modern web framework.</p>
+		<p class="xl:text-balance xl:max-w-96">Test drive Skeleton directly in your browser for these web frameworks.</p>
 		<p class="pt-4 text-xs opacity-50">Functional components limited to <u>React</u> and <u>Svelte</u>.</p>
 	</div>
 	<!-- Options -->

sites/next.skeleton.dev/src/components/homepage/HomeSponsors.astro

@@ -4,8 +4,8 @@
 		<div class="space-y-2">
 			<h2 class="h2 text-balance">Sponsor Us</h2>
 			<p class="opacity-60">
-				Projects like Skeleton exist through the generosity of our wonderful community. Help fund the project, while receiving fun
-				incentives in return. Available on the following services.
+				Projects like Skeleton exist through the generosity of our community. Help fund the project, while receiving fun incentives in
+				return. Available on the following services.
 			</p>
 		</div>
 	</div>

sites/next.skeleton.dev/src/layouts/LayoutRoot.astro

@@ -1,25 +1,59 @@
 ---
 import '@styles/app.css';
+import OpenGraphImage from '@images/meta/opengraph.png';
 
 interface Props {
 	title?: string;
+	description?: string;
 	classList?: string;
 }
 
-const { title, classList } = Astro.props satisfies Props;
+const { title, description, classList } = Astro.props satisfies Props;
 
-const pageTitle = `${title ? title + ' - ' : ''}Skeleton`;
+// Format meta tag data
+const meta = {
+	title: `${title ? title + ' - ' : ''}Skeleton`,
+	description: description ? description : 'Skeleton is an adaptive design system powered by Tailwind CSS.',
+	image: OpenGraphImage.src
+};
 ---
 
 <!doctype html>
 <html lang="en" class="dark">
 	<head>
+		<title>{meta.title}</title>
+		<link rel="icon" type="image/png" href="/favicon.png" />
+		<!-- Meta Tags -->
 		<meta charset="UTF-8" />
-		<meta name="description" content="Astro description" />
 		<meta name="viewport" content="width=device-width" />
-		<link rel="icon" type="image/png" href="/favicon.png" />
 		<meta name="generator" content={Astro.generator} />
-		<title>{pageTitle}</title>
+		<meta name="title" content={meta.title} />
+		<meta name="description" content={meta.description} />
+		<meta
+			name="keywords"
+			content="design system, tailwind, tailwind css, web, ui, components, svelte, sveltekit, react, next.js, vue, nuxt, solid, solidstart, astro, vite, reactive, accessibility, typescript, css, open source, adaptive"
+		/>
+		<meta name="theme-color" content="#111111" />
+		<meta name="author" content="Skeleton Labs" />
+		<!-- Open Graph - https://ogp.me/ -->
+		<meta property="og:site_name" content="Skeleton" />
+		<meta property="og:type" content="website" />
+		<meta property="og:url" content={`https://www.skeleton.dev${Astro.url.pathname}`} />
+		<meta property="og:locale" content="en_US" />
+		<meta property="og:title" content={meta.title} />
+		<meta property="og:description" content={meta.description} />
+		<meta property="og:image" content={meta.image} />
+		<meta property="og:image:secure_url" content={meta.image} />
+		<meta property="og:image:type" content="image/jpg" />
+		<meta property="og:image:width" content="800" />
+		<meta property="og:image:height" content="400" />
+		<!-- Open Graph: Twitter -->
+		<meta name="twitter:card" content="summary" />
+		<meta name="twitter:site" content="@SkeletonUI" />
+		<meta name="twitter:creator" content="@SkeletonUI" />
+		<meta name="twitter:title" content={meta.title} />
+		<meta name="twitter:description" content={meta.description} />
+		<meta name="twitter:image" content={meta.image} />
 		<!-- Analytics -->
 		<script
 			type="text/partytown"

sites/next.skeleton.dev/src/pages/404.astro

@@ -5,6 +5,8 @@ import LayoutRoot from '@layouts/LayoutRoot.astro';
 import Header from '@components/docs/Header.astro';
 
 const layoutProps = {
+	title: 'Page Not Found',
+	description: 'Sorry, this page does not appear to exist.',
 	classList: 'space-y-10'
 };
 ---

sites/next.skeleton.dev/src/pages/docs/[...slug]/index.astro

@@ -30,6 +30,6 @@ if (meta !== undefined) {
 }
 ---
 
-<LayoutRoot>
+<LayoutRoot title={entry.data.title} description={entry.data.description}>
 	<Content />
 </LayoutRoot>

sites/next.skeleton.dev/src/pages/figma/index.astro

@@ -22,7 +22,10 @@ import {
 	MessageCircle as IconMessage
 } from 'lucide-react';
 
-const layoutProps = {};
+const layoutProps = {
+	title: 'Figma UI Kit',
+	description: 'Learn more about the Figma UI Kit for Skeleton.'
+};
 ---
 
 <!-- Floating Button -->

sites/next.skeleton.dev/src/pages/index.astro

@@ -14,7 +14,10 @@ import HomeMetrics from '@components/homepage/HomeMetrics.astro';
 import HomeSponsors from '@components/homepage/HomeSponsors.astro';
 import HomeBottomCta from '@components/homepage/HomeBottomCta.astro';
 // Props
-const layoutProps = { classList: '' };
+const layoutProps = {
+	title: 'Welcome',
+	classList: ''
+};
 ---
 
 <LayoutRoot {...layoutProps}>

sites/next.skeleton.dev/src/pages/news/index.astro

@@ -7,6 +7,8 @@ import Footer from '@components/docs/Footer.astro';
 import BlueSkyFeed from '@components/docs/BlueskyFeed.svelte';
 
 const layoutProps = {
+	title: 'News',
+	description: 'Stay up to date with the latest news about Skeleton.',
 	classList: ''
 };
 ---