#428

frontend/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="ぼざクリ ぼざろクリーチャーシリーズ 伊地知ニジカ リンク集 Wiki ニコニコ" />
+    <meta name="description" lang="ja" data-rh="true" content="ぼざクリ ぼざろクリーチャーシリーズ 伊地知ニジカ リンク集 Wiki ニコニコ" />
     <title>ぼざクリ タグ広場　〜 ぼざろクリーチャーシリーズ綜合リンク集</title>
     <!-- helmet -->
   </head>

frontend/scripts/generate-sitemap.js

@@ -11,7 +11,8 @@ const formatDate = (date = new Date) => {
   return `${ year }-${ month }-${ day }`
 }
 
-const SITE_TITLE = 'ぼざクリ タグ広場'
+const SITE_TITLE = JSON.parse (fs.readFileSync (
+    new URL ('../src/locales/ja/shared.json', import.meta.url), 'utf8')).labels.brand
 const DOMAIN = 'https://hub.nizika.monster'
 const API_BASE_URL = 'https://hub.nizika.monster/api'
 

frontend/src/App.tsx

@@ -14,6 +14,7 @@ import DevModeWatermark from '@/components/DevModeWatermark'
 import RouteBlockerOverlay from '@/components/RouteBlockerOverlay'
 import TopNav from '@/components/TopNav'
 import DialogueProvider from '@/components/dialogues/DialogueProvider'
+import PageHead from '@/components/common/PageHead'
 import { Toaster } from '@/components/ui/toaster'
 import { apiPost, isApiError } from '@/lib/api'
 import { fetchLocales, isLocaleCode, legacyLocalePath, switchLocalePath } from '@/lib/locales'
