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.

[kaltura player]: https://github.com/kaltura/kaltura-player-js.
[Kaltura Management Console (KMC)]: https://corp.kaltura.com/resources/case-studies/kaltura-management-console-kmc-walkthrough/.
[ecmascript6]: https://github.com/ericdouglas/ES6-Learning#articles--tutorials
[typescript]: https://www.typescriptlang.org/
[typescript compiler]: https://www.typescriptlang.org/docs/handbook/compiler-options.html
[webpack]: https://webpack.js.org/

Features

The plugin can be activated in two modes:

$3

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.

$3

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:

``json
{
"@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

`sh


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.

$3

Run linter:

`
npm run lint:check
`

Run linter with auto-fix mode:

`
npm run lint:fix
`

$3

Run prettier to format code

`
npm run prettier:fix
`

$3

Run type-check to verify TypeScript types

`
npm run types:check
`

$3

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