Improve SEO

public/locales/en-US/common.json

@@ -21,15 +21,18 @@
     "stigmata": "Stigmata",
     "weapons": "Weapons",
     "elfs": "ELFs",
-    "versions": "Versions"
+    "versions": "Versions",
+    "description": "Unofficial Honkai 3rd Wiki"
   },
   "battlesuits-list": {
     "heading": "Battlesuits",
+    "description": "Battlesuit list of Honkai 3rd",
     "filters": "Filters",
     "filter-by-features": "Filter by Features",
     "filter-by-valkyries": "Filter by Valkyries"
   },
   "battlesuit-show": {
+    "battlesuit": "battlesuit",
     "leader": "Leader",
     "passive": "Passive",
     "evasion": "Evasion",
@@ -39,19 +42,24 @@
     "sp-skill": "SP Skill"
   },
   "stigmata-list": {
+    "description": "Stigmata list of Honkai 3rd",
     "stigmata": "Stigmata",
     "set-list": "Set List"
   },
   "stigmata-show": {
+    "stigmata": "Stigmata",
+    "stigmata-set": "Stigmata Set",
     "top": "Top",
     "mid": "Mid",
     "bot": "Bot"
   },
   "weapons-list": {
+    "description": "Weapon list of Honkai 3rd",
     "weapons": "Weapons",
     "filter-by-category": "Filter by Category"
   },
   "weapons-show": {
+    "weapon": "Weapon",
     "pistol": "Pistol",
     "cannon": "Cannon",
     "katana": "Katana",
@@ -63,15 +71,19 @@
     "bow": "Bow"
   },
   "elfs-list": {
+    "description": "ELF list of Honkai 3rd",
     "elfs": "ELFs"
   },
   "elfs-show": {
+    "elf": "ELF",
     "passive": "Passive",
     "basic": "Basic",
     "ultimate": "Ultimate",
     "team": "Team"
   },
   "versions": {
+    "version": "Version",
+    "list-page-description": "Version info list of Honkai 3rd",
     "all-versions": "All Versions",
     "previous": "Previous Version",
     "next": "Next Version",

public/locales/ko-KR/common.json

@@ -5,7 +5,7 @@
     "battlesuits": "발키리",
     "weapons": "무기",
     "stigmata": "성흔",
-    "elfs": "무장인형"
+    "elfs": "인형"
   },
   "breadcrumb": {
     "honkai-3rd": "붕괴 3rd",
@@ -15,16 +15,19 @@
     "mid": "(중)",
     "bot": "(하)",
     "weapons": "무기",
-    "elfs": "무장인형",
-    "versions": "업데이트"
+    "elfs": "인형",
+    "versions": "업데이트",
+    "description": "비공식 붕괴 3rd 위키"
   },
   "battlesuits-list": {
     "heading": "발키리",
+    "description": "붕괴 3rd 발키리 목록",
     "filters": "필터",
     "filter-by-features": "특성 필터",
     "filter-by-valkyries": "발키리 필터"
   },
   "battlesuit-show": {
+    "battlesuit": "발키리",
     "leader": "리더 스킬",
     "passive": "패시브 스킬",
     "evasion": "회피",
@@ -34,19 +37,24 @@
     "sp-skill": "SP 스킬"
   },
   "stigmata-list": {
+    "description": "붕괴 3rd 성흔 목록",
     "stigmata": "성흔",
     "set-list": "세트 일람"
   },
   "stigmata-show": {
+    "stigmata": "성흔",
+    "stigmata-set": "성흔 세트",
     "top": "(상)",
     "mid": "(중)",
     "bot": "(하)"
   },
   "weapons-list": {
+    "description": "붕괴 3rd 무기 목록",
     "weapons": "무기",
     "filter-by-category": "카테고리 필터"
   },
   "weapons-show": {
+    "weapon": "무기",
     "pistol": "쌍권총",
     "cannon": "대포",
     "katana": "태도",
@@ -58,15 +66,19 @@
     "bow": "활"
   },
   "elfs-list": {
-    "elfs": "무장인형"
+    "description": "붕괴 3rd 인형 목록",
+    "elfs": "인형"
   },
   "elfs-show": {
+    "elf": "인형",
     "passive": "패시브",
     "basic": "기본 공격",
     "ultimate": "필살기",
     "team": "팀"
   },
   "versions": {
+    "version": "업데이트",
+    "list-page-description": "붕괴 3rd 업데이트 정보 목록",
     "all-versions": "모든 업데이트",
     "previous": "이전 버전",
     "next": "다음 버전",

src/components/atoms/Head.tsx

@@ -0,0 +1,26 @@
+import NextHead from 'next/head'
+
+interface HeadProps {
+  title: string
+  description?: string
+}
+
+const Head = ({ title, description }: HeadProps) => {
+  return (
+    <NextHead>
+      <title>{title}</title>
+      <meta
+        name='description'
+        content={
+          description != null
+            ? description
+            : 'Unofficial Honkai3rd/Genshin Wiki'
+        }
+      />
+      <meta property='og:title' content={title} key='title' />
+      <meta property='og:description' content={description} key='description' />
+    </NextHead>
+  )
+}
+
+export default Head

src/components/pages/SingleStigmataPage.tsx

@@ -9,6 +9,7 @@ import Honkai3rdNavigator from '../../components/organisms/Honkai3rdNavigator'
 import SecondaryLabel from '../atoms/SecondaryLabel'
 import { useRouter } from 'next/router'
 import { translate, useTranslation } from '../../lib/i18n'
+import Head from '../atoms/Head'
 
 export interface SingleStigmataPageProps {
   type: 'single'
@@ -41,6 +42,17 @@ const SingleStigmataPage = ({
 
   return (
     <Box>
+      <Head
+        title={`${t('breadcrumb.honkai-3rd')}: ${stigmataName} - Abyss Lab`}
+        description={`${t('breadcrumb.honkai-3rd')} ${t(
+          'stigmata-show.stigmata'
+        )} /
+        ${'⭐'.repeat(stigmataData.rarity)} / ${t(
+          `stigmata-show.${stigmataData.type}`
+        )} / HP : ${stigmataData.hp} / ATK : ${stigmataData.atk} / DEF : ${
+          stigmataData.def
+        } / CRT : ${stigmataData.crt}`}
+      />
       <Honkai3rdNavigator />
       <Box p={3}>
         <Breadcrumb

src/components/pages/StigmataSetPage.tsx

@@ -9,6 +9,7 @@ import { StigmataData, StigmataSet } from '../../lib/honkai3rd/stigmata'
 import SecondaryLabel from '../atoms/SecondaryLabel'
 import { translate, useTranslation } from '../../lib/i18n'
 import { useRouter } from 'next/router'
+import Head from '../atoms/Head'
 
 export interface StigmataSetProps {
   type: 'set'
@@ -36,6 +37,14 @@ const StigmataSetPage = ({
 
   return (
     <Box>
+      <Head
+        title={`${t('breadcrumb.honkai-3rd')}: ${stigmataSetName} ${t(
+          'stigmata-show.stigmata-set'
+        )} - Abyss Lab`}
+        description={`${t('breadcrumb.honkai-3rd')} ${t(
+          'stigmata-show.stigmata-set'
+        )} / ${'⭐'.repeat(stigmataSet.rarity)} / ${stigmataSetAltName}`}
+      />
       <Honkai3rdNavigator />
 
       <Box p={3}>

src/pages/honkai3rd/battlesuits/[battlesuitId].tsx

@@ -13,7 +13,10 @@ import Breadcrumb from '../../../components/organisms/Breadcrumb'
 import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
 import {
   BattlesuitData,
+  battlesuitFeatures,
   BattlesuitSkillGroup,
+  battlesuitTypes,
+  valkyries,
 } from '../../../lib/honkai3rd/battlesuits'
 import { generateI18NPaths, getI18NProps } from '../../../server/i18n'
 import {
@@ -22,6 +25,8 @@ import {
 } from '../../../server/data/honkai3rd/battlesuits'
 import { translate, useTranslation } from '../../../lib/i18n'
 import { useRouter } from 'next/router'
+import Head from '../../../components/atoms/Head'
+import { capitalize } from '../../../lib/string'
 
 interface BattlesuitShowPageProps {
   battlesuit: BattlesuitData
@@ -37,8 +42,44 @@ const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
     battlesuit.name
   )
 
+  const { label: valkyrieLabel, krLabel } = valkyries.find(
+    (aValkyrie) => aValkyrie.value === battlesuit.valkyrie
+  ) || { label: battlesuit.valkyrie, krLabel: battlesuit.valkyrie }
+
+  const valkyrieName = translate(locale, { 'ko-KR': krLabel }, valkyrieLabel)
+
+  const battlesuitType = battlesuitTypes.find(
+    (aType) => aType.value === battlesuit.type
+  )
+  const battlesuitTypeLabel = battlesuitType
+    ? translate(
+        locale,
+        { 'ko-KR': battlesuitType.krLabel },
+        battlesuitType.label
+      )
+    : capitalize(battlesuit.type)
+
   return (
     <Box>
+      <Head
+        title={`${t('breadcrumb.honkai-3rd')}: ${battlesuitName} - Abyss Lab`}
+        description={`${t('breadcrumb.honkai-3rd')} ${t(
+          'battlesuit-show.battlesuit'
+        )} / ${valkyrieName} / ${battlesuitTypeLabel} / ${battlesuit.features
+          .map((feature) => {
+            const featureData = battlesuitFeatures.find(
+              (aFeature) => aFeature.value === feature
+            )
+            if (featureData == null) {
+              return feature
+            }
+
+            const { label, krLabel } = featureData
+
+            return translate(locale, { 'ko-KR': krLabel }, label)
+          })
+          .join(', ')}`}
+      />
       <Honkai3rdNavigator />
 
       <Box p={3}>

src/pages/honkai3rd/battlesuits/index.tsx

@@ -17,6 +17,7 @@ import { useRouter } from 'next/router'
 import { NextPageContext } from 'next'
 import { getI18NProps } from '../../../server/i18n'
 import { translate, useTranslation } from '../../../lib/i18n'
+import Head from '../../../components/atoms/Head'
 
 type BattlesuitListItemData = Pick<
   BattlesuitData,
@@ -77,6 +78,12 @@ const BattlesuitListPage = ({ battlesuits }: BattlesuitListPageProps) => {
 
   return (
     <Box>
+      <Head
+        title={`${t('breadcrumb.honkai-3rd')}: ${t(
+          'breadcrumb.battlesuits'
+        )} - Abyss Lab`}
+        description={t('battlesuits-list.description')}
+      />
       <Honkai3rdNavigator />
 
       <Box p={3}>

src/pages/honkai3rd/elfs/[elfId].tsx

@@ -12,6 +12,8 @@ import { getElfById, listElfs } from '../../../server/data/honkai3rd/elfs'
 import { generateI18NPaths, getI18NProps } from '../../../server/i18n'
 import { translate, useTranslation } from '../../../lib/i18n'
 import { useRouter } from 'next/router'
+import Head from '../../../components/atoms/Head'
+import { battlesuitFeatures } from '../../../lib/honkai3rd/battlesuits'
 interface ElfShowPageProps {
   elf: ElfData
 }
@@ -24,6 +26,25 @@ const ElfShowPage = ({ elf }: ElfShowPageProps) => {
 
   return (
     <Box>
+      <Head
+        title={`${t('breadcrumb.honkai-3rd')}: ${elfName} - Abyss Lab`}
+        description={`${t('breadcrumb.honkai-3rd')} ${t(
+          'elfs-show.elf'
+        )} / ${'⭐'.repeat(elf.baseRank)} / ${elf.features
+          .map((feature) => {
+            const featureData = battlesuitFeatures.find(
+              (aFeature) => aFeature.value === feature
+            )
+            if (featureData == null) {
+              return feature
+            }
+
+            const { label, krLabel } = featureData
+
+            return translate(locale, { 'ko-KR': krLabel }, label)
+          })
+          .join(', ')}`}
+      />
       <Honkai3rdNavigator />
 
       <Box p={3}>

src/pages/honkai3rd/elfs/index.tsx

@@ -9,6 +9,7 @@ import { ElfData } from '../../../lib/honkai3rd/elfs'
 import { getI18NProps } from '../../../server/i18n'
 import { listElfs } from '../../../server/data/honkai3rd/elfs'
 import { useTranslation } from '../../../lib/i18n'
+import Head from '../../../components/atoms/Head'
 
 interface ElfListPageProps {
   elfs: Pick<ElfData, 'id' | 'name' | 'krName'>[]
@@ -19,6 +20,13 @@ const ElfListPage = ({ elfs }: ElfListPageProps) => {
 
   return (
     <Box>
+      <Head
+        title={`${t('breadcrumb.honkai-3rd')}: ${t(
+          'breadcrumb.elfs'
+        )} - Abyss Lab`}
+        description={t('elfs-list.description')}
+      />
+
       <Honkai3rdNavigator />
 
       <Box p={3}>

src/pages/honkai3rd/index.tsx

@@ -10,6 +10,7 @@ import PageLink from '../../components/atoms/PageLink'
 import SquareImageBox from '../../components/atoms/SquareImageBox'
 import { mdiGithub } from '@mdi/js'
 import { Icon } from '@mdi/react'
+import Head from '../../components/atoms/Head'
 
 const bannerValkyries = [
   'kiana',
@@ -43,6 +44,10 @@ const Honkai3rdIndexPage = () => {
 
   return (
     <Box>
+      <Head
+        title={`${t('breadcrumb.honkai-3rd')}: Home - Abyss Lab`}
+        description={t('index.description')}
+      />
       <Honkai3rdNavigator />
 
       <Box p={3}>

src/pages/honkai3rd/stigmata/index.tsx

@@ -16,6 +16,7 @@ import {
   listStigmataSet,
 } from '../../../server/data/honkai3rd/stigmata'
 import { useTranslation } from 'next-i18next'
+import Head from '../../../components/atoms/Head'
 
 interface StigmataListPageProps {
   stigmataDataList: Pick<StigmataData, 'id' | 'name' | 'rarity' | 'krName'>[]
@@ -38,6 +39,12 @@ const StigmataListPage = ({
 
   return (
     <Box>
+      <Head
+        title={`${t('breadcrumb.honkai-3rd')}: ${t(
+          'breadcrumb.stigmata'
+        )} - Abyss Lab`}
+        description={t('stigmata-list.description')}
+      />
       <Honkai3rdNavigator />
 
       <Box p={3}>

src/pages/honkai3rd/versions/[versionId].tsx

@@ -23,6 +23,7 @@ import { VersionData } from '../../../lib/honkai3rd/versions'
 import { generateI18NPaths, getI18NProps } from '../../../server/i18n'
 import { translate, useTranslation } from '../../../lib/i18n'
 import { useRouter } from 'next/router'
+import Head from '../../../components/atoms/Head'
 
 interface VersionShowPageProps {
   versionData: VersionData
@@ -42,6 +43,26 @@ const VersionShowPage = ({
 
   return (
     <Box>
+      <Head
+        title={`${t('breadcrumb.honkai-3rd')}: v${
+          versionData.version
+        } - Abyss Lab`}
+        description={`${t('breadcrumb.honkai-3rd')} ${t(
+          'versions.version'
+        )} / ${t('versions.new-battlesuits')}: ${battlesuits
+          .map((battlesuit) => {
+            return translate(
+              locale,
+              { 'ko-KR': battlesuit.krName },
+              battlesuit.name
+            )
+          })
+          .join(',')} / ${t('versions.new-weapons')}: ${weapons
+          .map((weapon) => {
+            return translate(locale, { 'ko-KR': weapon.krName }, weapon.name)
+          })
+          .join(',')}`}
+      />
       <Honkai3rdNavigator />
 
       <Box p={3}>

src/pages/honkai3rd/versions/index.tsx

@@ -23,6 +23,7 @@ import { getI18NProps } from '../../../server/i18n'
 import { NextPageContext } from 'next'
 import { useTranslation, translate } from '../../../lib/i18n'
 import { useRouter } from 'next/router'
+import Head from '../../../components/atoms/Head'
 
 interface VersionIndexPageProps {
   versionDataList: VersionData[]
@@ -44,6 +45,13 @@ const VersionIndexPage = ({
 
   return (
     <Box>
+      <Head
+        title={`${t('breadcrumb.honkai-3rd')}: ${t(
+          'breadcrumb.versions'
+        )} - Abyss Lab`}
+        description={t('versions.list-page-description')}
+      />
+
       <Honkai3rdNavigator />
 
       <Box p={3}>

src/pages/honkai3rd/weapons/[weaponId].tsx

@@ -12,6 +12,7 @@ import {
 } from '../../../server/data/honkai3rd/weapons'
 import { useRouter } from 'next/router'
 import { useTranslation, translate } from '../../../lib/i18n'
+import Head from '../../../components/atoms/Head'
 
 interface WeaponShowPageProps {
   weapon: WeaponData
@@ -22,9 +23,18 @@ const WeaponShowPage = ({ weapon }: WeaponShowPageProps) => {
   const { t } = useTranslation()
 
   const weaponName = translate(locale, { 'ko-KR': weapon.krName }, weapon.name)
+  const weaponCategory = t(`weapons-show.${weapon.category}`)
 
   return (
     <Box>
+      <Head
+        title={`${t('breadcrumb.honkai-3rd')}: ${weaponName} - Abyss Lab`}
+        description={`${t('breadcrumb.honkai-3rd')} ${t(
+          'weapons-show.weapon'
+        )} / ${'⭐'.repeat(weapon.rarity)} / ${weaponCategory} / ATK : ${
+          weapon.atk
+        } / CRT : ${weapon.crt}`}
+      />
       <Honkai3rdNavigator />
 
       <Box p={3}>
@@ -51,7 +61,7 @@ const WeaponShowPage = ({ weapon }: WeaponShowPageProps) => {
 
         <Card mb={3}>
           <Box p={2} sx={{ borderBottom: 'default' }}>
-            {t(`weapons-show.${weapon.category}`)}
+            {weaponCategory}
           </Box>
           <Box p={2} sx={{ borderBottom: 'default' }}>
             {'⭐'.repeat(weapon.rarity)}

src/pages/honkai3rd/weapons/index.tsx

@@ -12,6 +12,7 @@ import WeaponCard from '../../../components/molecules/WeaponCard'
 import { getI18NProps } from '../../../server/i18n'
 import { NextPageContext } from 'next'
 import { useTranslation, translate } from '../../../lib/i18n'
+import Head from '../../../components/atoms/Head'
 
 type WeaponListItemData = Pick<
   WeaponData,
@@ -56,6 +57,12 @@ const WeaponListPage = ({ weaponDataList }: WeaponListPageProps) => {
 
   return (
     <Box>
+      <Head
+        title={`${t('breadcrumb.honkai-3rd')}: ${t(
+          'breadcrumb.weapons'
+        )} - Abyss Lab`}
+        description={t('weapons-list.description')}
+      />
       <Honkai3rdNavigator />
 
       <Box p={3}>

src/pages/index.tsx

@@ -3,10 +3,12 @@ import { Box, Text } from '@theme-ui/components'
 import PageLink from '../components/atoms/PageLink'
 import Image from 'next/image'
 import RootNavigator from '../components/organisms/RootNavigator'
+import Head from '../components/atoms/Head'
 
 const IndexPage = () => {
   return (
     <Box>
+      <Head title='Abyss Lab - Unofficial Honkai3rd/Genshin Wiki' />
       <RootNavigator />
       <Box sx={{ p: 3 }}>
         <Box mb={4}>