English

social meida
open graph
open standard

How to set Open Graph and Twitter card metadata for your website

Open Graph and Twitter (now X) card metadata are essential for sharing your website on social media. They will help you to show beautiful previews of your website and attract more attention.

Gao

Founder

8/24/20243 min read

Stop wasting weeks on user auth

Launch secure apps faster with Logto. Integrate user auth in minutes, and focus on your core product.

Get started

Introduction

When you share a link to your website on social media, you want it to look good. Instead of just showing a plain link, you want to show a beautiful preview with all the necessary metadata like title, description, and image. This is where Open Graph and Twitter (now X) Cards metadata come in.

In this article, we will show you how to set up Open Graph (ogp.me) and Twitter Cards metadata for your website. We will also show you how to test your metadata to make sure it looks good on social media.

Never heard of website metadata?

When a human visits a website, they see the content rendered by the browser. But when a bot (like a search engine crawler or a social media scraper) visits a website, it only sees the raw HTML. Website metadata now kicks in to provide structured information about the website to the bot, that it can use to render a structured output, like a preview card.

If you right-click on a website and select "View Page Source", you will see the raw HTML of the website. The metadata is usually included in the <head> section of the HTML, and it looks something like this:

The above code is self-explanatory: the title of the website is "My Website" and the description is "This is my website.".

You may notice the og: prefix in the metadata, which stands for Open Graph. Open Graph is a protocol developed by Facebook to provide structured information about a website. Twitter (now X) also has its own metadata protocol, called Twitter Cards.

Setting up Open Graph metadata

Some of the most common Open Graph metadata tags are:

og:site_name: The name of the website.
og:title: The title of the current page.
og:description: A short description of the website.
og:image: The URL of the image to be displayed.
og:url: The canonical URL of the website.
og:type: The type of the website (e.g., website, article, video).

The difference between og:title and og:site_name is that og:title is the title of the current page (e.g. the blog post title), while og:site_name is the name of the website (e.g. the blog name). If you check the source code of this page, you will see the following Open Graph metadata:

Since we have og:type set to article, additional metadata like author and publication date can be added. For example, if you want to add the tags for a blog post, you can add the following metadata:

Open Graph specifies that if you want to add multiple values, you should use multiple <meta> tags with the same property name.

After adding the Open Graph metadata to your website, you can test it using the Facebook Sharing Debugger. Just enter the URL of your website and click "Debug". If there are any issues with the metadata, the debugger will show you the errors.

Here's an example of our blog post When should I use JWTs? in the Facebook Sharing Debugger:

Facebook Debugger

Setting up Twitter Cards metadata

Twitter Cards are similar to Open Graph metadata, but they have their own conventions. There are four types of Twitter Cards:

Summary Card: A card with a title, description, and thumbnail.
Summary Card with Large Image: A card with a title, description, and large image.
App Card: A card for promoting mobile apps.
Player Card: A card for video and audio content.

For our blog post, we will use the Summary Card with Large Image. The Twitter Cards metadata for the blog post will look like this:

The two main differences from Open Graph metadata are:

The twitter:card tag is required and specifies the type of card.
The twitter:site tag specifies the Twitter handle of the website.

There was a Twitter Card Validator available, however, the preview feature has been moved Tweet Composer (better than nothing, though).

Closing notes

Setting up Open Graph and Twitter Cards metadata for your website is easy yet useful. People love images, and a beautiful preview card can attract more attention to your website. Wish you good luck with your website and happy sharing!

Introduction#

Never heard of website metadata?#

Setting up Open Graph metadata#

Setting up Twitter Cards metadata#

Closing notes#

Introduction#

Never heard of website metadata?#

Setting up Open Graph metadata#

Setting up Twitter Cards metadata#

Closing notes#

Introduction

Never heard of website metadata?

Setting up Open Graph metadata

Setting up Twitter Cards metadata

Closing notes

Introduction

Never heard of website metadata?

Setting up Open Graph metadata

Setting up Twitter Cards metadata

Closing notes