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"> <div class="flex items-center gap-2">
{ {
pathname.startsWith("/docs") ? ( pathname.startsWith("/docs") ? (
<div class="h-10 w-10" /> <div class="h-10 w-10 md:hidden" />
) : ( ) : (
<SidebarButton client:only /> <SidebarButton client:only />
) )

View File

@ -2,6 +2,17 @@
import { FaGithub } from "react-icons/fa6"; import { FaGithub } from "react-icons/fa6";
import "../styles/global.css"; import "../styles/global.css";
import TopBar from "~/components/navigation/TopBar.astro"; 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> <!doctype html>
@ -11,16 +22,33 @@ import TopBar from "~/components/navigation/TopBar.astro";
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" /> <link rel="icon" href="/favicon.ico" type="image/x-icon" />
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<title>Spotube</title> <title>{metadata?.title || "Spotube"}</title>
<meta <meta
name="description" name="description"
content="An Open Source Music Client for every platform" content={metadata?.description ||
"A cross-platform extensible open-source music streaming platform"}
/> />
<meta <meta
name="keywords" 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="robots" content="index, follow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#1DB954" /> <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"> <Drawer class="fixed top-3 left-2 z-50 md:hidden">
<DocSideBar /> <DocSideBar />
</Drawer> </Drawer>

View File

@ -14,7 +14,7 @@ import { ADS_SLOTS } from "~/collections/app";
<h1 class="h1">Spotube</h1> <h1 class="h1">Spotube</h1>
<br /> <br />
<h3 class="h3"> <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"> <div class="inline-flex gap-3 items-center">
<FaAndroid className="inline text-[#3DDC84]" /> <FaAndroid className="inline text-[#3DDC84]" />
<FaWindows className="inline text-[#00A2F0]" /> <FaWindows className="inline text-[#00A2F0]" />