Tutorial

How To Add Twitter Card and Open Graph Social Metadata to Your Webpage with HTML

Published on July 30, 2021

HTML

How To Add Twitter Card and Open Graph Social Metadata to Your Webpage with HTML

When you share links on social media platforms, they’ll often be presented with rich imagery and a nicely formatted title, summary, and link, instead of plain text. For instance, here is how Twitter would display a link to this tutorial series:

You can add these rich media social sharing capabilities to your site by including certain <meta> tags in the <head> of your HTML document. There are two main standards that determine how to format this metadata: Twitter Cards, and the Open Graph protocol.

In this tutorial you will learn how to add both Twitter Card and Open Graph metadata to your webpage.

Adding Twitter Card Metadata to a Webpage

Twitter Cards are a metadata specification used by Twitter to display rich text, imagery, and video when links are shared on the service.

The full Twitter Card markup specification has many options, but you can start with the most basic information and expand from there.

To add basic Twitter Card metadata to your site, place the following <meta> tags in between your existing <head> and </head> tags:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@digitalocean" />
<meta name="twitter:title" content="Sammy the Shark" />
<meta name="twitter:description" content="Senior Selachimorpha at DigitalOcean" />
<meta name="twitter:image" content="https://html.sammy-codes.com/images/large-profile.jpg" />

Be sure to update the highlighted portions with your own information. Let’s walk through each tag we just added:

twitter:card: this tag specifies the type of Twitter Card that should be displayed. The summary_large_image type displays a short summary with a large image preview.
twitter:site: your Twitter username, or your site or company’s username.
twitter:title: the title you’d like used in the card. This could match what you’ve put in your <title> tags, but it doesn’t have to.
twitter:description: a brief description of the page that will be displayed under the title. This should be a maximum of 200 characters, and may be truncated even further when displayed.
twitter:image: an image to show. Most standard image formats (JPG, PNG, GIF) are acceptable, but it must be less than 5MB in size. The image may be automatically cropped to display in differently sized cards, so it is a good idea to have the main focal point in the center.

This metadata should result in a Twitter Card that looks like the following:

For more information on other Twitter Card tags and options, visit the official Twitter Cards documentation.

Adding Open Graph Metadata to a Webpage

The Open Graph protocol is an open standard for metadata that many websites use to display rich link previews to their users. Sites like Facebook, LinkedIn, and Pinterest use Open Graph to display links.

The markup for Open Graph is similar to Twitter Cards: some <meta> tags in the <head> of your HTML document. A minimal set of Open Graph tags is shown below:

<meta property="og:type" content="article" />
<meta property="og:title" content="Sammy the Shark" />
<meta property="og:description" content="Senior Selachimorpha at DigitalOcean" />
<meta property="og:url" content="https://html.sammy-codes.com/" />
<meta property="og:image" content="https://html.sammy-codes.com/images/large-profile.jpg" />

Place these tags in the <head> of your HTML document, updating the highlighted portions as needed. The tags you’ll need are:

og:type: the “type” of the content being described. Some type examples are article, book, and profile. See the official og:type documentation for more.
og:title: the title of the page. This could be the <title> of your page, or you could tailor it specifically for link sharing.
og:description: a short description of the page. There is no specified character limit, but Twitter’s limit of 200 characters for this purpose is a good guideline.
og:url: the permanent (canonical) URL of the page.
og:image: an image to associate with the page.

More information on the Open Graph protocol is available on the official Open Graph protocol website.

Testing Webpage Metadata

There are a few tools you can use to preview how your meta tags would display on a website. The Open Graph Debugger is an unofficial simulator that shows both Twitter Card and Open Graph information, and doesn’t require an account to use.

The following official validators all require you to log into their service before using:

Many other sites have similar tools. If a site or community is important to you or your business, look for their developer documentation to see if they provide a similar service to test with.

You now know how to set up a minimal set of metadata to show rich link formatting on various social sites. Refer to the Twitter Cards and Open Graph documentation for more detailed information.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

Revisit all the tutorials in this tutorial series: How To Build a Website with HTML ->

Tutorial Series: How To Build a Website with HTML

This tutorial series will guide you through creating and further customizing this website using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the beginning of the series if you wish to recreate the demonstration website.

At the end of this series, you should have a website ready to deploy to the cloud and a basic familiarity with HTML. Knowing how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.

HTML

Browse Series: 23 articles

About the authors