feat: Add more meta tags for SEO

openRin · Jun 8, 2024 · 554af74 · 554af74
1 parent 4defbd8
commit 554af74
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 6 deletions.
diff --git a/client/src/page/feeds.tsx b/client/src/page/feeds.tsx
@@ -1,10 +1,12 @@
 import { useContext, useEffect, useRef, useState } from "react"
+import { Helmet } from 'react-helmet'
 import { Link, useSearch } from "wouter"
 import { FeedCard } from "../components/feed_card"
 import { Waiting } from "../components/loading"
 import { client } from "../main"
 import { ProfileContext } from "../state/profile"
 import { headersWithAuth } from "../utils/auth"
+import { siteName } from "../utils/constants"
 
 function tryInt(defaultValue: number, ...args: (string | number | undefined | null)[]): number {
     for (const v of args) {
@@ -74,8 +76,16 @@ export function FeedsPage() {
     }, [query.get("page"), query.get("type")])
     return (
         <>
+            <Helmet>
+                <title>{`${"文章"} - ${process.env.NAME}`}</title>
+                <meta property="og:site_name" content={siteName} />
+                <meta property="og:title" content={"文章"} />
+                <meta property="og:image" content={process.env.AVATAR} />
+                <meta property="og:type" content="article" />
+                <meta property="og:url" content={document.URL} />
+            </Helmet>
             <Waiting wait={feeds[listState].size > 0 || status === 'idle'}>
-                <div className="w-full flex flex-col justify-center items-center mb-8">
+                <main className="w-full flex flex-col justify-center items-center mb-8">
                     <div className="wauto text-start text-black dark:text-white p-4 text-4xl font-bold">
                         <p>
                             {listState === 'draft' ? "草稿箱" : listState === 'normal' ? "文章" : "未列出"}
@@ -116,7 +126,7 @@ export function FeedsPage() {
                             }
                         </div>
                     </Waiting>
-                </div>
+                </main>
             </Waiting>
         </>
     )

diff --git a/client/src/page/friends.tsx b/client/src/page/friends.tsx
@@ -5,6 +5,8 @@ import { client } from "../main"
 import { ProfileContext } from "../state/profile"
 import { shuffleArray } from "../utils/array"
 import { headersWithAuth } from "../utils/auth"
+import { Helmet } from 'react-helmet'
+import { siteName } from "../utils/constants"
 
 
 type FriendItem = {
@@ -79,8 +81,16 @@ export function FriendsPage() {
     const friends_unavaliable = friends?.filter(({ health }) => health.length > 0) || []
     shuffleArray(friends_unavaliable)
     return (<>
+        <Helmet>
+            <title>{`${"朋友们"} - ${process.env.NAME}`}</title>
+            <meta property="og:site_name" content={siteName} />
+            <meta property="og:title" content={"朋友们"} />
+            <meta property="og:image" content={process.env.AVATAR} />
+            <meta property="og:type" content="article" />
+            <meta property="og:url" content={document.URL} />
+        </Helmet>
         <Waiting wait={friends}>
-            <div className="w-full flex flex-col justify-center items-center mb-8 t-primary">
+            <main className="w-full flex flex-col justify-center items-center mb-8 t-primary">
                 {friends_avaliable.length > 0 &&
                     <>
                         <div className="wauto text-start py-4 text-4xl font-bold">
@@ -130,7 +140,7 @@ export function FriendsPage() {
                         </div>
                     </div>
                 }
-            </div>
+            </main>
         </Waiting>
     </>)
 }

diff --git a/client/src/page/timeline.tsx b/client/src/page/timeline.tsx
@@ -1,8 +1,10 @@
 import { useEffect, useRef, useState } from "react"
+import { Helmet } from 'react-helmet'
 import { Link } from "wouter"
 import { Waiting } from "../components/loading"
 import { client } from "../main"
 import { headersWithAuth } from "../utils/auth"
+import { siteName } from "../utils/constants"
 
 export function TimelinePage() {
     const [feeds, setFeeds] = useState<Partial<Record<number, { id: number; title: string | null; createdAt: Date; }[]>>>()
@@ -26,8 +28,16 @@ export function TimelinePage() {
     }, [])
     return (
         <>
+            <Helmet>
+                <title>{`${"时间线"} - ${process.env.NAME}`}</title>
+                <meta property="og:site_name" content={siteName} />
+                <meta property="og:title" content={"时间线"} />
+                <meta property="og:image" content={process.env.AVATAR} />
+                <meta property="og:type" content="article" />
+                <meta property="og:url" content={document.URL} />
+            </Helmet>
             <Waiting wait={feeds}>
-                <div className="w-full flex flex-col justify-center items-center mb-8 px-4">
+                <main className="w-full flex flex-col justify-center items-center mb-8 px-4">
                     <div className="wauto text-start text-black dark:text-white py-4 text-4xl font-bold">
                         <p>
                             时间轴
@@ -53,7 +63,7 @@ export function TimelinePage() {
                             </div>
                         </div>
                     ))}
-                </div>
+                </main>
             </Waiting>
         </>
     )

diff --git a/client/src/page/writing.tsx b/client/src/page/writing.tsx
@@ -6,6 +6,8 @@ import { Checkbox, Input } from '../components/input';
 import { Padding } from '../components/padding';
 import { client } from '../main';
 import { headersWithAuth } from '../utils/auth';
+import { Helmet } from 'react-helmet'
+import { siteName } from "../utils/constants";
 
 async function publish({ title, alias, listed, content, summary, tags, draft }: { title: string, listed: boolean, content: string, summary: string, tags: string[], draft: boolean, alias?: string }) {
   const { data, error } = await client.feed.index.post({
@@ -177,6 +179,14 @@ export function WritingPage({ id }: { id?: number }) {
 
   return (
     <Padding>
+      <Helmet>
+        <title>{`${"写作"} - ${process.env.NAME}`}</title>
+        <meta property="og:site_name" content={siteName} />
+        <meta property="og:title" content={"写作"} />
+        <meta property="og:image" content={process.env.AVATAR} />
+        <meta property="og:type" content="article" />
+        <meta property="og:url" content={document.URL} />
+      </Helmet>
       <div onDragOver={e => { e.preventDefault() }} onDragLeave={e => { e.preventDefault() }} onDrop={e => {
         e.preventDefault()
         for (let i = 0; i < e.dataTransfer.files.length; i++) {