diff --git a/TODO.md b/TODO.md
index 7580a19..8bbf0ce 100644
--- a/TODO.md
+++ b/TODO.md
@@ -8,7 +8,6 @@
 - Automatically generate different sizes of images
 - Handle relationship in RichText Content
 - On most pages (collectibles + pages), there is a gap in the breakpoints where no thumbnail is displayed.
-- Add duration on audio/video preview cards
 - Add proper localization for formatFilesize, formatInches, formatMillimeters, formatPounds, and formatGrams
 
 ## Mid term
diff --git a/src/pages/[locale]/collectibles/[slug]/gallery/[index].astro b/src/pages/[locale]/collectibles/[slug]/gallery/[index].astro
index 22ae37d..bb24d95 100644
--- a/src/pages/[locale]/collectibles/[slug]/gallery/[index].astro
+++ b/src/pages/[locale]/collectibles/[slug]/gallery/[index].astro
@@ -3,6 +3,7 @@ import AppEmptyLayout from "components/AppLayout/AppEmptyLayout.astro";
 import Lightbox from "components/Lightbox.astro";
 import { getI18n } from "src/i18n/i18n";
 import { payload } from "src/shared/payload/payload-sdk";
+import { formatInlineTitle, formatRichTextToString } from "src/utils/format";
 import { fetchOr404 } from "src/utils/responses";
 
 const slug = Astro.params.slug!;
