feat(site): framework-specific SEO metadata for docs (#541)

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
2026-08-16 02:45:09 +00:00 · 2026-02-18 11:21:15 -06:00
parent 78e8e3a8e1
commit e936ea4e44
22 changed files with 160 additions and 30 deletions
@@ -1,6 +1,6 @@
 ---
 title: Architecture
-description: Understanding the three-tier architecture of Video.js v10 - State, UI, and Renderers
+description: How Video.js structures its video player — state management, UI components, and platform renderers
 ---

 import FrameworkCase from '@/components/docs/FrameworkCase.astro';
@@ -1,6 +1,6 @@
 ---
 title: Skins
-description: Understanding skins in Video.js v10 - packaged sets of UI components and styles
+description: Packaged sets of video player UI components and styles that you can customize or replace
 ---

 import FrameworkCase from '@/components/docs/FrameworkCase.astro';
@@ -1,6 +1,6 @@
 ---
 title: UI components
-description: Understanding Video.js v10's primitive-based component architecture
+description: Primitive-based component architecture for building accessible, composable video player controls
 ---

 import FrameworkCase from '@/components/docs/FrameworkCase.astro';
@@ -1,6 +1,6 @@
 ---
 title: Installation
-description: Get started quickly with Video.js by building your first embed code
+description: Install Video.js and build your first player with streaming support and accessible controls
 ---

 import JSPicker from '@/components/installation/JSPicker.astro';
@@ -21,7 +21,13 @@ import { TabsRoot, TabsList, TabsPanel, Tab } from '@/components/Tabs.tsx';
 Video.js v10 is currently in _beta_. The API may evolve with [feedback&#x1F64F;](https://github.com/videojs/v10/issues). See the [Changelog](https://github.com/videojs/v10/blob/main/CHANGELOG.md)\[todo\] for recent updates and the <DocsLink slug="concepts/v10-roadmap">Roadmap</DocsLink> for more details on what's coming.
 </Aside>

-Video.js is **audio and video player components** &mdash; intentionally built to achieve **minimal bundle sizes** while providing **framework-specific customization** and a **great viewer experience**.
+<FrameworkCase frameworks={["react"]}>
+Video.js is a **React video player component library** &mdash; composable primitives, hooks, and TypeScript types for building accessible, customizable players with minimal bundle size.
+</FrameworkCase>
+<FrameworkCase frameworks={["html"]}>
+Video.js is an **HTML video player built on custom elements** &mdash; lightweight, framework-free components for building accessible, customizable players with minimal bundle size.
+</FrameworkCase>
+
 Answer the questions below to get started quickly with your first embed code.

 ## Choose your JS framework
@@ -2,7 +2,7 @@
 title: BufferingIndicator
 frameworkTitle:
  html: media-buffering-indicator
-description: A component that displays a loading indicator when media is buffering
+description: Loading indicator that displays when the video player is buffering or waiting for data
 ---

 import ApiReference from "@/components/docs/api-reference/ApiReference.astro";
@@ -2,7 +2,7 @@
 title: Controls
 frameworkTitle:
  html: media-controls
-description: Containers for composing and auto-hiding player controls
+description: Container component for composing and auto-hiding video player controls on user interaction
 ---

 import ApiReference from "@/components/docs/api-reference/ApiReference.astro";
@@ -2,7 +2,7 @@
 title: FullscreenButton
 frameworkTitle:
  html: media-fullscreen-button
-description: A button component for entering and exiting fullscreen mode
+description: Accessible fullscreen toggle button with keyboard support and state reflection
 ---

 import ApiReference from "@/components/docs/api-reference/ApiReference.astro";
@@ -2,7 +2,7 @@
 title: MuteButton
 frameworkTitle:
  html: media-mute-button
-description: A button component for muting and unmuting audio playback
+description: Accessible mute/unmute button with keyboard support and volume state reflection
 ---

 import ApiReference from "@/components/docs/api-reference/ApiReference.astro";
@@ -2,7 +2,7 @@
 title: PiPButton
 frameworkTitle:
  html: media-pip-button
-description: A button component for entering and exiting picture-in-picture mode
+description: Accessible picture-in-picture toggle button with keyboard support and state reflection
 ---

 import ApiReference from "@/components/docs/api-reference/ApiReference.astro";
@@ -2,7 +2,7 @@
 title: PlayButton
 frameworkTitle:
  html: media-play-button
-description: A button component for playing and pausing media playback
+description: Accessible play/pause button with keyboard support and customizable rendering
 ---

 import ApiReference from "@/components/docs/api-reference/ApiReference.astro";
@@ -2,7 +2,7 @@
 title: Poster
 frameworkTitle:
  html: media-poster
-description: Poster image component that stays visible until playback starts
+description: Poster image component that displays a thumbnail until video playback starts
 ---

 import ApiReference from "@/components/docs/api-reference/ApiReference.astro";
@@ -2,7 +2,7 @@
 title: SeekButton
 frameworkTitle:
  html: media-seek-button
-description: A button component for seeking media playback forward or backward by a specified number of seconds
+description: Accessible seek button for skipping forward or backward by a configurable number of seconds
 ---

 import ApiReference from "@/components/docs/api-reference/ApiReference.astro";
@@ -2,7 +2,7 @@
 title: Time
 frameworkTitle:
  html: media-time
-description: Components for displaying and composing media time information
+description: Time display components for showing current time, duration, and remaining time in a video player
 ---

 import ApiReference from "@/components/docs/api-reference/ApiReference.astro";