#428

frontend/src/components/common/PageHead.tsx

@@ -1,7 +1,9 @@
 import { Helmet } from 'react-helmet-async'
+import { useLocation } from 'react-router-dom'
 
 import { useLocale } from '@/lib/useLocale'
 import { useUITranslation } from '@/lib/useUITranslation'
+import { currentRenderContext } from '@/lib/renderContext'
 
 import type { ReactNode } from 'react'
 
@@ -18,19 +20,24 @@ const PageHead = (
     { title, includeSiteName = true, description: pageDescription, canonical, children }: Props,
 ) => {
   const locale = useLocale ()
+  const location = useLocation ()
+  const origin = currentRenderContext ()?.origin
+  const pageCanonical = canonical ?? (origin == null
+      ? undefined : new URL (location.pathname + location.search, origin).href)
   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 = pageDescription ?? message ('head.description', { brand: siteTitle.text })
+  const description = pageDescription ?? pageTitle
+      ?? 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}/>
-	{canonical != null && <link rel="canonical" href={canonical}/>}
+	{pageCanonical != null && <link rel="canonical" href={pageCanonical}/>}
 	{children}
       </Helmet>)
 }