🐛(frontend) fix meta title

AntoLC · AntoLC · commit db63ebd0c8be · 2025-06-11T10:21:53.000+02:00
The meta title was flickering, it was adding the
doc title, then it was coming back to the default
title.
This was due to the way the next Head component
render data.
We now use a more stable way to set the title.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -20,6 +20,7 @@ and this project adheres to
 
 -🐛(frontend) table of content disappearing #982
 -🐛(frontend) fix multiple EmojiPicker #1012
+-🐛(frontend) fix meta title #1017
 
 
 ## [3.3.0] - 2025-05-06
diff --git a/src/frontend/apps/impress/src/pages/_app.tsx b/src/frontend/apps/impress/src/pages/_app.tsx
@@ -26,6 +26,7 @@ export default function App({ Component, pageProps }: AppPropsWithLayout) {
     <>
       <Head>
         <title>{t('Docs')}</title>
+        <meta property="og:title" content={t('Docs')} key="title" />
         <meta
           name="description"
           content={t(
diff --git a/src/frontend/apps/impress/src/pages/docs/[id]/index.tsx b/src/frontend/apps/impress/src/pages/docs/[id]/index.tsx
@@ -67,14 +67,6 @@ const DocPage = ({ id }: DocProps) => {
   useCollaboration(doc?.id, doc?.content);
   const { t } = useTranslation();
 
-  useEffect(() => {
-    if (doc?.title) {
-      setTimeout(() => {
-        document.title = `${doc.title} - ${t('Docs')}`;
-      }, 100);
-    }
-  }, [doc?.title, t]);
-
   useEffect(() => {
     if (!docQuery || isFetching) {
       return;
@@ -142,7 +134,21 @@ const DocPage = ({ id }: DocProps) => {
     );
   }
 
-  return <DocEditor doc={doc} />;
+  return (
+    <>
+      <Head>
+        <title>
+          {doc.title} - {t('Docs')}
+        </title>
+        <meta
+          property="og:title"
+          content={`${doc.title} - ${t('Docs')}`}
+          key="title"
+        />
+      </Head>
+      <DocEditor doc={doc} />
+    </>
+  );
 };
 
 const Page: NextPageWithLayout = () => {
