playkit-js-seo

playkit-js-seo is a kaltura player plugin that provides search engine optimization (SEO) capabilities for video content played by kaltura player SDK and managed in Kaltura Management Console (KMC). It integrates structured data (Schema.org) into the player to improve discoverability and visibility of video content on search engines.

This plugin automatically generates structured data based on the video metadata, including properties such as name, description, thumbnail URL, upload date, expiration date, duration, transcript, and chapters (if available). The structured data is then either injected directly into the player or communicated to the parent frame if the player is embedded within an iframe.

By incorporating structured data, the plugin helps search engines understand and interpret video content more effectively. This can lead to improved SEO rankings and enhanced visibility in search engine results.

It relies on kaltura player core API for getting video metadata and listing for player events.

playkit-js-seo is written in TypeScript (*.ts) (strongly typed superset of ES6), and transpiled in ECMAScript5 using Webpack.

Webpack is used to build the distro bundle and serve the local development environment.

Features

The plugin can be activated in two modes:

Basic Mode

In this mode, the SEO plugin will automatically generate structured data based on the basic video metadata, including properties such as name, description, thumbnail URL, upload date, expiration date, and duration.

• This mode requires no additional settings nor any additional dependency and works out of the box.

Enhanced Mode

In this mode, the SEO plugin includes Chapters and Transcript properties in the structured data. Chapters enables key moments feature which is a way for users to navigate video segments like chapters in a book, which can help users engage more deeply with your content. Transcript provides richer search results with relevant keywords This mode requires:

• 'preload' option must be set to 'auto' in the playback config (config.playback.preload = auto).

• Cue Points Manager Dependency: The plugin depends on the Cue Points Manager plugin to handle the cue points for chapters and transcript. Make sure the Cue Points Manager package is included and properly integrated into your application and configured in plugins section in player config.

in either case No Configuration Required

The Plugin will consistently and automatically strive to include the fullest range of available data (enhanced mode), contingent upon the presence of chapters and transcripts, and provided that the 'preload' mode is enabled.

Iframe embed VS Dynamic embed

The generated SEO structured data is either injected directly into the player or communicated to the parent frame if the player is embedded within an iframe,

In the latter, a supplementary code integration is required to be added on the parent frame (see Customers Integration Guide)

The Generated JSON-LD Data Structure

the generated SEO data to be injected would look like this:

{
  "@context": "https://schema.org",
  "@type": "VideoObject",
  "name": "Nice Video Clip",
  "description": "",
  "thumbnailUrl": "https://cfvod.kaltura.com/p/1887631/sp/1765100/thumbnail/entry_id/1_r62bdgz/version/100222/height/360/width/640",
  "uploadDate": "2016-09-27T07:09:43+00:00",
  "duration": "PDT00H12M21S",
  "contentUrl": "https://cdnapisec.kaltura.com/p/4587/sp/479/playManifest/entryId/1_z63gj3gz/protocol/https/format/mpegdash/1_e4myapi8/a.mpd",
  "expires": "2040-12-26T09:07:18+00:00",
  "hasPart": [
    {
      "@type": "Clip",
      "name": "chapter 1",
      "startOffset": 0,
      "endOffset": 24,
      "url": "https://www.example.com/example?t=0"
    },
    {
      "@type": "Clip",
      "name": "chapter 2",
      "startOffset": 24,
      "endOffset": 700,
      "url": "https://www.example.com/example?t=24.101"
    }
  ],
  "transcript": "The grass is always greener on the other side of the fence..."
}

Getting started with development

# First, checkout the repository and install the required dependencies
git clone https://github.com/kaltura/playkit-js-seo.git

# Navigate to the repo dir
cd playkit-js-seo

# Run dev-server for demo page (recompiles on file-watch, and write to actual dist fs artifacts)
npm run dev

# Before submitting a PR - Run the pre commit command
npm run pre:commit

# this command will run:

# 1. types check
# 2. lint check
# 3. generate/update types
# 4. generate/update docs

The dev server will host files on port 8000. Once started, the demo can be found running at http://localhost:8000/.

Before submitting a PR, please see our contribution guidelines.

Linter (ESlint)

Run linter:

npm run lint:check

Run linter with auto-fix mode:

npm run lint:fix

Formatting Code

Run prettier to format code

npm run prettier:fix

Type Check

Run type-check to verify TypeScript types

npm run types:check

Automated tests (Mocha/Karma)

Run all tests at once:

npm test

Run unit tests in watch mode:

npm run test:watch

Design

An overview of this project's design, can be found here.

API Docs

API docs

Usage Guide (for Playkit Maintainers)

Usage Guide

Customers Integration Guide

Customers Integration Guide

Demo

https://kaltura.github.io/playkit-js-seo/demo/canary/index.html

Compatibility

playkit-js-seo is only compatible with browsers supporting MediaSource extensions (MSE) API with 'video/MP4' mime-type inputs.

playkit-js-seo is supported on:

• Chrome 39+ for Android
• Chrome 39+ for Desktop
• Firefox 41+ for Android
• Firefox 42+ for Desktop
• IE11 for Windows 8.1+
• Edge for Windows 10+
• Safari 8+ for MacOS 10.10+
• Safari for ipadOS 13+

License

playkit-js-seo is released under Apache 2.0 License