website: add SEO metadata

This commit is contained in:
Kingkor Roy Tirtho 2025-08-15 20:43:12 +06:00
parent dbba55606b
commit 089a3445a1
4 changed files with 40 additions and 7 deletions

View File

@ -14,7 +14,7 @@ const pathname = Astro.url.pathname;
<div class="flex items-center gap-2">
{
pathname.startsWith("/docs") ? (
<div class="h-10 w-10" />
<div class="h-10 w-10 md:hidden" />
) : (
<SidebarButton client:only />
)

View File

@ -2,6 +2,17 @@
import { FaGithub } from "react-icons/fa6";
import "../styles/global.css";
import TopBar from "~/components/navigation/TopBar.astro";
interface Props {
metadata?: {
title?: string;
description?: string;
keywords?: string;
author?: string;
};
}
const { metadata } = Astro.props as Props;
---
<!doctype html>
@ -11,16 +22,33 @@ import TopBar from "~/components/navigation/TopBar.astro";
<meta name="viewport" content="width=device-width" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<meta name="generator" content={Astro.generator} />
<title>Spotube</title>
<title>{metadata?.title || "Spotube"}</title>
<meta
name="description"
content="An Open Source Music Client for every platform"
content={metadata?.description ||
"A cross-platform extensible open-source music streaming platform"}
/>
<meta
name="keywords"
content="music, client, open source, music, streaming"
content={metadata?.keywords ||
"music, client, open source, music, streaming"}
/>
<meta name="author" content="KRTirtho" />
<meta name="author" content={metadata?.author || "KRTirtho"} />
<meta property="og:image" content="/images/spotube-logo.png" />
<meta property="og:image:alt" content="Spotube Logo" />
<meta property="og:image:type" content="image/png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={metadata?.title || "Spotube"} />
<meta
name="twitter:description"
content={metadata?.description ||
"A cross-platform extensible open-source music streaming platform"}
/>
<meta name="twitter:image" content="/images/spotube-logo.png" />
<meta name="twitter:creator" content={metadata?.author || "KRTirtho"} />
<meta name="twitter:site" content="@KRTirtho" />
<meta name="robots" content="index, follow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#1DB954" />

View File

@ -30,7 +30,12 @@ if (page.id.startsWith("components/") || page.id.startsWith("integrations/")) {
}
---
<RootLayout>
<RootLayout
metadata={{
title: `Docs | ${page.data.title}`,
description: page.data.description,
}}
>
<Drawer class="fixed top-3 left-2 z-50 md:hidden">
<DocSideBar />
</Drawer>

View File

@ -14,7 +14,7 @@ import { ADS_SLOTS } from "~/collections/app";
<h1 class="h1">Spotube</h1>
<br />
<h3 class="h3">
A cross-platform Extensible open-source Music Streaming platform
A cross-platform extensible open-source music streaming platform
<div class="inline-flex gap-3 items-center">
<FaAndroid className="inline text-[#3DDC84]" />
<FaWindows className="inline text-[#00A2F0]" />