@@ -253,6 +254,7 @@ const RoutedApp = ({ locales }: { locales: AvailableLocale[] }) => {
 
   return (
       <DialogueProvider>
+	<PageHead/>
 	<UnsavedChangesGuardProvider>
 	  <KeyboardShortcutsProvider>
 	  <MotionConfig

frontend/src/components/ErrorScreen.tsx

@@ -1,9 +1,7 @@
-import { Helmet } from 'react-helmet-async'
-
 import nikumaru from '@/assets/fonts/nikumaru.otf'
 import errorImg from '@/assets/images/not-found.gif'
 import MainArea from '@/components/layout/MainArea'
-import { SITE_TITLE } from '@/config'
+import PageHead from '@/components/common/PageHead'
 import { useUITranslation } from '@/lib/useUITranslation'
 
 import type { FC } from 'react'
@@ -40,10 +38,10 @@ const ErrorScreen: FC<Props> = ({ status }) => {
 
   return (
       <MainArea>
-	<Helmet>
+	<PageHead title={{ text: title,
+	    language: translate (`${status}.message`).language }}>
 	  <meta name="robots" content="noindex"/>
-	  <title>{title} | {SITE_TITLE}</title>
+	</PageHead>
-	</Helmet>
 	<div className="text-6xl font-bold text-transparent
 			bg-[linear-gradient(90deg,#ff0000,#ff8800,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,#ff0000)]
 			bg-clip-text bg-[length:200%_100%] animate-rainbow-scroll drop-shadow-[0_0_6px_black]

frontend/src/components/common/PageHead.tsx

@@ -0,0 +1,34 @@
+import { Helmet } from 'react-helmet-async'
+
+import { useLocale } from '@/lib/useLocale'
+import { useUITranslation } from '@/lib/useUITranslation'
+
+import type { ReactNode } from 'react'
+
+type LocalisedTitle = { text: string; language: string }
+type Props = {
+    title?: string | LocalisedTitle
+    includeSiteName?: boolean
+    children?: ReactNode }
+
+
+const PageHead = ({ title, includeSiteName = true, children }: Props) => {
+  const locale = useLocale ()
+  const { message, siteTitle } = useUITranslation ('shared')
+  const pageTitle = typeof title === 'string' ? { text: title, language: locale } : title
+  const fullTitle =
+      pageTitle == null
+      ? siteTitle.text
+      : (includeSiteName ? `${pageTitle.text} | ${siteTitle.text}` : pageTitle.text)
+  const description = message ('head.description', { brand: siteTitle.text })
+
+  return (
+      <Helmet>
+	<title lang={pageTitle?.language ?? siteTitle.language}>{fullTitle}</title>
+	<meta name="description" content={description.text} lang={description.language}/>
+	{children}
+      </Helmet>)
+}
+
+
+export default PageHead

frontend/src/config.sample.ts

@@ -2,8 +2,6 @@
 const ENV: string = 'development'
 
 const config = {
-  API_BASE_URL: ENV === 'production' ? 'https://hub.nizika.monster/api' : 'http://localhost:3002',
+  API_BASE_URL: ENV === 'production' ? 'https://hub.nizika.monster/api' : 'http://localhost:3002' }
-  SITE_TITLE:   'ぼざクリ タグ広場'}
 
 export const API_BASE_URL = config.API_BASE_URL
-export const SITE_TITLE = config.SITE_TITLE

frontend/src/lib/useUITranslation.ts

@@ -20,5 +20,6 @@ export const useUITranslation = (namespace = 'common') => {
 	language: result.language, children: result.text })
   }, [message])
 
-  return { message, label }
+  const siteTitle = message ('shared:labels.brand')
+  return { message, label, siteTitle }
 }

frontend/src/locales/ain-Kana/gekanator.json

@@ -1,4 +1,5 @@
-{ "unavailable": {
+{ "title": "$t(navigation:gekanator)",
+  "unavailable": {
       "title": "Gekanator　タネ　シサㇺ　イタㇰ　アニ　パテㇰ　エシノッ　エアㇱカイ！",
       "back": "ホㇱキ　ソㇱ　ウン　ホㇱピ",
       "switchToJapanese": "シサㇺ　イタㇰ　ウン　シンナ",

frontend/src/locales/ain-Kana/shared.json

@@ -1,4 +1,5 @@
 {
+  "head": { "description": "$t(posts:list.tagline)" },
   "dialogue": {
     "confirm": "エヌカㇻ　ワ　ピㇼカ",
     "close": "$t(settings:actions.close)"

frontend/src/locales/ja/gekanator.json

@@ -1,4 +1,5 @@
 {
+  "title": "グカネータ",
   "unavailable": {
     "title": "グカネータは現在日本語のみでプレー可能です！",
     "back": "前の画面に戻る",

frontend/src/locales/ja/shared.json

@@ -1,4 +1,7 @@
 {
+  "head": {
+    "description": "ぼざクリ ぼざろクリーチャーシリーズ 伊地知ニジカ リンク集 Wiki ニコニコ"
+  },
   "dialogue": { "confirm": "確定", "close": "閉ぢる" },
   "sidebarWidth": "サイドバー幅",
   "url": "URL",

frontend/src/pages/GekanatorPage.tsx

@@ -1,12 +1,12 @@
 import { animate, motion, useMotionTemplate, useMotionValue } from 'framer-motion'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { Helmet } from 'react-helmet-async'
 
 import { useLocale } from '@/lib/useLocale'
 import PrefetchLink from '@/components/PrefetchLink'
 import MainArea from '@/components/layout/MainArea'
-import { SITE_TITLE } from '@/config'
+import PageHead from '@/components/common/PageHead'
+import { useUITranslation } from '@/lib/useUITranslation'
 import { expectedAnswerForQuestion,
 	 fetchGekanatorExtraQuestions,
 	 fetchGekanatorQuestions,
@@ -3679,6 +3679,7 @@ const expectedAnswerFor = (
 
 
 const GekanatorPage: FC<{ user: User | null }> = ({ user }) => {
+  const { message } = useUITranslation ('gekanator')
   const locale = useLocale ()
   const behaviourSettings = useClientBehaviourSettings ()
   const animationMode = behaviourSettings.animation ?? 'normal'
@@ -4914,9 +4915,7 @@ const GekanatorPage: FC<{ user: User | null }> = ({ user }) => {
 
   return (
       <MainArea className="relative isolate overflow-x-hidden bg-yellow-50 dark:bg-red-975">
-	<Helmet>
+	<PageHead title={message ('title')}/>
-	  <title>{`グカネータ | ${ SITE_TITLE }`}</title>
-	</Helmet>
 
 	<GekanatorBackdrop
 	    posts={backgroundPosts}

frontend/src/pages/GekanatorUnavailablePage.tsx

@@ -1,6 +1,5 @@
 import { motion, useReducedMotion } from 'framer-motion'
 import { useLayoutEffect, useRef } from 'react'
-import { Helmet } from 'react-helmet-async'
 import { useLocation } from 'react-router-dom'
 
 import nikumaru from '@/assets/fonts/nikumaru.otf'
@@ -8,7 +7,7 @@ import { formatUIString } from '@/components/LocalisedText'
 import PrefetchLink from '@/components/PrefetchLink'
 import MainArea from '@/components/layout/MainArea'
 import { Button } from '@/components/ui/button'
-import { SITE_TITLE } from '@/config'
+import PageHead from '@/components/common/PageHead'
 import { switchLocalePath } from '@/lib/locales'
 import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
 import { useLocaleNavigate } from '@/lib/useLocale'
@@ -93,8 +92,7 @@ const GekanatorUnavailablePage = () => {
 
   return (
       <MainArea className="min-w-0">
-	<Helmet>
+	<PageHead title={title}>
-	  <title>{title.text} | {SITE_TITLE}</title>
 	  <meta name="robots" content="noindex"/>
 	  <style>{`
 	      @font-face {
@@ -102,7 +100,7 @@ const GekanatorUnavailablePage = () => {
 		src: url(${nikumaru}) format('opentype');
 	      }
 	  `}</style>
-	</Helmet>
+	</PageHead>
 	<section className="mx-auto flex min-h-full w-full flex-col
 			    items-center justify-center gap-6 py-6 text-center">
 	  <h1 ref={headingRef} className="w-full text-5xl font-bold"

frontend/src/pages/MorePage.tsx

@@ -1,11 +1,9 @@
-import { Helmet } from 'react-helmet-async'
-
 import PrefetchLink from '@/components/PrefetchLink'
 import LocalisedText from '@/components/LocalisedText'
 import { menuOutline } from '@/components/TopNav'
 import SectionTitle from '@/components/common/SectionTitle'
 import MainArea from '@/components/layout/MainArea'
-import { SITE_TITLE } from '@/config'
+import PageHead from '@/components/common/PageHead'
 import { useUITranslation } from '@/lib/useUITranslation'
 
 import type { FC } from 'react'
@@ -20,9 +18,7 @@ const MorePage: FC = () => {
 
   return (
       <MainArea className="md:flex">
-	<Helmet>
+	<PageHead title={message ('labels.menu')}/>
-	  <title>{message ('labels.menu').text} | {SITE_TITLE}</title>
-	</Helmet>
 
 	{[...Array (Math.ceil (menu.length / 4)).keys ()].map (i => (
 	    <div key={i} className="flex-1 mx-16">

frontend/src/pages/TOSPage/ain-Kana.mdx

@@ -1,22 +1,127 @@
-export const translationStatus = 'untranslated-draft'
+import MainArea from '@/components/layout/MainArea'
+import { localisedDateString } from '@/lib/utils'
 
-export const reviewRequired = [
+export const lastUpdatedAt = localisedDateString ('2026-04-12', 'ain-Kana', 'hour')
-  '前文：利用による同意と適用範囲',
-  '第1条：サービスの位置づけ・仕様変更',
-  '第2条：公開方針・利用者区分・権限',
-  '第3条：認証情報・引継ぎコード・責任',
-  '第4条：編輯義務・承認・可撤回の権限',
-  '第5条：各禁止行為と権利侵害の範囲',
-  '第6条：利用者の責任・非独占的利用許諾・権利帰属',
-  '第7条：外部サービスの条件・保証の否定',
-  '第8条：履歴保持・差戻・削除・完全消去の例外',
-  '第9条：利用制限・資格取消・BAN・開示義務',
-  '第10条：未成年の安全と表示制限',
-  '第11条：聯絡方法・回答義務と保証の否定',
-  '第12条：免責・保証の否定・サービス停止',
-  '第13条：規約変更・発効時点・継続利用による同意',
-  '第14条：日本法・専属的合意管轄・法令上の例外',
-  '附則：適用日']
 
-{/* No Ainu translation has been supplied or approved. Do not publish this
+<MainArea>
-    draft or substitute a phonetic transcription of the Japanese source. */}
+  <article lang="ain-Kana" className="prose dark:prose-invert mx-auto p-4">
+    # アエイワンケ　イタㇰ
+
+    イオッタ　アシㇼ　アヌイェ　ト： {lastUpdatedAt}
+
+    タン　アエイワンケ　イタㇰ（タプ　ワ　「タン　イタㇰ」　セコㇿ　アニェ）　アナㇰネ、ポチ　チャ　ロㇰ　シクヌㇷ゚　イキㇼ　チセ（タプ　ワ　「タン　チヘコテㇷ゚」　セコㇿ　アニェ）　アエイワンケ　ヒ　オㇿ　アヌイェ　イタㇰ　ネ。　タン　チヘコテㇷ゚　エイワンケ　クㇽ　アナㇰネ、エイワンケ　ヒ　タ　タン　イタㇰ　エセ　ルウェ　ネ　セコㇿ　インカルㇱクㇽ　ラム。
+
+    ## 1　タン　チヘコテㇷ゚　ネ　ペ
+
+    1. タン　チヘコテㇷ゚　アナㇰネ、タグ、Wiki、ソイ　ウコテㇷ゚　アウウェカㇻパ　ワ、アエラムアン　ペ　ウココㇿ　クス　アエイワンケ　シㇱテㇺ　ネ。
+    2. タン　チヘコテㇷ゚　オㇿ　アナㇰネ、アカㇻペ　シンナ　サンケ　ヒ　アナㇰ　ソモ　シノ　ポロ　アタイ　ネ。　タグ　クス　アカㇻペ　アウウェカㇻパ、アフナラ、スイ　アヌカㇻ、ネワ　ネワ　イタㇰ　アウコオㇷ゚テ　ヒ　アナㇰ　シノ　ポロ　アタイ　ネ。
+    3. インカルㇱクㇽ　アナㇰネ、タン　チヘコテㇷ゚　ネプキ　クス　コンルスイ　ヤㇰネ、ネプキ　カトゥ、アヌカレ　ウㇱケ、レヘ、URL、アヌカレ　ペ　ネワ　オヤ　イアヌ　シンナ　カㇻ　エアㇱカイ。
+
+    ## 2　アヌカレ　カトゥ　ネワ　イエイワンケクㇽ　ウタㇻ
+
+    1. タン　チヘコテㇷ゚　ホシキノ　オピッタ　クㇽ　オルン　アサンケ　ヒ　タ、**ネン　ネ　ヤッカ　ヌカㇻ　エアㇱカイ。　コㇿカ、アシンノ　アサンケ　ネワ　シンナ　カㇻ　ヒ　クス　アコサウヌ　クㇽ　パテㇰ　エアㇱカイ。**
+    2. ホシキノ　オピッタ　クㇽ　オルン　アサンケ　ヒ　タ、`農奴`　セコㇿ　アン　クㇽ　アナㇰネ　ヌカㇻ　パテㇰ　エアㇱカイ。
+    3. アサンケペ、タグ、Wiki　ネワ　オヤ　ペ　シンナ　カㇻ　ヒ　アナㇰネ、インカルㇱクㇽ　アコサウヌ　クㇽ、`耕作員`　セコㇿ　アン　クㇽ　パテㇰ　エアㇱカイ。
+    4. `独裁者`　セコㇿ　アン　クㇽ　アナㇰネ、`耕作員`　エアㇱカイ　ネプキ　カ　エアㇱカイ。　ソレ　パㇰノ　ソモ　ネ、アヌイェペ　ホシピレ、イサㇺカ、クㇽ　イキ　ヒ　カㇱマ、オヤ　カンリ　ネプキ　カ　カㇻ　エアㇱカイ。
+    5. インカルㇱクㇽ　アナㇰネ、シンナ　カㇻ　ヒ　フㇱコ　アンペ　アウカオ、ホシピレ、BAN、アヌカㇻ　ワ　アオㇿセ　クス　アン　ル　ネワ　オヤ　カンリ　ネプキ　ピㇼカノ　アカㇻ　ルウェ　アン　セコㇿ　ラム　ヤㇰネ、`農奴`　オルン　シンナ　カㇻ　エアㇱカイ　ペ　アヌンコレ　エアㇱカイ。
+    6. クㇽ　ネ　カトゥ、ネプキ　エアㇱカイ　ペ、アコサウヌ　クス　アコイタㇰ　カトゥ、アコサウヌ　クス　アヌカㇻ　ペ、アコサウヌ　オカケ　カトゥ　アナㇰネ、インカルㇱクㇽ　コンルスイ　コㇿ　アヌイェ　ワ　シンナ　カㇻ　エアㇱカイ。
+
+    ## 3　エイワンケ　ヘアㇱ　ヒ　ネワ　ヒキツギコード
+
+    1. タン　チヘコテㇷ゚　オㇿ　アナㇰネ、Id.　ネワ　パスワード　パテㇰ　アエイワンケ　ソモ　ネ。　インカルㇱクㇽ　アヌㇺケ　認証情報　ネワ　ヒキツギコード　アエイワンケ　エアㇱカイ。
+    2. イエイワンケクㇽ　アナㇰネ、ヤイ　オルン　アウンコレ　ヒキツギコード、認証情報、ネワ　ヤイ　端末　オッタ　アウカオ　ペ　ヤイ　ネプキ　ネ　ワ　ピㇼカノ　コㇿ　クニ　ネ。
+    3. イエイワンケクㇽ　アナㇰネ、ヤイ　ヒキツギコード　ネワ　認証情報　オヤ　クㇽ　オルン　コレ、アエソセ、ウココㇿ、アエラムヌ　カ　イテキ。
+    4. ヒキツギコード　アエラムヌ、オヤ　クㇽ　エイワンケ、アサㇰ、アウㇰ　ネワ　オヤ　イㇰネ　クス、イエイワンケクㇽ　ネワ　オヤ　クㇽ　エウタサ　ウェン　ペ　アン　ヤㇰカ、インカルㇱクㇽ　アナㇰネ　ネア　ウェン　ペ　ヤイ　ネプキ　ネ　ソモ　コㇿ。
+    5. インカルㇱクㇽ　アナㇰネ、ネン　ネ　ヒ　アフナラ、ウェン　イキ　アエモㇱマ、アヌカㇻ　ワ　アオㇿセ、ネワ　シㇱテㇺ　アコセレ　クス、エイワンケ　アスルソㇱ　ネワ　アクセス　アスルソㇱ　アウコテ　ワ　エイワンケ　エアㇱカイ。
+
+    ## 4　アコサウヌ　シンナ　カㇻ　ヒ　オㇿ　アン　イタㇰ
+
+    1. `耕作員`　アナㇰネ、タグ　アウウェカㇻパ　シㇱテㇺ　ピㇼカ　カトゥ　アウカオ　ヒ　イオッタ　エトコ　オマレ　クニ　ネ。　ヤイ　コㇿ　ペ　セコㇿ　ソモ　ラム、アフナラ　エアㇱカイ　ヒ、スイ　エイワンケ　エアㇱカイ　ヒ、アヌカㇻ　エアㇱカイ　ヒ、ウコシネ　カトゥ　ピㇼカ　ヒ　エトコ　オマレ　クニ　ネ。
+    2. `耕作員`　アナㇰネ、ヤイ　エラムㇷ゚キㇻ　ヒ、ヤイ　ウタㇻ　ウコイタㇰ、イコㇿヌ　イキ、イウタサ　イタㇰ　ネワ　ウウェン　イキ　クス、タグ　ネワ　Wiki　シンナ　カㇻ　カ　イテキ。
+    3. `耕作員`　アナㇰネ、アエラㇺペテㇰ　ペ　アオウペカレ、タグ　ウコアタㇺ、ウコテㇷ゚　アコセレ、ネワ　アスルソㇱ　アコオㇷ゚テ　クス　シンナ　カㇻ　クニ　ネ。
+    4. インカルㇱクㇽ　アナㇰネ、アコイタㇰ　ペ、フㇱコ　イキ　カトゥ、シンナ　カㇻ　ペ　ピㇼカ　ヒ、イコイタㇰ　エアㇱカイ　ヒ、ネワ　ネプキ　エアㇱカイ　ヒ　アヌカㇻ　ワ、アコサウヌ、アカオ、アエテㇰ、ネワ　アウㇰ　エアㇱカイ。
+    5. `耕作員`　ネ　ヒ　アナㇰネ、オウペカノ　ネ　ペ　ソモ　ネ。　インカルㇱクㇽ　タン　チヘコテㇷ゚　アコセレ　クス　ウンコレ　ペ　ネ　ワ、ホシㇷ゚　アウㇰ　エアㇱカイ　ペ　ネ。
+
+    ## 5　イテキ　アキ　クニ　ペ
+
+    イエイワンケクㇽ　アナㇰネ、タプ　アン　イキ　カトゥ　イテキ　キ。
+
+    1. イレンカ　ネワ　オピッタ　クㇽ　アコㇿ　ピㇼカ　カトゥ　ウコㇻ　ヒ　アトゥイェ　ペ。
+    2. ウェン　イキ　アエカスイ、ネワ　ウェン　イキ　オルン　ウコテ　ペ。
+    3. アヌイェクㇽ　オウペカノ、著作者人格権、商標権、肖像権、パブリシティ権、プライバシー権　ネワ　オヤ　クㇽ　コㇿ　オウペカノ　アエアㇱカイ　ペ　アエトゥイェ　ペ。
+    4. オヤ　クㇽ　アヌイェ　ペ　エセ　イサㇺ　ノ　アサンケ、イレンカ　ソモ　エセ　アップロード、アコピ、海賊版、ウンコレ　ソモ　アン　ウㇱケ　オルン　クㇽ　アソンココレ、ネワ　ネア　イキ　アオウペカレ、アサンケ、アエカスイ　ペ。
+    5. ソンノ　アン　クㇽ　オルン　ウェン　イタㇰ、イコヤイシㇻカ、ウタㇻ　アシㇰヌカㇻ、イウェンテ、イウヌ　イキ、イコペウㇰ、イレンカ　ソモ　エセ　イキ、ネワ　オヤ　クㇽ　イウェンテ　ペ。
+    6. オヤ　クㇽ　コㇿ　プライベート　アスルソㇱ、アサンケ　ソモ　アン　アスルソㇱ、エシナ　クニ　ペ　アナㇰネ、ネア　クㇽ　エセ　ソモ　キ　コㇿ　アサンケ、アソンココレ、ウココㇿ、ネワ　ネン　ネ　ヤッカ　エラムアン　エアㇱカイ　カトゥ　アヌカレ　ペ。
+    7. ソモ　ソンノ　ネ　アスルソㇱ、クㇽ　エラムㇱカリ　ネ　アスルソㇱ、アスルソㇱ　モトホ　アオスラ　ペ、アヌンコレ　ソモ　アン　タグ、ソモ　ウコテ　タグ　ポロンノ　アオマレ、アウウェカㇻパ　シㇱテㇺ　アウェンテ、アフナラ　アウェンテ　ネワ　オヤ　ウェン　イキ。
+    8. マルウェア、フィッシング、詐欺、誘導広告、ウェン　リダイレクト、キケン　ソイ　ウコテㇷ゚　ネワ　イエイワンケクㇽ　ネ　ヤッカ　インカルㇱクㇽ　オルン　ウェン　ペ　アカㇻ　ペ。
+    9. タン　チヘコテㇷ゚　コㇿ　イレンカ　エアㇱカイ　ソモ　ネ　政治　イウヌ　イタㇰ、宗教　オルン　イコタㇺ、モン　クス　宣伝、ウコヤヤㇻ　イタㇰ、スパム、シネ　イタㇰ　スイ　スイ　アサンケ　ペ。
+    10. ポン　クㇽ　イカㇱヌ　ヒ　アウェンテ、児童性的搾取、イレンカ　ソモ　エセ　性的表現、ルイ　ソモ　ピㇼカ　性的表現　ネワ　残虐表現　クス、オピッタ　クㇽ　ヌカㇻ　ウㇱケ　オルン　ヤイトゥパレ　イサㇺ　ノ　アサンケ　ペ。
+    11. インカルㇱクㇽ、オヤ　イエイワンケクㇽ、ソイ　チヘコテㇷ゚　ネワ　オヤ　クㇽ　オルン　ポロ　ネプキ、ウェン　ペ、ウウェン　カトゥ　アカㇻ　ペ。
+    12. エトコ　タ　アヌイェ　イキ　カトゥ　アキ　クス　アモㇱマ、オヤ　クㇽ　オルン　アキレ、ネワ　ネア　イキ　エアㇱカイ　クニ　アカㇻ　ペ。
+    13. オヤ　イキ　ネ　ヤッカ、タン　チヘコテㇷ゚　コㇿ　イレンカ　ネワ　アプンノ　アコセレ　ヒ　クス　インカルㇱクㇽ　ウェン　セコㇿ　ラム　ペ。
+
+    ## 6　アサンケペ、タグ、Wiki　ネワ　オヤ　ペ
+
+    1. イエイワンケクㇽ　アナㇰネ、ヤイ　アサンケ、シンナ　カㇻ、アヌイェ、アソンココレ　ネワ　アキル　アスルソㇱ　クス、ネア　ペ　エイワンケ　エアㇱカイ　オウペカノ　ネワ　イレンカ　エセ　ヒ　アン　クニ　ネ。
+    2. イエイワンケクㇽ　アナㇰネ、ヤイ　アサンケペ、タグ　アオマレ　ヒ、Wiki　アシンナ　カㇻ　ヒ、ウエペケレ　イタㇰ、コメント、ネワ　ウコテ　ヒ　オピッタ　クス　ヤイ　ネプキ　ネ　ワ　アコㇿ　クニ　ネ。
+    3. イエイワンケクㇽ　アナㇰネ、インカルㇱクㇽ　オルン、タン　チヘコテㇷ゚　アコセレ、アヌカレ、アコピ、アウカオ、アソンココレ、アウウェカㇻパ、引用、フㇱコ　アン　ペ　アヌカレ、ホシピレ、バックアップ、シㇱテㇺ　ウェン　ヒ　アコセレ、ネワ　弘報　クス　コンルスイ　パㇰノ、ヤイ　アカㇻ　アスルソㇱ　モン　アウㇰ　ソモ　キ　ノ、オヤ　クㇽ　カ　エイワンケ　エアㇱカイ　非独占　オウペカノ　ウンコレ。
+    4. エトコ　アン　ウンコレ　ヒ　アナㇰネ、タン　チヘコテㇷ゚　アコセレ　クス　コンルスイ　パㇰノ　パテㇰ　ネ。　ヤイ　アカㇻ　ペ　コㇿ　オウペカノ　インカルㇱクㇽ　オルン　アウンコレ　ルウェ　ソモ　ネ。
+    5. インカルㇱクㇽ　アナㇰネ、タグ　ウコシネ　ヒ、アヌイェ　カトゥ　ウコシネ　ヒ、エラㇺペテㇰ　ペ　アオウペカレ　ヒ、レヘ　ウコテ　ヒ、ホシピレ　ヒ　ネワ　オヤ　クス、アサンケペ、タグ、Wiki　ネワ　オヤ　ペ　シンナ　カㇻ、ヌカㇻ　ソモ　エアㇱカイ　カトゥ　カㇻ、イサㇺカ、ウコアタㇺ、シンナ　アㇻキㇻ、ネワ　フリーズ　エアㇱカイ。
+
+    ## 7　ソイ　ウコテㇷ゚　ネワ　アオマレ　ペ
+
+    1. タン　チヘコテㇷ゚　オㇿ　アナㇰネ、ソイ　サイト　オルン　ウコテㇷ゚、ソイ　ペ　アオマレ　ペ、ネワ　ネア　ペ　コㇿ　メタデータ　アヌカレ　エアㇱカイ。
+    2. ソイ　ウコテㇷ゚　オㇿ　アン　オウペカノ、アエイワンケ　イタㇰ、アヌカレ　ウㇱケ、イサㇺカ　カトゥ、広告、追跡、Cookie　ネワ　オヤ　カトゥ　アナㇰネ、ネア　ソイ　チヘコテㇷ゚　コㇿ　イタㇰ　アヌ　クニ　ネ。
+    3. インカルㇱクㇽ　アナㇰネ、ソイ　ウコテㇷ゚　イレンカ　エセ　ヒ、アプン　ヒ、ネイ　パㇰノ　アン　ヒ、ソンノ　ネ　ヒ、ピㇼカ　ヒ、エイワンケ　エアㇱカイ　ヒ、ネワ　アスルソㇱ　オピッタ　アン　ヒ　ソンノ　ネ　セコㇿ　ソモ　イタㇰ。
+    4. ソイ　オウペカノ　コㇿ　クㇽ　アコイタㇰ、インカルㇱクㇽ　ラム、イレンカ　アヌ、ネワ　アプンノ　アコセレ　クス、インカルㇱクㇽ　ソイ　ウコテㇷ゚、アオマレ　ペ、サムネイル、ウエペケレ　イタㇰ　ネワ　オヤ　アヌカレ　ペ　エアㇱカイ　ヒ　アヌㇺケ、シンナ　カㇻ、アエシナ　カㇻ、ネワ　イサㇺカ　エアㇱカイ。
+
+    ## 8　フㇱコ　アン　ペ、ホシピレ、イサㇺカ
+
+    1. タン　チヘコテㇷ゚　オㇿ　アナㇰネ、アコセレ、アヌカㇻ　ワ　アオㇿセ、ウェン　イキ　アエモㇱマ、ネワ　イコイタㇰ　エアㇱカイ　クス、アサンケペ、タグ、Wiki　ネワ　オヤ　シンナ　カㇻ　フㇱコ　アンペ　アウカオ、アヌカレ、ネワ　インカルㇱクㇽ　パテㇰ　ヌカㇻ　エアㇱカイ。
+    2. イエイワンケクㇽ　アナㇰネ、シネ　スイ　シンナ　カㇻ　ペ　オカケ　タ　ホシピレ、アシンナ　カㇻ、アエシナ　カㇻ、ネワ　イサㇺカ　エアㇱカイ　ヒ　エトコ　タ　エラムアン　クニ　ネ。
+    3. イエイワンケクㇽ　イサㇺカ　クス　コンルスイ　ヤㇰカ、イレンカ、アコセレ、アヌカㇻ　ワ　アオㇿセ、ウエン　カトゥ　アオウペカレ、ネワ　バックアップ　クス　コンルスイ　ヤㇰネ、ナニ　オピッタ　イサㇺカ　エアイカㇷ゚　カ　アン。
+    4. インカルㇱクㇽ　アナㇰネ、タン　チヘコテㇷ゚　オピッタ　ピㇼカノ　アコセレ　クス、エトコ　タ　ウエペケレ　ヤㇰカ　ウエペケレ　ソモ　キ　ヤㇰカ、フㇱコ　アンペ　アヌカレ　ウㇱケ、アウカオ　パキ、ホシピレ　イレンカ、ネワ　イサㇺカ　イレンカ　アヌイェ　ワ　シンナ　カㇻ　エアㇱカイ。
+
+    ## 9　エイワンケ　アヌㇺケ、`耕作員`　アウㇰ、BAN
+
+    1. インカルㇱクㇽ　アナㇰネ、イエイワンケクㇽ　タプ　アン　シネ　ペ　ネ　ヤッカ　イキ　セコㇿ　ラム　ヤㇰネ、エトコ　タ　ソンコ　コレ　ソモ　キ　ワ、ネワ　ソンコ　コレ　オカケ　タ、アサンケ　ネワ　シンナ　カㇻ　ヒ　アヌㇺケ、`耕作員`　ネ　ヒ　アウㇰ、アサンケペ　アエシナ　カㇻ　ネワ　イサㇺカ、ヒキツギコード　エイワンケ　エアイカㇷ゚　カㇻ、ユーザー BAN、IP BAN　ネワ　オヤ　コンルスイ　ペ　アカㇻ　エアㇱカイ。
+        - タン　イタㇰ　ソモ　アヌ　ヒ。
+        - タン　チヘコテㇷ゚　コㇿ　イレンカ　ソモ　エセ　ワ、ネプキ　アウェンテ、アㇻシ、ピㇼカ　カトゥ　アウェンテ　ヒ。
+        - インカルㇱクㇽ　アヌカㇻ、アシンナ　カㇻ　クニ　イタㇰ、オケレ　クニ　イタㇰ　オルン、ピㇼカ　モト　イサㇺ　ノ　ソモ　イタサ　ヒ。
+        - アヌイェ　アスルソㇱ、アコイタㇰ　ペ、ネワ　ウエペケレ　イタㇰ　ソモ　ソンノ　ネ　ヒ。
+        - アプンノ　アン　ヒ、イレンカ　アヌ　ヒ、ネワ　タン　チヘコテㇷ゚　アコセレ　クス　コンルスイ　ヒ。
+    2. インカルㇱクㇽ　アナㇰネ、ネア　イキ　コㇿ　モト、イレンカ、アヌカㇻ　ペ　ネワ　ヤイ　ラム　カトゥ　オピッタ　アヌカレ　クニ　ネ　ソモ　アン。
+    3. エイワンケ　アヌㇺケ　オカケ　タ、ネワ　`耕作員`　ネ　ヒ　アウㇰ　オカケ　タ　ヤッカ、インカルㇱクㇽ　コンルスイ　ヤㇰネ、フㇱコ　アンペ、ログ、アコイタㇰ　カンピ、通報　カンピ　ネワ　オヤ　アスルソㇱ　アウカオ　エアㇱカイ。
+
+    ## 10　ポン　クㇽ　エイワンケ　ヒ
+
+    1. インカルㇱクㇽ　アナㇰネ、ポン　クㇽ　アプンノ　アン　クス、パㇰ　ネ　カトゥ　アヌカレ　ヒ　アヌㇺケ、アヌカレ　ル　アヌㇺケ、アエシナ　カㇻ、イサㇺカ、アコイタㇰ　ペ　アエテㇰ　ネワ　オヤ　イキ　カㇻ　エアㇱカイ。
+    2. イエイワンケクㇽ　アナㇰネ、ポン　クㇽ　ヌカㇻ　エアㇱカイ　オピッタ　アヌカレ　ウㇱケ　オルン、ポン　クㇽ　クス　ウェン　ペ　ヤイトゥパレ　ソモ　キ　ノ　アサンケ　カ　イテキ。
+
+    ## 11　イコイタㇰ、通報、`御意見板`
+
+    1. イエイワンケクㇽ　アナㇰネ、タン　チヘコテㇷ゚　アヌカレ　イコイタㇰ、通報、ネワ　`御意見板`　オルン　ウコテㇷ゚　カリ、バグ　アスル、ウェン　ペ　アスル、イサㇺカ　クニ　イコイタㇰ　ネワ　オヤ　ソンコ　アサンケ　エアㇱカイ。
+    2. インカルㇱクㇽ　アナㇰネ、オピッタ　イコイタㇰ　オルン　イタサ　イタㇰ　コレ　クニ　ネ　ソモ　アン。　イタサ　イタㇰ　コレ　パキ、ネプ　アカㇻ　ヒ、ネワ　ネコン　アカㇻ　ヒ　ソンノ　ネ　セコㇿ　ソモ　イタㇰ。
+
+    ## 12　インカルㇱクㇽ　ヤイ　ネプキ　ネ　ソモ　コㇿ　ヒ
+
+    1. インカルㇱクㇽ　アナㇰネ、タン　チヘコテㇷ゚　シネ　イレンカ　クス　ピㇼカ　ヒ、オピッタ　アン　ヒ、ソンノ　ネ　ヒ、ネイ　パㇰノ　アン　ヒ、アプン　ヒ、ウェン　ペ　イサㇺ　ヒ、ネワ　イエイワンケクㇽ　コンルスイ　ペ　ネ　ヒ　ソンノ　ネ　セコㇿ　ソモ　イタㇰ。
+    2. ソイ　ウコテㇷ゚、ソイ　アオマレ　ペ、オヤ　クㇽ　アサンケペ、イエイワンケクㇽ　ウタㇻ　ウウェン　ヒ、通信　アウェン　ヒ、アスルソㇱ　イサㇺ　ヒ、ソモ　オウペカノ　アウウェカㇻパ、ソモ　オウペカノ　ウコテ、ソモ　オウペカノ　アヌイェ、ホシピレ、ネプキ　オケレ　ヒ、ネワ　イアヌ　シンナ　カㇻ　ヒ　クス　ウェン　ペ　アン　ヤㇰカ、インカルㇱクㇽ　アナㇰネ　ネア　ウェン　ペ　ヤイ　ネプキ　ネ　ソモ　コㇿ。
+    3. タン　チヘコテㇷ゚　アナㇰネ、エトコ　タ　ソンコ　コレ　ソモ　キ　ワ　オケレ、アシンナ　シンナ　カㇻ、ネワ　ポンノ　パテㇰ　ネ　エアㇱカイ。
+
+    ## 13　タン　イタㇰ　シンナ　カㇻ　ヒ
+
+    1. インカルㇱクㇽ　アナㇰネ、イレンカ　シンナ　ネ　ヒ、ネプキ　アシンノ　オマレ　ヒ、ネプキ　カトゥ　シンナ　カㇻ　ヒ、アプンノ　アン　クス、イタㇰ　アオウペカレ　ヒ　ネワ　オヤ　モト　クス、タン　イタㇰ　シンナ　カㇻ　エアㇱカイ。
+    2. アシンノ　シンナ　アカㇻ　タン　イタㇰ　アナㇰネ、タン　チヘコテㇷ゚　オッタ　アサンケ　ヒ　タ、ネワ　インカルㇱクㇽ　オヤ　パキ　アヌイェ　ヤㇰネ　ネア　パキ　タ、エイワンケ　クス　アン　イタㇰ　ネ。
+    3. タン　イタㇰ　シンナ　アカㇻ　オカケ　タ　タン　チヘコテㇷ゚　エイワンケ　クㇽ　アナㇰネ、アシンノ　シンナ　アカㇻ　イタㇰ　エセ　ルウェ　ネ　セコㇿ　インカルㇱクㇽ　ラム。
+
+    ## 14　イレンカ　ネワ　裁判所
+
+    1. タン　イタㇰ　ネワ　タン　チヘコテㇷ゚　アエイワンケ　ヒ　アナㇰネ、日本　イレンカ　アヌ　クニ　ネ。
+    2. タン　イタㇰ　ネワ　タン　チヘコテㇷ゚　クス　ウウェン　イタㇰ　ネ　ヤッカ、インカルㇱクㇽ　オカ　ウㇱケ　コㇿ　裁判所　アナㇰネ、ホシキ　裁判　オㇿ　パテㇰ　アウウェネウサㇻ　ウㇱケ　ネ　セコㇿ　アウコイタㇰ。　コㇿカ、イレンカ　オッタ　オヤ　イアヌ　アン　ヤㇰネ、ネア　イレンカ　アヌ　クニ　ネ。
+
+    ## オカケ　イタㇰ
+
+    タン　イタㇰ　アナㇰネ、{lastUpdatedAt}　ワノ　アエイワンケ。
+  </article>
+</MainArea>

frontend/src/pages/TOSPage/index.tsx

@@ -1,17 +1,26 @@
-import { ainuMDXComponents } from '@/mdx-components'
+import PageHead from '@/components/common/PageHead'
 import { useLocale } from '@/lib/useLocale'
+import { useUITranslation } from '@/lib/useUITranslation'
+import { ainuMDXComponents } from '@/mdx-components'
 import AinuTerms from '@/pages/TOSPage/ain-Kana.mdx'
 import NipponeseTerms from '@/pages/TOSPage/ja.mdx'
 
-// Change only after the user has reviewed the translation and approved publication.
+const terms = import.meta.glob<ComponentType> ('./*.mdx', { eager: true, import: 'default' })
-const AINU_TERMS_PUBLISHED = false
 
 
 const TOSPage = () => {
   const locale = useLocale ()
-  return (locale === 'ain-Kana' && AINU_TERMS_PUBLISHED)
+  const { message } = useUITranslation ('navigation')
-      ? <AinuTerms components={ainuMDXComponents}/>
+  const Terms = terms[`./${ locale }.mdx`] ?? terms['./ja.mdx']
-      : <NipponeseTerms/>
+
+  if (!terms)
+    throw new Error ('TOSPage: ja.mdx not found')
+
+  return (
+      <>
+	<PageHead title={message ('terms')}/>
+	<Terms/>
+      </>)
 }
 
 

frontend/src/pages/TOSPage/ja.mdx

@@ -1,16 +1,10 @@
-import { Helmet } from 'react-helmet-async'
 import MainArea from '@/components/layout/MainArea'
-import { SITE_TITLE } from '@/config'
 import { dateString } from '@/lib/utils'
 
 export const lastUpdatedAt = dateString ('2026-04-12', 'hour')
 
 
 <MainArea>
-  <Helmet>
-    <title>{`利用規約 | ${ SITE_TITLE }`}</title>
-  </Helmet>
-
   <article lang="ja" className="prose dark:prose-invert mx-auto p-4">
     # 利用規約
 

frontend/src/pages/deerjikists/DeerjikistDetailPage.tsx

@@ -9,6 +9,7 @@ import FieldError from '@/components/common/FieldError'
 import FormField from '@/components/common/FormField'
 import PageTitle from '@/components/common/PageTitle'
 import MainArea from '@/components/layout/MainArea'
+import PageHead from '@/components/common/PageHead'
 import { toast } from '@/components/ui/use-toast'
 import { PLATFORM_NAMES, PLATFORMS } from '@/consts'
 import { apiPut } from '@/lib/api'
@@ -26,7 +27,7 @@ type DeerjikistFormField =
 
 
 const DeerjikistDetailPage: FC = () => {
-  const { label } = useUITranslation ('shared')
+  const { message, label } = useUITranslation ('shared')
   const locale = useLocale ()
   const { id } = useParams ()
   const tagId = String (id ?? '')
@@ -83,6 +84,7 @@ const DeerjikistDetailPage: FC = () => {
 
   return (
       <MainArea>
+	<PageHead title={tag?.name ?? message ('common:categories.deerjikist')}/>
 	{(loading || !(tag)) ? label ('common:loading') : (
 	    <div className="max-w-xl">
 	      <PageTitle>

frontend/src/pages/help/HelpChangesPage.tsx

@@ -1,13 +1,12 @@
 import { useQuery } from '@tanstack/react-query'
 import { useMemo } from 'react'
-import { Helmet } from 'react-helmet-async'
 import { useSearchParams } from 'react-router-dom'
 
 import PrefetchLink from '@/components/PrefetchLink'
 import PageTitle from '@/components/common/PageTitle'
 import Pagination from '@/components/common/Pagination'
 import MainArea from '@/components/layout/MainArea'
-import { SITE_TITLE } from '@/config'
+import PageHead from '@/components/common/PageHead'
 import { getHelpChanges, helpEditionDate } from '@/lib/help'
 import { localeLanguage } from '@/lib/locales'
 import { useLocale } from '@/lib/useLocale'
@@ -54,9 +53,7 @@ const HelpChangesPage: FC = () => {
 
   return (
       <MainArea className="min-w-0 max-w-full">
-	<Helmet>
+	<PageHead title={message ('history')}/>
-	  <title>{message ('history').text} | {SITE_TITLE}</title>
-	</Helmet>
 	<div className="flex flex-wrap items-center justify-between gap-3">
 	  <PageTitle>{label ('history')}</PageTitle>
 	  <label className="flex items-center gap-2 text-xs text-muted-foreground">

frontend/src/pages/help/HelpDetailPage.tsx

@@ -1,10 +1,9 @@
 import { useQuery } from '@tanstack/react-query'
-import { Helmet } from 'react-helmet-async'
 import { useLocation, useParams } from 'react-router-dom'
 
 import PrefetchLink from '@/components/PrefetchLink'
 import MainArea from '@/components/layout/MainArea'
-import { SITE_TITLE } from '@/config'
+import PageHead from '@/components/common/PageHead'
 import { getHelpArticle,
 	 getHelpEditionContent,
 	 helpEditionDate,
@@ -73,11 +72,7 @@ const HelpDetailPage: FC = () => {
 
   return (
       <MainArea>
-	<Helmet>
+	<PageHead title={message ('articleTitle', { title: current?.title || identifier })}/>
-	  <title>
-	    {message ('articleTitle', { title: current?.title || identifier }).text} | {SITE_TITLE}
-	  </title>
-	</Helmet>
 
 	{requestedEdition && (
 	    <div className="text-sm flex gap-3 items-center justify-center

frontend/src/pages/help/HelpDiffPage.tsx

@@ -1,11 +1,10 @@
 import { useQuery } from '@tanstack/react-query'
-import { Helmet } from 'react-helmet-async'
 import { useParams, useSearchParams } from 'react-router-dom'
 
 import PrefetchLink from '@/components/PrefetchLink'
 import PageTitle from '@/components/common/PageTitle'
 import MainArea from '@/components/layout/MainArea'
-import { SITE_TITLE } from '@/config'
+import PageHead from '@/components/common/PageHead'
 import { getHelpArticle, getHelpDiff, resolveHelpLanguage } from '@/lib/help'
 import { localeLanguage } from '@/lib/locales'
 import { useLocale } from '@/lib/useLocale'
@@ -50,9 +49,7 @@ const HelpDiffPage: FC = () => {
 
   return (
       <MainArea className="min-w-0 max-w-full">
-	<Helmet>
+	<PageHead title={message ('diffTitle', { title })}/>
-	  <title>{message ('diffTitle', { title }).text} | {SITE_TITLE}</title>
-	</Helmet>
 	<PageTitle>{title}</PageTitle>
 
 	{diff

frontend/src/pages/help/HelpListPage.tsx

@@ -1,6 +1,5 @@
 import { useQuery } from '@tanstack/react-query'
 import { useEffect, useMemo, useState } from 'react'
-import { Helmet } from 'react-helmet-async'
 import { useSearchParams } from 'react-router-dom'
 
 import PrefetchLink from '@/components/PrefetchLink'
@@ -9,7 +8,7 @@ import FormField from '@/components/common/FormField'
 import PageTitle from '@/components/common/PageTitle'
 import Pagination from '@/components/common/Pagination'
 import MainArea from '@/components/layout/MainArea'
-import { SITE_TITLE } from '@/config'
+import PageHead from '@/components/common/PageHead'
 import { compareHelpEditions,
 	 compareHelpTitles,
 	 getHelpSearchEntries,
@@ -113,9 +112,7 @@ const HelpSearchPage: FC = () => {
 
   return (
       <MainArea className="min-w-0 max-w-full">
-	<Helmet>
+	<PageHead title={message ('title')}/>
-	  <title>{message ('title').text} | {SITE_TITLE}</title>
-	</Helmet>
 
 	<div className="max-w-xl">
 	  <div className="flex flex-wrap items-center justify-between gap-3">

frontend/src/pages/materials/MaterialDetailPage.tsx

@@ -1,6 +1,5 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useEffect, useState } from 'react'
-import { Helmet } from 'react-helmet-async'
 import { useParams } from 'react-router-dom'
 
 import { useLocale } from '@/lib/useLocale'
@@ -14,7 +13,7 @@ import TagInput from '@/components/common/TagInput'
 import MainArea from '@/components/layout/MainArea'
 import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
-import { SITE_TITLE } from '@/config'
+import PageHead from '@/components/common/PageHead'
 import {
     fetchMaterial,
     updateMaterial,
@@ -99,10 +98,8 @@ const MaterialDetailPage: FC = () => {
 
   return (
       <MainArea>
-	{material && (
+	<PageHead title={material
-	    <Helmet>
+	    ? message ('detailTitle', { name: materialTitle }) : message ('title')}/>
-	      <title>{message ('detailTitle', { name: materialTitle }).text} | {SITE_TITLE}</title>
-	    </Helmet>)}
 
 	{isLoading ? label ('common:loading') : isError ? (
 	    <p className="text-red-600 dark:text-red-300">

frontend/src/pages/materials/MaterialHistoryPage.tsx

@@ -1,6 +1,5 @@
 import { useQuery } from '@tanstack/react-query'
 import { useEffect, useState } from 'react'
-import { Helmet } from 'react-helmet-async'
 import { useLocation } from 'react-router-dom'
 
 import { useLocale, useLocaleNavigate } from '@/lib/useLocale'
@@ -9,7 +8,7 @@ import FormField from '@/components/common/FormField'
 import PageTitle from '@/components/common/PageTitle'
 import Pagination from '@/components/common/Pagination'
 import MainArea from '@/components/layout/MainArea'
-import { SITE_TITLE } from '@/config'
+import PageHead from '@/components/common/PageHead'
 import { clientScrollBehaviour } from '@/lib/clientAnimation'
 import { fetchMaterialChanges } from '@/lib/materials'
 import { materialsKeys } from '@/lib/queryKeys'
@@ -84,11 +83,7 @@ const MaterialHistoryPage: FC = () => {
 
   return (
       <MainArea>
-	<Helmet>
+	<PageHead title={message ('materialTitle')}/>
-	  <title lang={message ('materialTitle').language}>
-	    {message ('materialTitle').text} | {SITE_TITLE}
-	  </title>
-	</Helmet>
 
 	<div className="space-y-5">
 	  <PageTitle>{label ('materialTitle')}</PageTitle>

frontend/src/pages/materials/MaterialListPage.tsx

@@ -1,6 +1,5 @@
 import { useQuery } from '@tanstack/react-query'
 import { useEffect, useMemo, useState } from 'react'
-import { Helmet } from 'react-helmet-async'
 import { useLocation } from 'react-router-dom'
 
 import { useLocale, useLocaleNavigate } from '@/lib/useLocale'
@@ -12,7 +11,7 @@ import FormField from '@/components/common/FormField'
 import PageTitle from '@/components/common/PageTitle'
 import Pagination from '@/components/common/Pagination'
 import MainArea from '@/components/layout/MainArea'
-import { SITE_TITLE } from '@/config'
+import PageHead from '@/components/common/PageHead'
 import { fetchMaterials, parseMaterialFilter } from '@/lib/materials'
 import { materialsKeys } from '@/lib/queryKeys'
 import { cn, localisedDateString, inputClass } from '@/lib/utils'
@@ -412,7 +411,7 @@ const MaterialListPage: FC = () => {
 
   return (
       <MainArea>
-	<Helmet>
+	<PageHead title={message ('title')}>
 	  <style>
 	    {`
 		@font-face
@@ -421,8 +420,7 @@ const MaterialListPage: FC = () => {
 		  src: url(${ nikumaru }) format('opentype');
 		}`}
 	  </style>
-	  <title>{message ('title').text} | {SITE_TITLE}</title>
+	</PageHead>
-	</Helmet>
 
 	<div className="space-y-5">
 	  <div className="flex flex-wrap items-center justify-between gap-3">

frontend/src/pages/materials/MaterialNewPage.tsx

@@ -1,6 +1,5 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { useState } from 'react'
-import { Helmet } from 'react-helmet-async'
 import { useLocation } from 'react-router-dom'
 
 import { useLocale, useLocaleNavigate } from '@/lib/useLocale'
@@ -12,7 +11,7 @@ import TagInput from '@/components/common/TagInput'
 import MainArea from '@/components/layout/MainArea'
 import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
-import { SITE_TITLE } from '@/config'
+import PageHead from '@/components/common/PageHead'
 import { createMaterial } from '@/lib/materials'
 import { unlocalisedPath } from '@/lib/locales'
 import { materialsKeys } from '@/lib/queryKeys'
@@ -76,9 +75,7 @@ const MaterialNewPage: FC = () => {
 
   return (
       <MainArea>
-	<Helmet>
+	<PageHead title={message ('newTitle')}/>
-	  <title>{message ('newTitle').text} | {SITE_TITLE}</title>
-	</Helmet>
 
 	<Form>
 	  <PageTitle>{label ('newTitle')}</PageTitle>

frontend/src/pages/materials/MaterialSyncSuppressionsPage.tsx

@@ -1,6 +1,5 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useState } from 'react'
-import { Helmet } from 'react-helmet-async'
 
 import { useLocale } from '@/lib/useLocale'
 import FormField from '@/components/common/FormField'
@@ -8,7 +7,7 @@ import PageTitle from '@/components/common/PageTitle'
 import MainArea from '@/components/layout/MainArea'
 import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
-import { SITE_TITLE } from '@/config'
+import PageHead from '@/components/common/PageHead'
 import { createMaterialSyncSuppression, fetchMaterialSyncSuppressions } from '@/lib/materials'
 import { materialsKeys } from '@/lib/queryKeys'
 import { localisedDateString, inputClass } from '@/lib/utils'
@@ -82,9 +81,7 @@ const MaterialSyncSuppressionsPage: FC = () => {
 
   return (
       <MainArea>
-	<Helmet>
+	<PageHead title={message ('suppressions.title')}/>
-	  <title>{message ('suppressions.title').text} | {SITE_TITLE}</title>
-	</Helmet>
 
 	<div className="space-y-5">
 	  <PageTitle>{label ('suppressions.heading')}</PageTitle>

frontend/src/pages/posts/PostDetailPage.tsx

@@ -1,7 +1,6 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { motion } from 'framer-motion'
 import { useEffect, useRef, useState } from 'react'
-import { Helmet } from 'react-helmet-async'
 import { useParams } from 'react-router-dom'
 import { useLocale } from '@/lib/useLocale'
 import PostEditForm from '@/components/PostEditForm'
@@ -12,7 +11,7 @@ import TabGroup, { Tab } from '@/components/common/TabGroup'
 import MainArea from '@/components/layout/MainArea'
 import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
-import { SITE_TITLE } from '@/config'
+import PageHead from '@/components/common/PageHead'
 import { isApiError } from '@/lib/api'
 import { fetchPost, toggleViewedFlg } from '@/lib/posts'
 import { postsKeys, tagsKeys } from '@/lib/queryKeys'
@@ -32,7 +31,7 @@ type Props = { user: User | null }
 
 const PostDetailPage: FC<Props> = ({ user }) => {
   const locale = useLocale ()
-  const { label } = useUITranslation ('posts')
+  const { message, label } = useUITranslation ('posts')
   const editable = canEditContent (user)
   const behaviourSettings = useClientBehaviourSettings ()
   const thumbnailMode = behaviourSettings.thumbnailMode ?? 'normal'
@@ -111,11 +110,10 @@ const PostDetailPage: FC<Props> = ({ user }) => {
       <div
 	  data-sidebar-container
 	  className="md:flex md:flex-1 overflow-y-auto md:overflow-y-hidden">
-	<Helmet>
+	<PageHead title={post?.title || post?.url || message ('navigation:posts')}>
 	  {(post?.thumbnail || post?.thumbnailBase) && (
 	      <meta name="thumbnail" content={post.thumbnail! || post.thumbnailBase!}/>)}
-	  {post && <title>{`${ post.title || post.url } | ${ SITE_TITLE }`}</title>}
+	</PageHead>
-	</Helmet>
 
 	{post && <TagDetailSidebar post={post} className="hidden md:block"/>}
 

frontend/src/pages/posts/PostHistoryPage.tsx

@@ -1,7 +1,6 @@
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { motion } from 'framer-motion'
 import { useEffect } from 'react'
-import { Helmet } from 'react-helmet-async'
 import { useLocation } from 'react-router-dom'
 
 import { useLocale } from '@/lib/useLocale'
@@ -12,7 +11,7 @@ import Pagination from '@/components/common/Pagination'
 import { useDialogue } from '@/lib/dialogues/useDialogue'
 import MainArea from '@/components/layout/MainArea'
 import { toast } from '@/components/ui/use-toast'
-import { SITE_TITLE } from '@/config'
+import PageHead from '@/components/common/PageHead'
 import { clientAnimationTransition,
 	 clientScrollBehaviour } from '@/lib/clientAnimation'
 import { fetchPostChanges, updatePost } from '@/lib/posts'
@@ -145,11 +144,7 @@ const PostHistoryPage: FC = () => {
 
   return (
       <MainArea>
-	<Helmet>
+	<PageHead title={message ('postTitle')}/>
-	  <title lang={message ('postTitle').language}>
-	    {message ('postTitle').text} | {SITE_TITLE}
-	  </title>
-	</Helmet>
 
 	<PageTitle aria-label={pageTitleLabel} lang={message ('postTitle').language}>
 	  {label ('postTitle')}

frontend/src/pages/posts/PostImportReviewPage.tsx

@@ -1,6 +1,5 @@
 import { AnimatePresence, motion } from 'framer-motion'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { Helmet } from 'react-helmet-async'
 import { ChevronRight } from 'lucide-react'
 import { useLocation } from 'react-router-dom'
 
@@ -14,7 +13,7 @@ import PostImportRowSummary from '@/components/posts/import/PostImportRowSummary
 import { renderPostImportMessage } from '@/components/posts/import/postImportRowStatus'
 import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
-import { SITE_TITLE } from '@/config'
+import PageHead from '@/components/common/PageHead'
 import { apiGet, apiPost, isApiError } from '@/lib/api'
 import { translateUIMessage } from '@/lib/i18n'
 import { useUITranslation } from '@/lib/useUITranslation'
@@ -1059,9 +1058,7 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
 
   return (
       <>
-	<Helmet>
+	<PageHead title={message ('review.title')}/>
-	  <title>{message ('review.title').text} | {SITE_TITLE}</title>
-	</Helmet>
 
 	<MainArea className="pb-40">
 	  <div className="mx-auto max-w-6xl space-y-6">

frontend/src/pages/posts/PostImportSourcePage.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useRef, useState } from 'react'
-import { Helmet } from 'react-helmet-async'
 
 
 import { useLocale, useLocaleNavigate } from '@/lib/useLocale'
@@ -13,7 +12,7 @@ import TextArea from '@/components/common/TextArea'
 import MainArea from '@/components/layout/MainArea'
 import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
-import { SITE_TITLE } from '@/config'
+import PageHead from '@/components/common/PageHead'
 import {
     buildPostNewReviewPath,
     isPostNewReviewPathWithinLimit,
@@ -129,9 +128,7 @@ const PostImportSourcePage: FC<Props> = ({ user }) => {
 
   return (
       <MainArea>
-	<Helmet>
+	<PageHead title={uiMessage ('source.title')}/>
-	  <title>{uiMessage ('source.title').text} | {SITE_TITLE}</title>
-	</Helmet>
 
 	<Form className="max-w-4xl">
 	  <PageTitle>{label ('source.title')}</PageTitle>

frontend/src/pages/posts/PostListPage.tsx

@@ -1,6 +1,5 @@
 import { useQuery } from '@tanstack/react-query'
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
-import { Helmet } from 'react-helmet-async'
 import { useLocation } from 'react-router-dom'
 
 import { useLocale, useLocaleNavigate } from '@/lib/useLocale'
@@ -11,7 +10,7 @@ import WikiBody from '@/components/WikiBody'
 import Pagination from '@/components/common/Pagination'
 import TabGroup, { Tab } from '@/components/common/TabGroup'
 import MainArea from '@/components/layout/MainArea'
-import { SITE_TITLE } from '@/config'
+import PageHead from '@/components/common/PageHead'
 import { fetchPosts } from '@/lib/posts'
 import { postsKeys } from '@/lib/queryKeys'
 import {
@@ -36,7 +35,7 @@ const parseLimit = (value: string | null): 20 | 50 | 100 | null => {
 
 const PostListPage: FC = () => {
   const locale = useLocale ()
-  const { message, label } = useUITranslation ('posts')
+  const { message, label, siteTitle } = useUITranslation ('posts')
   const containerRef = useRef<HTMLDivElement | null> (null)
 
   const [wikiPage, setWikiPage] = useState<WikiPage | null> (null)
@@ -129,13 +128,11 @@ const PostListPage: FC = () => {
 	  data-sidebar-container
 	  className="md:flex md:flex-1 overflow-y-auto md:overflow-y-hidden"
 	  ref={containerRef}>
-	<Helmet>
+	<PageHead
-	  <title>
+	    title={tags.length
-	    {tags.length
+		? tags.join (message (anyFlg ? 'list.or' : 'list.and').text)
-	     ? `${ tags.join (message (anyFlg ? 'list.or' : 'list.and').text) } | ${ SITE_TITLE }`
+		: message ('list.tagline', { brand: siteTitle.text })}
-	     : message ('list.tagline', { brand: SITE_TITLE }).text}
+	    includeSiteName={tags.length > 0}/>
-	  </title>
-	</Helmet>
 
 	<TagSidebar posts={posts.slice (0, 20)} onClick={() => {
 	    const statesToSave = {

frontend/src/pages/posts/PostSearchPage.tsx

@@ -1,7 +1,6 @@
 import { useQuery } from '@tanstack/react-query'
 import { motion } from 'framer-motion'
 import { useEffect, useMemo, useState } from 'react'
-import { Helmet } from 'react-helmet-async'
 import { useLocation } from 'react-router-dom'
 
 import { useLocale, useLocaleNavigate } from '@/lib/useLocale'
@@ -15,7 +14,7 @@ import PageTitle from '@/components/common/PageTitle'
 import Pagination from '@/components/common/Pagination'
 import TagInput from '@/components/common/TagInput'
 import MainArea from '@/components/layout/MainArea'
-import { SITE_TITLE } from '@/config'
+import PageHead from '@/components/common/PageHead'
 import { clientAnimationTransition,
 	 clientScrollBehaviour } from '@/lib/clientAnimation'
 import { fetchPosts } from '@/lib/posts'
@@ -225,9 +224,7 @@ const PostSearchPage: FC = () => {
 
   return (
       <MainArea>
-	<Helmet>
+	<PageHead title={message ('search.title')}/>
-	  <title>{message ('search.title').text} | {SITE_TITLE}</title>
-	</Helmet>
 
 	<div className="max-w-xl">
 	  <div className="flex flex-wrap items-center justify-between gap-3">

frontend/src/pages/tags/NicoTagListPage.tsx

@@ -1,7 +1,6 @@
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { Check, LoaderCircle, Pencil, X } from 'lucide-react'
 import { Fragment, useEffect, useMemo, useState } from 'react'
-import { Helmet } from 'react-helmet-async'
 import { useLocation } from 'react-router-dom'
 
 import { useLocale, useLocaleNavigate } from '@/lib/useLocale'
@@ -15,7 +14,7 @@ import TextArea from '@/components/common/TextArea'
 import useDialogue from '@/lib/dialogues/useDialogue'
 import MainArea from '@/components/layout/MainArea'
 import { toast } from '@/components/ui/use-toast'
-import { SITE_TITLE } from '@/config'
+import PageHead from '@/components/common/PageHead'
 import { apiPut } from '@/lib/api'
 import { extractValidationError } from '@/lib/apiErrors'
 import { clientScrollBehaviour } from '@/lib/clientAnimation'
@@ -186,10 +185,8 @@ const NicoTagListPage: FC<Props> = ({ user }) => {
   }, [isError, label])
 
   return (
-      <MainArea>
+      <MainArea className="min-w-0">
-	<Helmet>
+	<PageHead title={message ('navigation:nicoLinks')}/>
-	  <title>{message ('navigation:nicoLinks').text} | {SITE_TITLE}</title>
-	</Helmet>
 
 	<div className="max-w-xl">
 	  <PageTitle>{label ('navigation:nicoLinks')}</PageTitle>
@@ -249,7 +246,7 @@ const NicoTagListPage: FC<Props> = ({ user }) => {
 	{loading
 	 ? label ('common:loading')
 	 : (
-	    <div className="mt-6">
+	    <div className="mt-6 min-w-0 max-w-full">
 	      <div className="mb-3 flex items-baseline justify-between gap-4">
 		<h2 className="text-lg font-bold">{label ('shared:results')}</h2>
 		<span className="text-sm text-gray-500 dark:text-gray-400">
@@ -259,16 +256,10 @@ const NicoTagListPage: FC<Props> = ({ user }) => {
 
 	      {nicoTags.length > 0
 	       ? (
-		  <div className="overflow-x-auto">
+		  <div className="min-w-0 max-w-full overflow-x-auto">
-		    <table className="w-full min-w-[800px] table-fixed border-collapse">
+		    <table className="w-full table-auto border-collapse">
-		      <colgroup>
+		      <thead className="border-b-2 border-black dark:border-white
-			<col className="w-64"/>
+					[&_.ainu-ui-text]:!whitespace-nowrap [&_wbr]:hidden">
-			<col className="w-[48rem]"/>
-			<col className="w-56"/>
-			<col className="w-56"/>
-			{editable && <col className="w-24"/>}
-		      </colgroup>
-		      <thead className="border-b-2 border-black dark:border-white">
 			<tr>
 			  <th className="p-2 text-left whitespace-nowrap">
 			    <SortHeader<FetchNicoTagsOrderField>
@@ -311,38 +302,44 @@ const NicoTagListPage: FC<Props> = ({ user }) => {
 				    ? 'bg-rose-50 dark:bg-rose-950/30'
 				    : 'even:bg-gray-100 dark:even:bg-gray-800')}>
 			      <td className="p-2 align-top font-semibold">
+				<div className="max-w-[24rem]">
 				  <TagLink tag={tag} withWiki={false} withCount={false}/>
+				</div>
 			      </td>
 			      <td className="p-2 align-top">
-				{tag.linkedTags.map ((linkedTag, i) => (
+				<div className="flex max-w-[24rem] flex-wrap items-start gap-1">
-				    <span key={linkedTag.id}>
+				  {tag.linkedTags.map (linkedTag => (
-				      {i > 0 && ' '}
+				      <span key={linkedTag.id} className="min-w-0 max-w-full">
 					<TagLink
 					    tag={linkedTag}
 					    linkFlg={false}
 					    withCount={false}/>
 				      </span>))}
+				</div>
 			      </td>
-			      <td className="p-2 align-top whitespace-nowrap">
+			      <td className="w-px p-2 align-top whitespace-nowrap
+					     [&_.ainu-ui-text]:!whitespace-nowrap [&_wbr]:hidden">
 				<LocalisedText language={locale}>
 				  {localisedDateString (tag.createdAt, locale)}
 				</LocalisedText>
 			      </td>
-			      <td className="p-2 align-top whitespace-nowrap">
+			      <td className="w-px p-2 align-top whitespace-nowrap
+					     [&_.ainu-ui-text]:!whitespace-nowrap [&_wbr]:hidden">
 				{tag.recentPostTagCreatedAt && (
 				    <LocalisedText language={locale}>
 				      {localisedDateString (tag.recentPostTagCreatedAt, locale)}
 				    </LocalisedText>)}
 			      </td>
 			      {editable && (
-				  <td className="p-2 text-right align-top">
+				  <td className="w-px p-2 text-right align-top">
 				    {!(isEditing) && (
 					<button
 					    type="button"
 					    onClick={() => beginEdit (tag)}
-					    className="inline-flex items-center gap-1 text-sm text-blue-700
+					    className="inline-flex w-max items-center gap-1 whitespace-nowrap
-						       hover:underline dark:text-blue-300">
+						       text-sm text-blue-700 hover:underline dark:text-blue-300
-					  <Pencil className="size-3.5"/>
+						       [&_.ainu-ui-text]:!whitespace-nowrap [&_wbr]:hidden">
+					  <Pencil className="size-3.5 shrink-0"/>
 					  {label ('nico.edit')}
 					</button>)}
 				  </td>)}

frontend/src/pages/tags/TagDetailPage.tsx

@@ -8,6 +8,7 @@ import FieldError from '@/components/common/FieldError'
 import FormField from '@/components/common/FormField'
 import PageTitle from '@/components/common/PageTitle'
 import MainArea from '@/components/layout/MainArea'
+import PageHead from '@/components/common/PageHead'
 import { toast } from '@/components/ui/use-toast'
 import { CATEGORIES } from '@/consts'
 import { apiPut } from '@/lib/api'
@@ -100,6 +101,7 @@ const TagDetailPage: FC = () => {
 
   return (
       <MainArea>
+	<PageHead title={tag?.name ?? message ('title')}/>
 	{(loading || !(tag)) ? label ('common:loading') : (
 	    <div className="max-w-xl">
 	      <PageTitle>

frontend/src/pages/tags/TagHistoryPage.tsx

@@ -1,6 +1,5 @@
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { useEffect } from 'react'
-import { Helmet } from 'react-helmet-async'
 import { useLocation } from 'react-router-dom'
 
 import { useLocale } from '@/lib/useLocale'
@@ -9,7 +8,7 @@ import PageTitle from '@/components/common/PageTitle'
 import Pagination from '@/components/common/Pagination'
 import MainArea from '@/components/layout/MainArea'
 import { toast } from '@/components/ui/use-toast'
-import { SITE_TITLE } from '@/config'
+import PageHead from '@/components/common/PageHead'
 import { apiPut } from '@/lib/api'
 import { useDialogue } from '@/lib/dialogues/useDialogue'
 import { clientScrollBehaviour } from '@/lib/clientAnimation'
@@ -68,11 +67,7 @@ const TagHistoryPage: FC = () => {
 
   return (
       <MainArea>
-	<Helmet>
+	<PageHead title={message ('tagTitle')}/>
-	  <title lang={message ('tagTitle').language}>
-	    {message ('tagTitle').text} | {SITE_TITLE}
-	  </title>
-	</Helmet>
 
 	<PageTitle>
 	  {label ('tagTitle')}

frontend/src/pages/tags/TagListPage.tsx

@@ -1,6 +1,5 @@
 import { useQuery } from '@tanstack/react-query'
 import { useEffect, useMemo, useState } from 'react'
-import { Helmet } from 'react-helmet-async'
 import { useLocation } from 'react-router-dom'
 
 import { useLocale, useLocaleNavigate } from '@/lib/useLocale'
@@ -13,7 +12,7 @@ import FormField from '@/components/common/FormField'
 import PageTitle from '@/components/common/PageTitle'
 import Pagination from '@/components/common/Pagination'
 import MainArea from '@/components/layout/MainArea'
-import { SITE_TITLE } from '@/config'
+import PageHead from '@/components/common/PageHead'
 import { CATEGORIES } from '@/consts'
 import { clientScrollBehaviour } from '@/lib/clientAnimation'
 import { tagsKeys } from '@/lib/queryKeys'
@@ -218,9 +217,7 @@ const TagListPage: FC = () => {
 
   return (
       <MainArea className="min-w-0">
-	<Helmet>
+	<PageHead title={message ('title')}/>
-	  <title>{message ('title').text} | {SITE_TITLE}</title>
-	</Helmet>
 
 	<div className="max-w-xl">
 	  <div className="flex flex-wrap items-center justify-between gap-3">

frontend/src/pages/theatres/TheatreDetailPage.tsx

@@ -1,6 +1,5 @@
 import { motion } from 'framer-motion'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { Helmet } from 'react-helmet-async'
 import { useParams } from 'react-router-dom'
 
 import { useLocale } from '@/lib/useLocale'
@@ -14,7 +13,7 @@ import FieldError from '@/components/common/FieldError'
 import useDialogue from '@/lib/dialogues/useDialogue'
 import SidebarComponent from '@/components/layout/SidebarComponent'
 import { Button } from '@/components/ui/button'
-import { SITE_TITLE } from '@/config'
+import PageHead from '@/components/common/PageHead'
 import { CATEGORIES } from '@/consts'
 import { apiDelete, apiGet, apiPatch, apiPost, apiPut, isApiError } from '@/lib/api'
 import { clientAnimationTransition,
@@ -859,10 +858,9 @@ const TheatreDetailPage: FC<Props> = ({ user }: Props) => {
 	  transition={{ layout: layoutTransition }}
 	  className="min-h-0 flex-1 overflow-y-auto bg-zinc-50 text-zinc-950
 		     md:overflow-hidden dark:bg-zinc-950 dark:text-zinc-50">
-	<Helmet>
+	<PageHead title={theatreTitle}>
 	  <meta name="robots" content="noindex"/>
-	  {theatre && <title>{theatreTitle.text} | {SITE_TITLE}</title>}
+	</PageHead>
-	</Helmet>
 
 	<div
 	    ref={sidebarContainerRef}

frontend/src/pages/users/SettingPage.tsx

@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
-import { Helmet } from 'react-helmet-async'
 import { useBeforeUnload, useLocation } from 'react-router-dom'
 
 import { useLocale, useLocaleNavigate } from '@/lib/useLocale'
@@ -17,7 +16,7 @@ import InheritDialogue from '@/components/users/InheritDialogue'
 import KeyboardSettingsSection from '@/components/users/KeyboardSettingsSection'
 import UserCodeDialogue from '@/components/users/UserCodeDialogue'
 import { CATEGORIES } from '@/consts'
-import { SITE_TITLE } from '@/config'
+import PageHead from '@/components/common/PageHead'
 import { apiPut } from '@/lib/api'
 import { i18n } from '@/lib/i18n'
 import {
@@ -1274,10 +1273,9 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
 
   return (
       <MainArea>
-	<Helmet>
+	<PageHead title={message ('title')}>
 	  <meta name="robots" content="noindex"/>
-	  <title lang={message ('title').language}>{message ('title').text} | {SITE_TITLE}</title>
+	</PageHead>
-	</Helmet>
 
 	<div className="mx-auto max-w-xl space-y-4 p-4 md:hidden">
 	  <PageTitle>{label ('title')}</PageTitle>

frontend/src/pages/wiki/WikiDetailPage.tsx

@@ -1,6 +1,5 @@
 import { useQuery } from '@tanstack/react-query'
 import { useEffect, useMemo } from 'react'
-import { Helmet } from 'react-helmet-async'
 import { useLocation, useParams } from 'react-router-dom'
 
 import { useLocale, useLocaleNavigate } from '@/lib/useLocale'
@@ -11,7 +10,7 @@ import TagLink from '@/components/TagLink'
 import WikiBody from '@/components/WikiBody'
 import TabGroup, { Tab } from '@/components/common/TabGroup'
 import MainArea from '@/components/layout/MainArea'
-import { SITE_TITLE } from '@/config'
+import PageHead from '@/components/common/PageHead'
 import { WikiIdBus } from '@/lib/eventBus/WikiIdBus'
 import { getHelpTitleIndex } from '@/lib/help'
 import { fetchPosts } from '@/lib/posts'
@@ -129,11 +128,12 @@ const WikiDetailPage: FC = () => {
 
   return (
       <MainArea>
-	<Helmet>
+	<PageHead title={{
-	  <title>{`${ effectiveTitle }${ deprecated
+	    text: `${effectiveTitle}${deprecated
-	      ? message ('labels.deprecatedSuffix').text : '' } Wiki | ${ SITE_TITLE }`}</title>
+		? message ('labels.deprecatedSuffix').text : ''} Wiki`,
+	    language: deprecated ? message ('labels.deprecatedSuffix').language : locale }}>
 	  {!(wikiPage?.body) && <meta name="robots" content="noindex"/>}
-	</Helmet>
+	</PageHead>
 
 	{(wikiPage && version) && (
 	    <div className="text-sm flex gap-3 items-center justify-center

frontend/src/pages/wiki/WikiDiffPage.tsx

@@ -1,14 +1,13 @@
 import type { FC } from 'react'
 
 import { useEffect, useState } from 'react'
-import { Helmet } from 'react-helmet-async'
 import { useLocation, useParams } from 'react-router-dom'
 
 import { useLocale } from '@/lib/useLocale'
 import { useUITranslation } from '@/lib/useUITranslation'
 import PageTitle from '@/components/common/PageTitle'
 import MainArea from '@/components/layout/MainArea'
-import { SITE_TITLE } from '@/config'
+import PageHead from '@/components/common/PageHead'
 import { apiGet } from '@/lib/api'
 import { cn } from '@/lib/utils'
 
@@ -40,9 +39,7 @@ const WikiDiffPage: FC = () => {
 
   return (
       <MainArea>
-	<Helmet>
+	<PageHead title={message ('diffTitle', { title: displayTitle })}/>
-	  <title>{message ('diffTitle', { title: displayTitle }).text} | {SITE_TITLE}</title>
-	</Helmet>
 	<PageTitle>{displayTitle}</PageTitle>
 	<div className="prose mx-auto p-4">
 	  {diff

frontend/src/pages/wiki/WikiEditPage.tsx

@@ -1,7 +1,6 @@
 import { useQueryClient } from '@tanstack/react-query'
 import MarkdownIt from 'markdown-it'
 import { useEffect, useState } from 'react'
-import { Helmet } from 'react-helmet-async'
 import MdEditor from 'react-markdown-editor-lite'
 import { useParams } from 'react-router-dom'
 
@@ -11,7 +10,7 @@ import FieldError from '@/components/common/FieldError'
 import FormField from '@/components/common/FormField'
 import MainArea from '@/components/layout/MainArea'
 import { toast } from '@/components/ui/use-toast'
-import { SITE_TITLE } from '@/config'
+import PageHead from '@/components/common/PageHead'
 import { apiGet, apiPut } from '@/lib/api'
 import { wikiKeys } from '@/lib/queryKeys'
 import { canEditContent } from '@/lib/users'
@@ -97,9 +96,7 @@ const WikiEditPage: FC<Props> = ({ user }) => {
 
   return (
       <MainArea>
-	<Helmet>
+	<PageHead title={message ('editPage')}/>
-	  <title>{`${ message ('editPage').text } | ${ SITE_TITLE }`}</title>
-	</Helmet>
 	<div className="max-w-xl mx-auto p-4 space-y-4">
 	  <h1 className="text-2xl font-bold mb-2">{label ('editPage')}</h1>
 

frontend/src/pages/wiki/WikiHistoryPage.tsx

@@ -1,5 +1,4 @@
 import { useQuery } from '@tanstack/react-query'
-import { Helmet } from 'react-helmet-async'
 import { useLocation } from 'react-router-dom'
 
 import { useLocale } from '@/lib/useLocale'
@@ -7,7 +6,7 @@ import { useUITranslation } from '@/lib/useUITranslation'
 import PrefetchLink from '@/components/PrefetchLink'
 import PageTitle from '@/components/common/PageTitle'
 import MainArea from '@/components/layout/MainArea'
-import { SITE_TITLE } from '@/config'
+import PageHead from '@/components/common/PageHead'
 import { wikiKeys } from '@/lib/queryKeys'
 import { localisedDateString } from '@/lib/utils'
 import { fetchWikiChanges } from '@/lib/wiki'
@@ -30,9 +29,7 @@ const WikiHistoryPage: FC = () => {
 
   return (
       <MainArea>
-	<Helmet>
+	<PageHead title={message ('history')}/>
-	  <title>{message ('history').text} | {SITE_TITLE}</title>
-	</Helmet>
 
 	<PageTitle>{label ('historyHeading')}</PageTitle>
 	{isLoading && <p>{label ('common:loading')}</p>}

frontend/src/pages/wiki/WikiNewPage.tsx

@@ -1,7 +1,6 @@
 import { useQueryClient } from '@tanstack/react-query'
 import MarkdownIt from 'markdown-it'
 import { useState } from 'react'
-import { Helmet } from 'react-helmet-async'
 import MdEditor from 'react-markdown-editor-lite'
 import { useLocation } from 'react-router-dom'
 import 'react-markdown-editor-lite/lib/index.css'
@@ -12,7 +11,7 @@ import FieldError from '@/components/common/FieldError'
 import FormField from '@/components/common/FormField'
 import MainArea from '@/components/layout/MainArea'
 import { toast } from '@/components/ui/use-toast'
-import { SITE_TITLE } from '@/config'
+import PageHead from '@/components/common/PageHead'
 import { apiPost } from '@/lib/api'
 import { tagsKeys, wikiKeys } from '@/lib/queryKeys'
 import { canEditContent } from '@/lib/users'
@@ -85,9 +84,7 @@ const WikiNewPage: FC<Props> = ({ user }) => {
 
   return (
       <MainArea>
-	<Helmet>
+	<PageHead title={message ('newPage')}/>
-	  <title>{`${ message ('newPage').text } | ${ SITE_TITLE }`}</title>
-	</Helmet>
 	<div className="max-w-xl mx-auto p-4 space-y-4">
 	  <h1 className="text-2xl font-bold mb-2">{label ('newPage')}</h1>
 	  <FieldError messages={baseErrors}/>

frontend/src/pages/wiki/WikiSearchPage.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useState } from 'react'
-import { Helmet } from 'react-helmet-async'
 
 import { useLocale } from '@/lib/useLocale'
 import { useUITranslation } from '@/lib/useUITranslation'
@@ -7,7 +6,7 @@ import PrefetchLink from '@/components/PrefetchLink'
 import FormField from '@/components/common/FormField'
 import PageTitle from '@/components/common/PageTitle'
 import MainArea from '@/components/layout/MainArea'
-import { SITE_TITLE } from '@/config'
+import PageHead from '@/components/common/PageHead'
 import { apiGet } from '@/lib/api'
 import { dateString, inputClass } from '@/lib/utils'
 
@@ -17,7 +16,7 @@ import type { WikiPage } from '@/types'
 
 
 const WikiSearchPage: FC = () => {
-  const { label } = useUITranslation ('shared')
+  const { message, label } = useUITranslation ('shared')
   const locale = useLocale ()
   const [title, setTitle] = useState ('')
   const [text, setText] = useState ('')
@@ -40,9 +39,7 @@ const WikiSearchPage: FC = () => {
 
   return (
       <MainArea>
-	<Helmet>
+	<PageHead title={message ('navigation:wiki')}/>
-	  <title>Wiki | {SITE_TITLE}</title>
-	</Helmet>
 
 	<div className="max-w-xl">
 	  <PageTitle>{label ('navigation:wiki')}</PageTitle>