fix(seo): json ld and preview social networks on post

eleven-labs · May 3, 2024 · 0860df8 · 0860df8
1 parent bd5a11c
commit 0860df8
Showing 1 changed file with 14 additions and 3 deletions.
diff --git a/src/hooks/useSeoPost.ts b/src/hooks/useSeoPost.ts
@@ -1,19 +1,29 @@
 import { useMeta, useScript } from 'hoofd';
 import { useTranslation } from 'react-i18next';
 
-import { PATHS } from '@/constants';
-import { generateUrl } from '@/helpers/assetHelper';
+import { DEVICES, HOST_URL, IMAGE_FORMATS, PATHS } from '@/constants';
+import { generateUrl, getCoverPath } from '@/helpers/assetHelper';
 import { generatePath } from '@/helpers/routerHelper';
 import { useTitle } from '@/hooks/useTitle';
-import { PostPageData } from '@/types';
+import { ImagePositionType, PostPageData } from '@/types';
 
 export const useSeoPost = (post: PostPageData): void => {
   const { i18n } = useTranslation();
+  const coverUrl = `${HOST_URL}${getCoverPath({
+    path: post.cover?.path,
+    format: IMAGE_FORMATS.POST_COVER,
+    pixelRatio: 2,
+    device: DEVICES.DESKTOP,
+    position: post?.cover?.position as ImagePositionType,
+  })}`;
+
   useTitle(post?.seo?.title ?? post.title);
   useMeta({ name: 'author', content: post.authors.map((author) => author.name).join(', ') });
   useMeta({ name: 'description', content: post?.seo?.description ?? post.excerpt });
+
   useMeta({ property: 'og:type', content: 'article' });
   useMeta({ property: 'og:description', content: post?.seo?.description ?? post.excerpt });
+  useMeta({ property: 'og:image', content: coverUrl });
 
   useScript({
     type: 'application/ld+json',
@@ -28,6 +38,7 @@ export const useSeoPost = (post: PostPageData): void => {
         name: author.name,
         url: generatePath(PATHS.AUTHOR, { authorUsername: author.username, lang: i18n.language }),
       })),
+      images: [coverUrl],
       publisher: {
         '@type': 'Organization',
         name: 'Eleven Labs',