SSR & Prerendering

Server-side rendering (SSR) and static prerendering let the initial HTML response carry the discovery layer. This helps users and crawlers that do not execute JavaScript and removes unnecessary dependence on a client-side request.

Include these in the initial HTML:

• The page <title>, meta description, canonical URL, robots directives, and social metadata.
• One clear <h1>, the media title and description, and relevant surrounding copy.
• The <img>, <video>, <audio>, or <iframe> container and its important attributes.
• VideoObject, ImageObject, AudioObject, and other applicable JSON-LD.
• A transcript or useful summary and normal anchor links to related content.

SSR does not mean sending the full video or audio file with the HTML response. Render the markup and metadata on the server; let the browser fetch media efficiently when needed.

A Next.js watch page can generate metadata and JSON-LD from the same content record:

export const metadata = {
  title: "How to Build a Brand-Compliant Video Workflow",
  description:
    "A practical walkthrough of capture, review, rendering, and publishing.",
  alternates: { canonical: "/guides/brand-video" },
};

export default function WatchPage() {
  return (
    <main>
      <h1>How to Build a Brand-Compliant Video Workflow</h1>
      <p>
        A practical walkthrough of capture, review, rendering, and publishing.
      </p>
      <VideoPlayer videoId="brand-video" />
      <Transcript videoId="brand-video" />
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify(videoStructuredData),
        }}
      />
    </main>
  );
}

Do not load the player only after a click, swipe, or other user action if that leaves no meaningful media markup for crawlers. If a performance facade delays the third-party player, keep the title, poster, summary, structured data, and a normal link in the initial page.

<h1>Brand workflow video</h1>
<p>Summary and transcript...</p>
<video poster="poster.jpg">