Add description tag

Tibowl · Tibowl · commit 5a8e052e170e · 2022-01-21T16:14:37.000+01:00
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -33,6 +33,7 @@ export default function MyApp({ Component, pageProps, router }: AppProps) {
     <Head>
       <title>{router.pathname.substring(1).replace(/^\w/, w => w.toUpperCase())} | Hu Tao</title>
       <link rel="icon" href="/favicon.ico" />
+      <meta http-httpEquiv="content-language" content="en-us"></meta>
     </Head>
 
     <div className="w-full">
diff --git a/pages/artifacts/[artifact].tsx b/pages/artifacts/[artifact].tsx
@@ -16,16 +16,18 @@ interface Props {
 
 export default function ArtifactWebpage({ artifact, location, guides }: Props & { location: string }) {
   const color = getStarColor(Math.max(...(artifact.levels ?? [1])))
+  const desc = `The ${artifact.name} artifact set${artifact.artis?.length ?? 0 > 0 ?
+    ` consists of ${artifact.artis?.length} pieces and is available in ${joinMulti(artifact.levels?.map(l => `${l}`) ?? [])} star variants. \nIt also has` :
+    " has"} ${joinMulti(artifact.bonuses?.map(b => `a ${b.count} piece set bonus: "${clean(b.desc)}"`) ?? [])}.`
 
   return (
     <Main>
       <Head>
         <title>{artifact.name} | Hu Tao</title>
         <meta name="twitter:card" content="summary" />
         <meta property="og:title" content={`${artifact.name} | Hu Tao`} />
-        <meta property="og:description" content={`The ${artifact.name} artifact set${artifact.artis?.length ?? 0 > 0 ?
-          ` consists of ${artifact.artis?.length} pieces and is available in ${joinMulti(artifact.levels?.map(l => `${l}`) ?? [])} star variants. \nIt also has` :
-          " has"} ${joinMulti(artifact.bonuses?.map(b => `a ${b.count} piece set bonus: "${clean(b.desc)}"`) ?? [])}.`} />
+        <meta property="og:description" content={desc} />
+        <meta property="description" content={desc} />
         {artifact.artis?.[0]?.icon && <meta property="og:image" content={getIconPath(artifact.artis[0].icon)} />}
       </Head>
       <h2 className="font-semibold">
diff --git a/pages/artifacts/index.tsx b/pages/artifacts/index.tsx
@@ -18,13 +18,15 @@ export default function Artifacts(props: Props & { location: string }) {
 
   const [starFilter, setStarFilter] = useState(0)
 
+  const desc = `View set bonuses and description of the ${props.artifacts.length} different artifact sets in Genshin Impact.`
   return (
     <Main>
       <Head>
         <title>Artifacts | Hu Tao</title>
         <meta name="twitter:card" content="summary" />
         <meta property="og:title" content="Artifacts | Hu Tao" />
-        <meta property="og:description" content={`View set bonuses and description of the ${props.artifacts.length} different artifact sets in Genshin Impact.`} />
+        <meta property="og:description" content={desc} />
+        <meta property="description" content={desc} />
       </Head>
 
       <h1 className="text-5xl font-bold pb-2">
diff --git a/pages/characters/[char].tsx b/pages/characters/[char].tsx
@@ -35,6 +35,7 @@ export default function CharacterWebpage({ char, location, characterCurves, cost
         <meta name="twitter:card" content="summary" />
         <meta property="og:title" content={`${char.name} | Hu Tao`} />
         <meta property="og:description" content={getDescription(char, charElems, characterCurves)} />
+        <meta property="description" content={getDescription(char, charElems, characterCurves)} />
         {char.icon && <meta property="og:image" content={getIconPath(char.icon)} />}
       </Head>
       <h2 className="font-semibold">
diff --git a/pages/characters/index.tsx b/pages/characters/index.tsx
@@ -24,13 +24,15 @@ export default function Characters(props: Props & { location: string }) {
   const [elementFilter, setElementFilter] = useState(defaultElements)
   const [weaponFilter, setWeaponFilter] = useState(defaultWeapons)
 
+  const desc = `View talent/ascension material, constellations and more of the ${props.characters.length} different characters in Genshin Impact.`
   return (
     <Main>
       <Head>
         <title>Characters | Hu Tao</title>
         <meta name="twitter:card" content="summary" />
         <meta property="og:title" content="Characters | Hu Tao" />
-        <meta property="og:description" content={`View talent/ascension material, constellations and more of the ${props.characters.length} different characters in Genshin Impact.`} />
+        <meta property="og:description" content={desc} />
+        <meta property="description" content={desc} />
       </Head>
 
       <h1 className="text-5xl font-bold pb-2">
diff --git a/pages/enemies/[enemy].tsx b/pages/enemies/[enemy].tsx
@@ -19,13 +19,15 @@ interface Props {
 export default function EnemyWebpage({ enemy, location, guides }: Props & { location: string }) {
   const color = getStarColor(1)
 
+  const desc = `${enemy.name}${enemy.type ? ` (${enemy.type})` : ""}${enemy.kind ? ` is a ${enemy.kind}` : " is an enemy"} in Genshin Impact.${enemy.resistance ? " Click to find out their resistances!" : ""}`
   return (
     <Main>
       <Head>
         <title>{enemy.name} | Hu Tao</title>
         <meta name="twitter:card" content="summary" />
         <meta property="og:title" content={`${enemy.name} | Hu Tao`} />
-        <meta property="og:description" content={`${enemy.name}${enemy.type ? ` (${enemy.type})` : ""}${enemy.kind ? ` is a ${enemy.kind}` : " is an enemy"} in Genshin Impact.${enemy.resistance ? " Click to find out their resistances!" : ""}`} />
+        <meta property="og:description" content={desc} />
+        <meta property="description" content={desc} />
         {enemy.icon && <meta property="og:image" content={getIconPath(enemy.icon)} />}
       </Head>
       <h2 className="font-semibold">
diff --git a/pages/enemies/index.tsx b/pages/enemies/index.tsx
@@ -23,13 +23,15 @@ export default function Enemies(props: Props & { location: string }) {
   const [kindFilter, setKindFilter] = useState(defaultKinds)
   const [typeFilter, setTypeFilter] = useState(defaultTypes)
 
+  const desc = `View description, classification and resistances of the ${props.enemies.length} different enemies in Genshin Impact.`
   return (
     <Main>
       <Head>
         <title>Enemies | Hu Tao</title>
         <meta name="twitter:card" content="summary" />
         <meta property="og:title" content="Enemies | Hu Tao" />
-        <meta property="og:description" content={`View description, classification and resistances of the ${props.enemies.length} different enemies in Genshin Impact.`} />
+        <meta property="og:description" content={desc} />
+        <meta property="description" content={desc} />
       </Head>
 
       <h1 className="text-5xl font-bold pb-2">
diff --git a/pages/guides/[category].tsx b/pages/guides/[category].tsx
@@ -11,13 +11,15 @@ interface Props {
 }
 
 export default function CategoryWebpage({ guide, location }: Props & { location: string }) {
+  const desc = `View ${guide.pages.length} ${guide.name} guides`
   return (
     <Main>
       <Head>
         <title>{guide.name} | Hu Tao</title>
         <meta name="twitter:card" content="summary" />
         <meta property="og:title" content={`${guide.name} | Hu Tao`} />
-        <meta property="og:description" content={`View ${guide.pages.length} ${guide.name} guides`} />
+        <meta property="og:description" content={desc} />
+        <meta property="description" content={desc} />
       </Head>
       <h2 className="font-semibold">
         <FormattedLink href="/guides/" location={location} className="font-semibold text-lg">
diff --git a/pages/guides/[category]/[guide].tsx b/pages/guides/[category]/[guide].tsx
@@ -19,13 +19,15 @@ export default function GuideWebpage({ guide, pageNumber, location }: Props & {
   const nextPage = guide.pages[pageNumber + 1]
   const prevPage = guide.pages[pageNumber - 1]
 
+  const desc = `View ${removeBrackets(page.name)} guide by ${page.credits}${page.url && page.url.startsWith("https://youtu.be/") ? " (video available!)" : ""}. \n${page.desc ? clean(page.desc) : ""}`.trim()
   return (
     <Main>
       <Head>
         <title>{page.name} | Hu Tao</title>
         <meta name="twitter:card" content={page.img ? "summary_large_image" : "summary"} />
         <meta property="og:title" content={`${page.name} | Hu Tao`} />
-        <meta property="og:description" content={`View ${page.name} guide by ${page.credits}${page.url && page.url.startsWith("https://youtu.be/") ? " (video available!)" : ""}. \n${page.desc ? clean(page.desc) : ""}`.trim()} />
+        <meta property="og:description" content={desc} />
+        <meta property="description" content={desc} />
         {page.img && <meta property="og:image" content={getIconPath(page.img)} />}
       </Head>
       <h2 className="font-semibold">
diff --git a/pages/guides/index.tsx b/pages/guides/index.tsx
@@ -10,13 +10,15 @@ interface Props {
 }
 
 export default function Guides(props: Props & { location: string }) {
+  const desc = "Click to find our currently available guides and routes for Genshin Impact."
   return (
     <Main>
       <Head>
         <title>Guides | Hu Tao</title>
         <meta name="twitter:card" content="summary" />
         <meta property="og:title" content="Guides | Hu Tao" />
-        <meta property="og:description" content="Click to find our currently available guides and routes for Genshin Impact." />
+        <meta property="og:description" content={desc} />
+        <meta property="description" content={desc} />
       </Head>
 
       <h1 className="text-5xl font-bold pb-2">
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -11,13 +11,15 @@ import person from "../public/person.svg"
 import { weapons } from "../utils/utils"
 
 export default function Home({ location }: { location: string }) {
+  const desc = "Genshin Impact database and tools, available as a website and Discord bot."
   return (
     <main>
       <Head>
         <title>Hu Tao</title>
         <meta name="twitter:card" content="summary" />
         <meta property="og:title" content="Hu Tao" />
-        <meta property="og:description" content="Genshin Impact database and tools, available as a website and Discord bot." />
+        <meta property="og:description" content={desc} />
+        <meta property="description" content={desc} />
       </Head>
 
       <div className="flex flex-col items-center justify-center w-full flex-1 text-center">
diff --git a/pages/materials/[material].tsx b/pages/materials/[material].tsx
@@ -34,13 +34,15 @@ export default function MaterialWebpage({ mat, location, guides, usedBy }: Props
   if (usedBy.weaponAscension.length > 0)
     usedByDesc.push(`Used by ${joinMulti(usedBy.weaponAscension.map(x => x.name))} weapon ascensions.`)
 
+  const desc = `${mat.name} is a ${mat.stars ? `${mat.stars} star ` : ""}${mat.type}. \n${usedByDesc.join("\n")}\n${mat.desc ? clean(mat.desc ?? "") : ""}`.trim()
   return (
     <Main>
       <Head>
         <title>{mat.name} | Hu Tao</title>
         <meta name="twitter:card" content="summary" />
         <meta property="og:title" content={`${mat.name} | Hu Tao`} />
-        <meta property="og:description" content={`${mat.name} is a ${mat.stars ? `${mat.stars} star ` : ""}${mat.type}. \n${usedByDesc.join("\n")}\n${mat.desc ? clean(mat.desc ?? "") : ""}`.trim()} />
+        <meta property="og:description" content={desc} />
+        <meta property="description" content={desc} />
         {mat.icon && <meta property="og:image" content={getIconPath(mat.icon)} />}
       </Head>
       <h2 className="font-semibold">
diff --git a/pages/materials/index.tsx b/pages/materials/index.tsx
@@ -49,13 +49,15 @@ export default function Materials(props: Props & { location: string }) {
   const [categoryFilter, setCategoryFilter] = useState(defaultCategories)
   const [typeFilter, setTypeFilter] = useState(defaultTypes)
 
+  const desc = `View uses, sources and description of the ${props.materials.length} different materials in Genshin Impact.`
   return (
     <Main>
       <Head>
         <title>Materials | Hu Tao</title>
         <meta name="twitter:card" content="summary" />
         <meta property="og:title" content="Materials | Hu Tao" />
-        <meta property="og:description" content={`View uses, sources and description of the ${props.materials.length} different materials in Genshin Impact.`} />
+        <meta property="og:description" content={desc} />
+        <meta property="description" content={desc} />
       </Head>
 
       <h1 className="text-5xl font-bold pb-2">
diff --git a/pages/tools/index.tsx b/pages/tools/index.tsx
@@ -3,13 +3,15 @@ import FormattedLink from "../../components/FormattedLink"
 import Main from "../../components/Main"
 
 export default function Tools({ location }: { location: string }) {
+  const desc = "Some tools for Genshin Impact."
   return (
     <Main>
       <Head>
         <title>Tools | Hu Tao</title>
         <meta name="twitter:card" content="summary" />
         <meta property="og:title" content="Tools | Hu Tao" />
-        <meta property="og:description" content="Some tools for Genshin Impact." />
+        <meta property="og:description" content={desc} />
+        <meta property="description" content={desc} />
       </Head>
 
       <h1 className="text-5xl font-bold pb-2">
diff --git a/pages/tools/reminders.tsx b/pages/tools/reminders.tsx
@@ -66,13 +66,15 @@ export default class Reminders extends Component<Props, { reminders: Reminder[],
     const { user } = this.props
     const { reminders } = this.state
 
+    const desc = "Change, add and remove your Discord reminders."
     return (
       <Main>
         <Head>
           <title>Reminders | Hu Tao</title>
           <meta name="twitter:card" content="summary" />
           <meta property="og:title" content="Reminders | Hu Tao" />
-          <meta property="og:description" content="Change, add and remove your Discord reminders." />
+          <meta property="og:description" content={desc} />
+          <meta property="description" content={desc} />
         </Head>
         <h1 className="text-5xl font-bold">
           Reminders
diff --git a/pages/weapons/[weapon].tsx b/pages/weapons/[weapon].tsx
@@ -25,13 +25,15 @@ export default function WeaponWebpage({ weapon, weaponCurves, costTemplates, loc
   const color = getStarColor(weapon.stars ?? 1)
 
 
+  const desc = getDescription(weapon, weaponCurves)
   return (
     <Main>
       <Head>
         <title>{weapon.name} | Hu Tao</title>
         <meta name="twitter:card" content="summary" />
         <meta property="og:title" content={`${weapon.name} | Hu Tao`} />
-        <meta property="og:description" content={getDescription(weapon, weaponCurves)} />
+        <meta property="og:description" content={desc} />
+        <meta property="description" content={desc} />
         {weapon.icon && <meta property="og:image" content={getIconPath(weapon.icon)} />}
       </Head>
       <h2 className="font-semibold">
diff --git a/pages/weapons/index.tsx b/pages/weapons/index.tsx
@@ -22,13 +22,15 @@ export default function Weapons(props: Props & { location: string }) {
   const [starFilter, setStarFilter] = useState(0)
   const [weaponFilter, setWeaponFilter] = useState(defaultWeapons)
 
+  const desc = `View stats, refinements and description of the ${props.weapons.length} different weapons in Genshin Impact.`
   return (
     <Main>
       <Head>
         <title>Weapons | Hu Tao</title>
         <meta name="twitter:card" content="summary" />
         <meta property="og:title" content="Weapons | Hu Tao" />
-        <meta property="og:description" content={`View stats, refinements and description of the ${props.weapons.length} different weapons in Genshin Impact.`} />
+        <meta property="og:description" content={desc} />
+        <meta property="description" content={desc} />
       </Head>
 
       <h1 className="text-5xl font-bold pb-2">
