How to generate SEO friendly embeds using HTML tags

How to generate SEO friendly embeds using HTML tags

When it comes to delivering content across the web, SEO optimization can effectively boost your efforts of reaching a target audience. For this reason THRON provides all the facilities to create content that both your audience and search engines will enjoy.

Embed codes made via THRON Player will automatically provide search engines with all the information needed for a better content indexing (title, thumbnail, description) etc.

When making HTML embeds you will have to include additional information by yourself, we recommend you to refer to the schema.org markup, which also recommended by Google.

Let's see how to make and HTML embed of THRON content which is "SEO-friendly", using a valid pkey. The code samples provided also includes the tracking library and the "tci" class on html tags related to media elements in order to enable tracking. If you don't want a specific content to be tracked you simply have to remove the "tci" class.

In detail, we can easily generate HTML TAGs for:

  • images or content thumbnails;
  • video;
  • audio.

It is sufficient to create the HTML TAG recalling an "src" attribute with the corresponding endpoint provided by the public web service.

 

Images

An HTML embed returning a THRON image has the following form:

<script type="text/javascript" id="ta_bootstrapper" src="//[clientId]-cdn.thron.com/shared/plugins/tracking/current/bootstrapper-min.js"></script>
<div itemscope itemtype="http://schema.org/ImageObject">
    <meta itemprop="name" content="<Content title here>"/>
    <meta itemprop="description" content="<Content description here>"/>
    <meta itemprop="uploadDate" content="<Content creation date here>"/>
    <meta itemprop="width" content="<width here>"/>
    <meta itemprop="height" content="<height here>"/>
    <meta itemprop="contentUrl" content="<content URL here>"/>
    <img class="tci" alt="<Content title - Content description here>" src="<Content URL here>"/>
</div>

Parameters to be included in the html are:

  • name: has to be filled with the content title;
  • description: has to be filled with the content description;
  • uploadDate: has to be filled with the content creation date using ISO-8601 format;
  • width: the desired width of the image;
  • height: the desired height of the image;
  • alt: content title and description;
  • contentUrl / img -> src: the url of the image, with the form: 
//[clientId]-cdn.thron.com/delivery/public/image/[clientId]/[contentId]/[pkey]/std/[divArea]/[prettyName]?[rtieParameters]

where:

  • clientId: the domain name used to access THRON, usually your company name;
  • contentId: the id of the image, can be either the xcontentId or the prettyId;
  • pkey: a valid pkey for the image
  • divArea: the desired size of the image
  • prettyName: the content prettyId and the extension (e.g. house.jpeg)
  • rtieParameters: all the parameters for the cropping of the image via RTIE. Parameters are documented in this [LINK] article. Use the form "paramName=value"; separate each parameter with a "&" character.

NOTE: This embed will automatically include content tracking. If you wish to not track the image you will have to exclude the "tci" class from the img tag.

 

Video

An HTML embed returning a THRON video has the following form:

<script type="text/javascript" id="ta_bootstrapper" src="//[clientId]-cdn.thron.com/shared/plugins/tracking/current/bootstrapper-min.js"></script>
<div itemscope itemtype="http://schema.org/VideoObject">
    <meta itemprop="name" content="<Content title here>"/>
    <meta itemprop="description" content="<Content description here>"/>
    <meta itemprop="alternateName" content="<Content title and description here>"/>
    <meta itemprop="thumbnailUrl" content="<Thumbnail URL here>"/>
    <meta itemprop="uploadDate" content="<Content creation date here>"/>
    <meta itemprop="contentUrl" content="<Content URL here>"/>
    <video class="tci" controls style="width:<width here>; height:<height here>;" poster="Thumbnail URL here">
        <source src="<Channel URL here>"><!-- Download -->
        <source src="<Channel URL here>"><!-- Streaming HLS HD -->
        <source src="<Channel URL here"><!-- Download HD -->
        <source src="Channel URL here"><!-- Mp4 4K -->
    </video>
</div>

Parameters to be included in the html are:

  • clientId: the domain name used to access THRON, usually matches your company name;
  • name: the title of the video to be embedded;
  • description: the description of the video to be embedded;
  • alternateName: title and description of the video to be embedded, use the form "Title - Description";
  • thumbnailUrl: the url of the thumbnail for the video, with the following form:
//[clientId]-cdn.thron.com/delivery/public/thumbnail/[clientId]/[contentId]/[pkey] /std/[divArea]/[prettyName]?[rtieParams]
    • clientId: the domain name used to access THRON, usually matches your company name;
    • contentId: the identifier of the video, can either be the xcontentId or the prettyId;
    • pkey: a valid pkey for the video;
    • divArea: the size of the div where the video has to be included
    • prettyName: prettyId of the video including the extension for the thumbnail (e.g: fashion.jpeg)
    • rtieParameters: ll the parameters for the cropping of the image via RTIE. Parameters are documented in this [LINK] article. Use the form "paramName=value"; separate each parameter with a "&" character.
  • uploadDate:the content's creation date expressed in the ISO-8601 format;
  • contentUrl: the url of the video with the channel to be used as default, in the form:
//[clientId]-cdn.thron.com/delivery/public/video/[clientId]/[contentId]/[pkey]/[channel]/[prettyId]
    • clientId: the domain name used to access THRON, usually matches your company name;
    • contentId: the identifier of the video, can either be the xcontentId or the prettyId;
    • pkey: a valid pkey for the video;
    • channel: the label of the channel to be used as default. Given channel must be present on the specific video. Available values are:
      • WEBHD: Mp4 720p (h264 2000kbps)
      • WEB: Mp4 480p (h264 800kbps); 
      • STREAMHTTPIOS: Streaming HLS 
      • STREAMHTTPIOSHD: Streaming FullHD (h264) 
    • prettyId: the prettyId of the video
  • source scr: on these tags you should put the contentURL filled with different channels in order to provide fallback solutions on multiple devices.

NOTE: This embed will automatically include content tracking. If you wish to not track the video you will have to exclude the "tci" class from the video tag.

 

Audio

An HTML embed returning a THRON audio has the following form:

<script type="text/javascript" id="ta_bootstrapper" src="//[clientId]-cdn.thron.com/shared/plugins/tracking/current/bootstrapper-min.js"></script>
<div itemscope itemtype="http://schema.org/AudioObject">
    <meta itemprop="name" content="<Content title here>"/>
    <meta itemprop="description" content="<Content description here>"/>
    <meta itemprop="alternateName" content="Content title and description here"/>
        <meta itemprop="thumbnailUrl" content="Thumbnail URL here"/>
    <meta itemprop="uploadDate" content="<Content creation date here>"/>
    <meta itemprop="contentUrl" content="<Content URL here>"/>
    <audio class="tci" style="width:<width here>;" controls>
        <source src="<Channel URL here>"><!-- Download -->
    </audio>
</div>
Was this article helpful?
0 out of 0 found this helpful

Have more questions?

SUBMIT A REQUEST

Hai altre domande?

INOLTRA UNA RICHIESTA

Comments