Search Engines and Social Sharing - jwplayer/jw-showcase GitHub Wiki

Most crawlers will only read properties from the static index.html file. JW Showcase uses the siteName and description parameters from the configuration to populate the title and description tags dynamically.

Because of the above, the properties set in the config.json file will not be seen by most crawlers. In order to fix this, you need to edit those values in the index.html file.

There are two title and description elements in the index.html file. The <title> and <meta name="description"> elements are used by most search engines while the <meta property="og:..."> elements are used by social crawlers (i.e. sharing your site on Facebook or Twitter).

Please note; keep these values the same as the config.json as after the page is loaded the title will be dynamically updated.

original tags in index.html

<title>JW Showcase</title>
<meta name="description" content="JW Showcase is an open-source, dynamically generated video website built around JW Player and JW Platform services.">

<meta property="og:title" content="JW Showcase">
<meta property="og:description" content="JW Showcase is an open-source, dynamically generated video website built around JW Player and JW Platform services.">

Assuming you have the following config.json:

{
    "version": "2",
    "player": "ihWAPEHr",
    "theme": "light",
    "siteName": "My custom site",
    "description": "My custom description",
    "footerText": "Powered by JW Player",
    "options": {
        "backgroundColor": "",
    },
    "content": [{
        "playlistId": "WXu7kuaw"
    }],
    "assets": {
      "banner": "images/logo.png"
    }
}

Your index.html will look like this:

<title>My custom site</title>
<meta name="description" content="My custom description">

<meta property="og:title" content="My custom site">
<meta property="og:description" content="My custom description">

We also recommend implementing a service like prerender.io in order to help optimize your Showcase site for search engines. Their documentation can be found here.

By default Showcase includes icons in various sizes. To use custom icons replace these icons by your own icons in the corresponding size.

To add a custom Facebook and Twitter image which is shown when your site is being shared, you need to add an image (200x200 pixel minimum) to the images folder. Then update the content attribute in the <meta property="og:image" content="http://yourdomain.com/images/image.png"> tag to the full URL of your image. If you have replaced all of the icons in the above step, you can use the images/icon-256x256.png as well.