diff --git a/src/hooks/useSeoPost.ts b/src/hooks/useSeoPost.ts index be832ed79..28a0a891d 100644 --- 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',