WebCodeFun

HTML Tutorial

Using meta tags to share website content on social media

Certain meta tags are useful for ensuring the sharing of our website content on social media is completed in a way that we would like. The better presented the information is, the more likely visitors will be enticed to view your website.

In this tutorial we look at how to ensure social media sites show the information we want and how we want using meta tags. To do this with a real example, we will generate meta tags for a video, which is located below.

YouTube Video

Coming soon. Read on for the written guide available now.

Written Guide

Open Graph Markup

Open Graph Markup is the key to ensuring our media is shared how we want it to be. It is very easy to code once we know about it, using meta tags to detail the information we want the social media sites to use.

The meta tags sit in the head section of the html of the page, and they look like this:

<meta property="og:url" content="https://www.webcodefun.com/tutorials/html/meta-tags-for-sharing-on-social-media">

We can see that it follows the simple pattern of choosing the Open Graph property, in this case og:url for the canonical URL for the page, and then providing the content we want the social media sites to use.

There are key Open Graph properties that need to be completed. These are:

<!-- META DATA FOR VIDEO SHARING -->
<meta property="og:url" content="https://www.webcodefun.com/tutorials/html/meta-tags-for-sharing-on-social-media">
<meta property="og:title" content="Embedding videos and sharing on social media">
<meta property="og:description" content="Learn how to share videos embedded in your website on social media, such as Facebook, Twitter and Instagram.">
<meta property="og:type" content="video.other">
<meta property="og:locale" content="en_GB">
<meta property="og:video" content="https://www.webcodefun.com/media/latte-art-coffee.mp4">
<meta property="og:image" content="https://www.webcodefun.com/media/latte-art-coffee.jpg">

Now these will cover most of the bases, but there are site specific ones for Facebook and Twitter, which we’ll cover in detail below.

Facebook - Open Graph

First of all, for reference, you should check out Facebook’s developer page, as things may have changed since this tutorial was posted.

At the time of this tutorial (January 2021), Facebook doesn’t allow videos to be played on their site that haven’t been uploaded directly to Facebook. What we can do is share an image alongside details of the video and provide a link to the image that can then be clicked to come to the site.

We need to use OG (open graph) tags as without them, the information shared to Facebook will be displayed using Facebook’s algorithm to make a ‘best guess’ about what information should be displayed. By using OG tags we can specify what information we want to be used by Facebook.

<meta property="og:video:secure_url" content="https://www.webcodefun.com/media/latte-art-coffee.mp4">
<meta property="og:video:type" content="video/mp4">
<meta property="og:video:width" content="1280px">
<meta property="og:video:height" content="720px">

This is all of the information that Facebook requests for sharing a video correctly. It is unclear whether og:video attributes are needed now, as Facebook doesn’t allow the video to play within its website, and so they now be redundant, but Facebook still requests them in their documentation so we’ll include them.

Facebook - Debugger

To view what the page looks like, you need to head over to the Facebook debugger. Here you can enter the URL and make sure that your tags are presenting the information as you desire.

The Facebook debugger is also very important for getting Facebook to clear its cache if you make any changes to the page. Make sure you put it through the debug tool to get Facebook to re-scrape your webpage.

Twitter - Open Graph

Twitter enables us to share videos from our website using Player Cards. For the most up to date reference source on this check out the Twitter developer player-card page. Let’s take a look at how to make these work.

Similarly to Facebook, Twitter requires the relevant information you want to use via meta tags using Open Graph Markup. Twitter has its attributes whilst also some of the existing OG attributes.

We use twitter:card to select the type of card we want to use. As we are sharing a video, we select the player card. We can link to our twitter name, which of course for me is @webcodefun.

The title and description can use the traditional og:title and og:description attributes, but we have set those up for Facebook and if we want the information to be a little different on Twitter, we can override these with the Twitter specific attributes. The remaining twitter:player attributes are required for Twitter to know the details for the video we wish to share.

!-- TWITTER META DATA -->
<meta name="twitter:card" content="player">
<meta name="twitter:site" content="@webcodefun">
<meta name="twitter:title" content="Embedding videos and sharing on social media">
<meta name="twitter:description" content="Guide to sharing videos embedded in your website on social media.">
<meta name="twitter:player" content="https://www.webcodefun.com/media/latte-art-coffee.mp4">
<meta name="twitter:player:width" content="1280px">
<meta name="twitter:player:height" content="720px">
<meta name="twitter:player:stream" content="https://www.webcodefun.com/media/latte-art-coffee.mp4">

Twitter - Debugger

Similar to Facebook, Twitter provides a place for us to test the meta data is being scraped correctly and that the video will share. It is also used to clear the cache and enable changes to be made. Simply put the webpage address into the debugger at Twitter debugger.

Need help?

That's all there is to it. Meta tags are quite simple to implement once you understand what needs to be done. If you are wanting to share a page or image rather than a video, you can alter what to display on Twitter and can get all the information you need at the Twitter developer cards overview page. If anything is unclear or if you have any questions, please do get in touch by contacting me. Thanks for reading.