Learn how to embed your videos using Open Graph cards
Introduction to Open Graph
What is Open Graph and how it is used
Integrate the Open Graph meta tags
Add the Open Graph specific HTML meta tags
Creating Twitter cards
Add meta tags to create Twitter cards
Preview your Open Graph cards
Using Open Graph previewer
The Open Graph protocol is initialized by using HTML meta tags in the
<head> section of a webpage, allowing you to define objects
from your webpage as thumbnails. These can be used in social media posts or appear in search results. Open Graph also helps search engines
Here is a list of Open Graph properties for video optimization:
|The object’s type e.g video, audio|
|The URL of the webpage|
|Title of the video|
|Description of the video|
|Thumbnail of the video|
|The URL of the video|
|Width of the video in pixels|
|Height of the video in pixels|
|The website name the contains the video|
You can also use sub types, for example, if your object type is video and you want to create a open graph card for an episode or movie you can use video.episode or video.movie.
<meta property="og:type" content="video.episode"> <meta property="og:type" content="video.movie"> <meta property="og:type" content="video.tv_show">
Use additional properties to provide additional metadata about your object such as the actor and director.
|profile array - Actors in the movie.|
|string - The role they played.|
|profile array - Directors of the movie.|
|profile array - Writers of the movie.|
|integer >=1 - The movie's length in seconds.|
|datetime - The date the movie was released.|
|string array - Tag words associated with this movie.|
To add the Open Graph meta tags into your website, simply implement new meta tags in the
<head> section of the webpage.
Below is an example of Open Graph tags:
<!DOCTYPE html> <html lang="en"> <head> <meta property="og:title" content="Mux Video" /> <meta property="og:type" content="video.episode" /> <meta property="og:description" content="MP4 video asset for Open Graph Cards" /> <meta property="og:image" content="https://image.mux.com/aYKMM7VxaD2InrbhrKlhi00V6R9EpRmQNmBJ10200AK02bE/thumbnail.png" /> <meta property="og:video" content="https://stream.mux.com/F9cP5Xgdcp7028hN4gQrOmlF62ZDHNloCTQQao8Pk00kk/medium.mp4" /> <meta property="og:video:width" content="350"> <meta property="og:video:height" content="200"> <meta property="og:video:duration" content="300"> <meta property="og:url" content="http://mux.com"> </head> <body> <video id="my-player" controls style="width: 100%; max-width: 500px;" /> </body> </html>
Twitter cards are implemented using meta tags, but unlike Open Graph cards, they use different property names.
There are four different types of cards to choose from which is defined in the meta tag property twitter:card:
The player card provides functionality to play external media files inside of Twitter. Below are the definitions of other Twitter meta tags you can use with the player card.
|Type of Twitter card e.g., "player."|
|The title of your content as it should appear in the card|
|The Twitter @username the card should be attributed to|
|Description of the content (optional)|
|HTTPS URL to I-frame player; this must be a HTTPS URL which does not generate active mixed content warnings in a web browser (URL to the page hosting the player)|
|Width of I-frame specified in twitter:player in pixels|
|Height of I-frame specified in twitter:player in pixels|
|Image to be displayed in place of the player on platforms that don’t support I-frame or inline players; you should make this image the same dimensions as your player|
<meta name="twitter:card" content="player" /> <meta name="twitter:title" content="Some great video" /> <meta name="twitter:site" content="@twitter_username"> <meta name="twitter:description" content="Great video by @twitter_username" /> <meta name="twitter:player" content="https://link-to-a-videoplayer.com" /> <meta name="twitter:player:width" content="360" /> <meta name="twitter:player:height" content="200" /> <meta name="twitter:image" content="https://link-to-a-image.com/image.jpg" />
You can preview your Open Graph cards using any one of many services that allow you to simply enter a URL that generates a preview.
One such service is Opengraph.xyz that allows you to not only preview what you have configured, but also helps you to generate more Open Graph meta tags.
Below is a preview of the example above in Opengraph.xyz