From 3584f66aaaa606caae787dbb39f199a1d852e848 Mon Sep 17 00:00:00 2001
From: fpasquet <fab.pasquet@gmail.com>
Date: Fri, 3 May 2024 14:18:05 +0200
Subject: [PATCH] fix(seo): json ld and preview social networks on post (#1123)

---
 src/helpers/assetHelper.ts | 24 +++++++++++++-----------
 src/hooks/useSeoPost.ts    | 34 ++++++++++++++++++++++++++--------
 2 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/src/helpers/assetHelper.ts b/src/helpers/assetHelper.ts
index 5e53da742..8b6283705 100644
--- a/src/helpers/assetHelper.ts
+++ b/src/helpers/assetHelper.ts
@@ -49,17 +49,17 @@ export const getCoverPath = ({
   const filename = basename(path, extname(path));
   const imageFormat = SIZES_BY_IMAGE_FORMAT[device][format];
 
-  const pathFile = isProd
+  return isProd
     ? `${directoryPath}/${filename}-w${imageFormat.width}-h${imageFormat.height}-x${pixelRatio}.${extension}`
     : `${path}?width=${imageFormat.width}&height=${imageFormat.height}&pixelRatio=${pixelRatio}&position=${position}&format=${extension}`;
-
-  return getPathFile(pathFile);
 };
 
 export const getSrcSet = (
   options: Omit<Parameters<typeof getCoverPath>[0], 'pixelRatio'> & { pixelRatios: number[] }
 ): string =>
-  options.pixelRatios.map((pixelRatio) => `${getCoverPath({ ...options, pixelRatio })} ${pixelRatio}x`).join(', ');
+  options.pixelRatios
+    .map((pixelRatio) => `${getPathFile(getCoverPath({ ...options, pixelRatio }))} ${pixelRatio}x`)
+    .join(', ');
 
 export const getMediaByDevice = (device: DeviceType): string =>
   device === DEVICES.DESKTOP ? '(min-width: 572px)' : '(max-width: 571px)';
@@ -84,13 +84,15 @@ export const getSources = (options: {
 export const getCover = (post: TransformedPostDataWithTransformedAuthors, format: ImageFormatType): PictureProps => ({
   sources: getSources({ path: post.cover?.path, format, position: post?.cover?.position as ImagePositionType }),
   img: {
-    src: getCoverPath({
-      path: post.cover?.path,
-      format,
-      pixelRatio: 1,
-      device: DEVICES.DESKTOP,
-      position: post?.cover?.position as ImagePositionType,
-    }),
+    src: getPathFile(
+      getCoverPath({
+        path: post.cover?.path,
+        format,
+        pixelRatio: 1,
+        device: DEVICES.DESKTOP,
+        position: post?.cover?.position as ImagePositionType,
+      })
+    ),
     alt: post.cover?.alt ?? post.title,
     width: SIZES_BY_IMAGE_FORMAT[DEVICES.DESKTOP][format].width,
     height: SIZES_BY_IMAGE_FORMAT[DEVICES.DESKTOP][format].height,
diff --git a/src/hooks/useSeoPost.ts b/src/hooks/useSeoPost.ts
index be832ed79..6417c96ac 100644
--- a/src/hooks/useSeoPost.ts
+++ b/src/hooks/useSeoPost.ts
@@ -1,33 +1,51 @@
 import { useMeta, useScript } from 'hoofd';
 import { useTranslation } from 'react-i18next';
 
-import { PATHS } from '@/constants';
-import { generateUrl } from '@/helpers/assetHelper';
+import { DEVICES, 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 coverPath = getCoverPath({
+    path: post.cover?.path,
+    format: IMAGE_FORMATS.POST_COVER,
+    pixelRatio: 2,
+    device: DEVICES.DESKTOP,
+    position: post?.cover?.position as ImagePositionType,
+  });
+  const coverUrl = generateUrl(coverPath);
+  const description = post?.seo?.description ?? post.excerpt;
+  const authors = post.authors.map((author) => author.name).join(', ');
+
   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({ name: 'author', content: authors });
+  useMeta({ name: 'description', content: description });
+
   useMeta({ property: 'og:type', content: 'article' });
-  useMeta({ property: 'og:description', content: post?.seo?.description ?? post.excerpt });
+  useMeta({ property: 'og:description', content: description });
+  useMeta({ property: 'og:image', content: coverUrl });
+
+  useMeta({ property: 'article:author', content: authors });
+  useMeta({ property: 'article:publisher', content: 'Eleven Labs' });
+  useMeta({ property: 'article:published_time', content: post.date });
 
   useScript({
     type: 'application/ld+json',
     text: JSON.stringify({
       '@context': 'https://schema.org',
-      '@type': 'BlogPosting',
+      '@type': 'NewsArticle',
       headline: post.title,
       description: post.excerpt,
-      datePublished: post?.date,
+      datePublished: post.date,
       author: post.authors.map((author) => ({
         '@type': 'Person',
         name: author.name,
         url: generatePath(PATHS.AUTHOR, { authorUsername: author.username, lang: i18n.language }),
       })),
+      images: [coverUrl],
       publisher: {
         '@type': 'Organization',
         name: 'Eleven Labs',