feat(app): add canonical url

yjl9903 · Feb 2, 2024 · 79659df · 79659df
1 parent d3ae4e2
commit 79659df
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 6 deletions.
diff --git a/packages/app/src/layouts/Layout.astro b/packages/app/src/layouts/Layout.astro
@@ -1,5 +1,5 @@
 ---
-import { CF_BEACON, UMAMI_HOST, UMAMI_ID } from '~build/meta';
+import { APP_HOST, CF_BEACON, UMAMI_HOST, UMAMI_ID } from '~build/meta';
 
 import { pwaInfo } from 'virtual:pwa-info';
 import { ViewTransitions } from 'astro:transitions';
@@ -20,18 +20,21 @@ export interface Props {
   description?: string;
 
   timestamp?: Date;
+
+  canonicalURL?: string;
 }
 
 const {
   title,
-  description = 'Anime Garden 是動漫花園的第三方镜像站，動漫愛好者的自由交流平台。用户可以搜索最新的动画，也可以按照字幕组、发布时间、类型、标题、发布者等条件筛选和搜索自己感兴趣的动画。'
+  canonicalURL,
+  description = 'Anime Garden 是動漫花園的第三方镜像站，動漫愛好者的自由交流平台。用户可以搜索最新的动画，也可以按照标题、字幕组等条件筛选和搜索自己感兴趣的动画资源。'
 } = Astro.props;
 
 const url = Astro.url.pathname;
 const search = Astro.url.searchParams;
 
-const feed = `/feed.xml?filter=${generateFeed(Astro.url.searchParams)}`;
 const page = Astro.params.page ?? Astro.url.searchParams.get('page') ?? '1';
+const feed = `/feed.xml?filter=${generateFeed(Astro.url.searchParams)}`;
 const enableFeed = page === '1' && !Astro.url.pathname.startsWith('/detail/');
 
 const env = getRuntimeEnv(Astro.locals);
@@ -89,6 +92,7 @@ function followSearch(params: Record<string, string>) {
     <link rel="alternate icon" sizes="64x64" href="/favicon.ico" />
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png" />
     <link rel="mask-icon" color="#FFFFFF" href="/favicon.svg" />
+    {canonicalURL && <link rel="canonical" href={`https://${APP_HOST}${canonicalURL}`} />}
     <meta name="msapplication-TileColor" content="#FFFFFF" />
     <meta name="theme-color" content="#ffffff" />
     <script src="/src/pwa.ts"></script>

diff --git a/packages/app/src/pages/anime.astro b/packages/app/src/pages/anime.astro
@@ -4,7 +4,7 @@ import Layout from '../layouts/Layout.astro';
 import AnimePanel from '../components/Anime.astro';
 ---
 
-<Layout title="Recent Bangumis">
+<Layout title="Recent Bangumis" canonicalURL="/anime">
   <div class="mt-4vh w-full">
     <AnimePanel />
   </div>

diff --git a/packages/app/src/pages/detail/[provider]/[href].astro b/packages/app/src/pages/detail/[provider]/[href].astro
@@ -37,7 +37,7 @@ const schema = info
   : undefined;
 ---
 
-<Layout title={`${detail.title}`}>
+<Layout title={`${detail.title}`} canonicalURL={`/detail/${provider}/${href}`}>
   {info && <script type="application/ld+json" set:html={schema} />}
 
   <div class="detail mt-4vh w-full space-y-4">

diff --git a/packages/app/src/pages/index.astro b/packages/app/src/pages/index.astro
@@ -25,7 +25,7 @@ const { ok, resources, timestamp } = await fetchResources(
 );
 ---
 
-<Layout title="" timestamp={timestamp}>
+<Layout title="" timestamp={timestamp} canonicalURL="/">
   <div class="mt-4vh w-full">
     <div class="border-b pb-2 mb-2">
       <input type="radio" name="weekday" id="weekday-1" class="hidden" checked={Weekday === 0} />