fix(seo): promote embedded videos as primary page content

Author: Llewellyn500

app/posts/[title]/page.tsx

@@ -16,6 +16,7 @@ import {
   buildBreadcrumbSchema,
   buildPublisherSchema,
 } from "@/lib/seo";
+import { removeYouTubeIframe } from "@/lib/video";
 
 type RouteParams = {
   title: string;
@@ -153,6 +154,9 @@ export default async function ArticleDetails({
   }
 
   const processedHtml = await processMarkdown(article.content || "");
+  const articleHtml = article.video?.videoId
+    ? removeYouTubeIframe(processedHtml, article.video.videoId)
+    : processedHtml;
   const articleUrl = absoluteUrl(`/posts/${article.slug}`);
   const articleImages = Array.from(
     new Set(
@@ -204,23 +208,6 @@ export default async function ArticleDetails({
     ]),
   ];
 
-  if (article.video) {
-    jsonLd.push({
-      "@context": "https://schema.org",
-      "@type": "VideoObject",
-      name: article.title,
-      description: article.description,
-      thumbnailUrl: [article.video.thumbnailUrl || absoluteUrl(article.img)],
-      uploadDate: article.date.toISOString(),
-      contentUrl: article.video.url,
-      embedUrl: article.video.embedUrl,
-      potentialAction: {
-        "@type": "WatchAction",
-        target: article.video.url,
-      },
-    });
-  }
-
   return (
     <main className="max-w-[95rem] w-full mx-auto px-4 md:pt-8 sm:pt-4 xs:pt-2 lg:pb-4 md:pb-4 sm:pb-2 xs:pb-2">
       <JsonLd data={jsonLd} />
@@ -282,18 +269,28 @@ export default async function ArticleDetails({
         </div>
       </article>
 
-      <div className="relative w-full h-auto aspect-[16/9]">
-        <Image
-          src={article.img}
-          alt={article.imgAlt}
-          fill
-          sizes="(min-width: 768px) 768px, 100vw"
-          className="object-cover w-full h-auto"
+      {article.video?.embedUrl ? (
+        <iframe
+          src={article.video.embedUrl}
+          title={`${article.title} video`}
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+          allowFullScreen
+          className="block w-full !h-auto !my-0 aspect-video"
         />
-      </div>
+      ) : (
+        <div className="relative w-full h-auto aspect-[16/9]">
+          <Image
+            src={article.img}
+            alt={article.imgAlt}
+            fill
+            sizes="(min-width: 768px) 768px, 100vw"
+            className="object-cover w-full h-auto"
+          />
+        </div>
+      )}
 
       <div className="w-full">
-        <ArticleContent htmlContent={processedHtml} />
+        <ArticleContent htmlContent={articleHtml} />
       </div>
 
       {article.author ? (

lib/content.ts

@@ -7,6 +7,7 @@ import {
   slugifySegment,
 } from "@/lib/seo";
 import { safeTimestampToDate } from "@/lib/utils";
+import { extractYouTubeEmbedId, extractYouTubeId } from "@/lib/video";
 
 const ARTICLE_UPDATED_FIELDS = [
   "updatedAt",
@@ -205,57 +206,21 @@ function extractBiography(source: unknown, name: string) {
   return { summary: fallback, body: fallback };
 }
 
-function extractYouTubeId(rawValue: string): string | undefined {
-  const value = rawValue.trim();
-
-  if (/^[a-zA-Z0-9_-]{11}$/.test(value)) {
-    return value;
-  }
-
-  try {
-    const url = new URL(value);
-    const hostname = url.hostname.toLowerCase();
-
-    if (hostname === "youtu.be") {
-      const id = url.pathname.replace(/\//g, "").trim();
-      return /^[a-zA-Z0-9_-]{11}$/.test(id) ? id : undefined;
-    }
-
-    if (hostname === "youtube.com" || hostname.endsWith(".youtube.com")) {
-      const searchId = url.searchParams.get("v");
-      if (searchId && /^[a-zA-Z0-9_-]{11}$/.test(searchId)) {
-        return searchId;
-      }
-
-      const pathSegments = url.pathname.split("/").filter(Boolean);
-      const embeddedId = pathSegments[pathSegments.length - 1];
-      if (embeddedId && /^[a-zA-Z0-9_-]{11}$/.test(embeddedId)) {
-        return embeddedId;
-      }
-    }
-  } catch {
-    return undefined;
-  }
-
-  return undefined;
-}
-
 function buildVideoRecord(
   source: Record<string, unknown>,
 ): ArticleVideoRecord | undefined {
   const directUrl = pickString(source, VIDEO_URL_FIELDS);
   const sourceUrl = pickString(source, ["sourceUrl", "source_url"]);
+  const content = pickString(source, ["content"]);
   const candidate =
     directUrl ||
     (sourceUrl && /(youtu\.be|youtube\.com|vimeo\.com)/i.test(sourceUrl)
       ? sourceUrl
       : undefined);
 
-  if (!candidate) {
-    return undefined;
-  }
-
-  const videoId = extractYouTubeId(candidate);
+  const videoId = candidate
+    ? extractYouTubeId(candidate)
+    : extractYouTubeEmbedId(content || "");
   if (videoId) {
     return {
       platform: "youtube",
@@ -266,7 +231,7 @@ function buildVideoRecord(
     };
   }
 
-  if (!/^https?:\/\//i.test(candidate)) {
+  if (!candidate || !/^https?:\/\//i.test(candidate)) {
     return undefined;
   }
 

lib/video.test.mts

@@ -0,0 +1,44 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import {
+  extractYouTubeEmbedId,
+  extractYouTubeId,
+  removeYouTubeIframe,
+} from "./video.ts";
+
+test("normalizes and removes the selected YouTube embed", () => {
+  const videoId = "6JgkhKIoFOA";
+  const iframe = `<iframe src="https://www.youtube.com/embed/${videoId}?si=test" title="YouTube video player"></iframe>`;
+  const html = `${iframe}<p>Keep the guide.</p>${iframe}`;
+
+  assert.equal(extractYouTubeEmbedId(iframe), videoId);
+  assert.equal(extractYouTubeId(`https://youtu.be/${videoId}`), videoId);
+  assert.equal(
+    extractYouTubeEmbedId(
+      `<p>See https://youtube.com/watch?v=${videoId} for more.</p>`,
+    ),
+    undefined,
+  );
+  assert.equal(
+    extractYouTubeId(`https://notyoutube.com/embed/${videoId}`),
+    undefined,
+  );
+  assert.equal(
+    extractYouTubeId(`https://evil-youtube.com/embed/${videoId}`),
+    undefined,
+  );
+  assert.equal(
+    extractYouTubeEmbedId(
+      `<iframe src="https://www.youtube.com/embed/${videoId}X"></iframe>`,
+    ),
+    undefined,
+  );
+  assert.equal(removeYouTubeIframe(html, videoId), `<p>Keep the guide.</p>`);
+
+  const otherVideoId = "5zlE8KEz6wk";
+  const otherIframe = `<iframe src="https://www.youtube.com/embed/${otherVideoId}"></iframe>`;
+  assert.equal(
+    removeYouTubeIframe(`${iframe}${otherIframe}`, otherVideoId),
+    iframe,
+  );
+});

lib/video.ts

@@ -0,0 +1,66 @@
+const YOUTUBE_ID_PATTERN = /^[a-zA-Z0-9_-]{11}$/;
+const YOUTUBE_IFRAME_PATTERN =
+  /<iframe\b[^>]*\bsrc\s*=\s*(["'])(https:\/\/(?:(?:www|m)\.)?youtube(?:-nocookie)?\.com\/embed\/[a-zA-Z0-9_-]{11}(?:[?&#][^"']*)?)\1[^>]*>[\s\S]*?<\/iframe>/gi;
+
+export function extractYouTubeId(rawValue: string): string | undefined {
+  const value = rawValue.trim();
+
+  if (YOUTUBE_ID_PATTERN.test(value)) {
+    return value;
+  }
+
+  try {
+    const url = new URL(value);
+    const hostname = url.hostname.toLowerCase();
+    const isYouTubeHost =
+      hostname === "youtube.com" ||
+      hostname.endsWith(".youtube.com") ||
+      hostname === "youtube-nocookie.com" ||
+      hostname.endsWith(".youtube-nocookie.com");
+
+    if (hostname === "youtu.be") {
+      const pathSegments = url.pathname.split("/").filter(Boolean);
+      return pathSegments.length === 1 &&
+        YOUTUBE_ID_PATTERN.test(pathSegments[0])
+        ? pathSegments[0]
+        : undefined;
+    }
+
+    if (!isYouTubeHost) {
+      return undefined;
+    }
+
+    if (url.pathname === "/watch") {
+      const videoId = url.searchParams.get("v") || "";
+      return YOUTUBE_ID_PATTERN.test(videoId) ? videoId : undefined;
+    }
+
+    const pathSegments = url.pathname.split("/").filter(Boolean);
+    return pathSegments.length === 2 &&
+      ["embed", "shorts", "live"].includes(pathSegments[0]) &&
+      YOUTUBE_ID_PATTERN.test(pathSegments[1])
+      ? pathSegments[1]
+      : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+export function extractYouTubeEmbedId(html: string): string | undefined {
+  for (const match of html.matchAll(YOUTUBE_IFRAME_PATTERN)) {
+    const videoId = extractYouTubeId(match[2]);
+    if (videoId) {
+      return videoId;
+    }
+  }
+
+  return undefined;
+}
+
+export function removeYouTubeIframe(html: string, videoId: string) {
+  return html.replace(
+    YOUTUBE_IFRAME_PATTERN,
+    (iframe, _quote: string, sourceUrl: string) =>
+      extractYouTubeId(sourceUrl) === videoId ? "" : iframe,
+  );
+}