@@ -53,7 +54,13 @@ const tagsAndAttributes = [
 
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
-<AppEmptyLayout parentPages={parentPages}>
+<AppEmptyLayout
+  openGraph={{
+    thumbnail: image,
+    description: description ? formatRichTextToString(description) : undefined,
+    title: formatInlineTitle({ pretitle, title, subtitle }),
+  }}
+  parentPages={parentPages}>
   <Lightbox
     image={image}
     pretitle={pretitle}
diff --git a/src/pages/[locale]/collectibles/[slug]/gallery/index.astro b/src/pages/[locale]/collectibles/[slug]/gallery/index.astro
index 616a316..65f4f0d 100644
--- a/src/pages/[locale]/collectibles/[slug]/gallery/index.astro
+++ b/src/pages/[locale]/collectibles/[slug]/gallery/index.astro
@@ -4,23 +4,30 @@ import AppLayoutTitle from "components/AppLayout/components/AppLayoutTitle.astro
 import RichText from "components/RichText/RichText.astro";
 import { getI18n } from "src/i18n/i18n";
 import { payload } from "src/shared/payload/payload-sdk";
+import { formatInlineTitle, formatRichTextToString } from "src/utils/format";
 import { fetchOr404 } from "src/utils/responses";
 
 const slug = Astro.params.slug!;
-const { getLocalizedMatch, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
+const { getLocalizedMatch, getLocalizedUrl, t } = await getI18n(Astro.locals.currentLocale);
 
 const gallery = await fetchOr404(() => payload.getCollectibleGallery(slug));
 if (gallery instanceof Response) {
   return gallery;
 }
 
-const { translations, parentPages, images } = gallery;
+const { translations, parentPages, images, thumbnail } = gallery;
 const translation = getLocalizedMatch(translations);
 ---
 
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
-<AppEmptyLayout parentPages={parentPages}>
+<AppEmptyLayout
+  openGraph={{
+    title: `${formatInlineTitle(translation)} (${t("collectibles.gallery")})`,
+    description: translation.description && formatRichTextToString(translation.description),
+    thumbnail,
+  }}
+  parentPages={parentPages}>
   <AppLayoutTitle
     title={translation.title}
     pretitle={translation.pretitle}
diff --git a/src/pages/[locale]/collectibles/[slug]/scans/[index].astro b/src/pages/[locale]/collectibles/[slug]/scans/[index].astro
index 72c9f93..896891c 100644
--- a/src/pages/[locale]/collectibles/[slug]/scans/[index].astro
+++ b/src/pages/[locale]/collectibles/[slug]/scans/[index].astro
@@ -3,23 +3,33 @@ import AppEmptyLayout from "components/AppLayout/AppEmptyLayout.astro";
 import Lightbox from "components/Lightbox.astro";
 import { getI18n } from "src/i18n/i18n";
 import { payload } from "src/shared/payload/payload-sdk";
+import { formatInlineTitle, formatRichTextToString } from "src/utils/format";
 import { fetchOr404 } from "src/utils/responses";
 
 const slug = Astro.params.slug!;
 const index = Astro.params.index!;
-const { formatScanIndexShort, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
+const { formatScanIndexShort, getLocalizedMatch, getLocalizedUrl } = await getI18n(
+  Astro.locals.currentLocale
+);
 
 const scanPage = await fetchOr404(() => payload.getCollectibleScanPage(slug, index));
 if (scanPage instanceof Response) {
   return scanPage;
 }
 
-const { parentPages, previousIndex, nextIndex, image } = scanPage;
+const { parentPages, previousIndex, nextIndex, image, translations } = scanPage;
+const translation = getLocalizedMatch(translations);
 ---
 
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
-<AppEmptyLayout parentPages={parentPages}>
+<AppEmptyLayout
+  openGraph={{
+    title: `${formatInlineTitle(translation)} (${index})`,
+    description: translation.description && formatRichTextToString(translation.description),
+    thumbnail: image,
+  }}
+  parentPages={parentPages}>
   <Lightbox
     image={image}
     title={formatScanIndexShort(index)}
diff --git a/src/pages/[locale]/collectibles/[slug]/scans/index.astro b/src/pages/[locale]/collectibles/[slug]/scans/index.astro
index 69f4268..8c6e22c 100644
--- a/src/pages/[locale]/collectibles/[slug]/scans/index.astro
+++ b/src/pages/[locale]/collectibles/[slug]/scans/index.astro
@@ -7,6 +7,7 @@ import { getI18n } from "src/i18n/i18n";
 import { payload } from "src/shared/payload/payload-sdk";
 import { fetchOr404 } from "src/utils/responses";
 import ScanPreview from "./_components/ScanPreview.astro";
+import { formatInlineTitle, formatRichTextToString } from "src/utils/format";
 
 const slug = Astro.params.slug!;
 const { getLocalizedMatch, t } = await getI18n(Astro.locals.currentLocale);
@@ -16,7 +17,7 @@ if (scans instanceof Response) {
   return scans;
 }
 
-const { translations, credits, cover, pages, dustjacket, obi, parentPages } = scans;
+const { translations, credits, cover, pages, dustjacket, obi, parentPages, thumbnail } = scans;
 
 const translation = getLocalizedMatch(translations);
 
@@ -38,7 +39,13 @@ const hasOutsideObi = obi ? Object.keys(obi).some((value) => !value.includes("in
 
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
-<AppEmptyLayout parentPages={parentPages}>
+<AppEmptyLayout
+  openGraph={{
+    title: `${formatInlineTitle(translation)} (${t("collectibles.scans")})`,
+    description: translation.description && formatRichTextToString(translation.description),
+    thumbnail,
+  }}
+  parentPages={parentPages}>
   <AppLayoutTitle
     title={translation.title}
     pretitle={translation.pretitle}
diff --git a/src/shared/payload/payload-sdk.ts b/src/shared/payload/payload-sdk.ts
index 020f254..44e434c 100644
--- a/src/shared/payload/payload-sdk.ts
+++ b/src/shared/payload/payload-sdk.ts
@@ -1637,6 +1637,7 @@ export type EndpointCollectibleGalleryImage = {
     pretitle?: string;
     title: string;
     subtitle?: string;
+    description?: RichTextContent;
   }[];
   image: EndpointImage;
   previousIndex?: string;
@@ -1652,6 +1653,7 @@ export type EndpointCollectibleScanPage = {
     pretitle?: string;
     title: string;
     subtitle?: string;
+    description?: RichTextContent;
   }[];
   image: EndpointScanImage;
   previousIndex?: string;