Skip to Content
Mux Docs: Home
Welcome to the new Mux Docs.
The old version is still available here

Embed videos for social media

Learn how to embed your videos using Open Graph cards

Introduction to Open Graph

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 find videos on your webpage that might be otherwise hidden due to JavaScript.

Here is a list of Open Graph properties for video optimization:

PropertyDescription
og:typeThe object’s type e.g video, audio
og:urlThe URL of the webpage
og:titleTitle of the video
og:descriptionDescription of the video
og:imageThumbnail of the video
og:videoThe URL of the video
og:video:widthWidth of the video in pixels
og:video:heightHeight of the video in pixels
og:site_nameThe website name the contains the video

Object types

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">

Optional meta tags

Use additional properties to provide additional metadata about your object such as the actor and director.

PropertyDescription
video:actorprofile array - Actors in the movie.
video:actor:rolestring - The role they played.
video:directorprofile array - Directors of the movie.
video:writerprofile array - Writers of the movie.
video:durationinteger >=1 - The movie's length in seconds.
video:release_datedatetime - The date the movie was released.
video:tagstring array - Tag words associated with this movie.

Integrate the Open Graph meta tags

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>

Creating Twitter cards

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:

  • photo card
  • player card
  • summary card
  • app 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.

Twitter meta tags

PropertyDescription
twitter:cardType of Twitter card e.g., "player."
twitter:titleThe title of your content as it should appear in the card
twitter:siteThe Twitter @username the card should be attributed to
twitter:descriptionDescription of the content (optional)
twitter:playerHTTPS 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)
twitter:player:widthWidth of I-frame specified in twitter:player in pixels
twitter:player:heightHeight of I-frame specified in twitter:player in pixels
twitter:imageImage 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

Example twitter meta tags

<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" />

Preview your Open Graph cards

Using an Open Graph previewer

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

Preview Open Graph cards

Was this page helpful?