You’ve probably run into these embeds very often without thinking about it—whenever you send someone a link on a social media platform or messaging app, the link expands to include content from the website, usually an image, title, and description. Here’s how to set that up.
What Are Open Graph Meta Tags?
The configuration for these embeds is done using tags, usually in the header of your site. There’s a standard for them, originally created at Facebook, called “the Open Graph Protocol.”
The tags will always use the following format, with a “property” value set to “og:” followed by the type of tag, and a “content” value set to the value of whatever content is on the page:
For example, a basic setup for most websites looks like the following:
This sets the image, title & link, description, and tells sites that it is a website. This results in a simple embed like the following:
It’s a simple format, but there’s quite a few options that most websites will recognize. You can find the full list of them on the Open Graph website, but we’ll cover the important ones here.
Twitter will recognize OG tags, but it’s worth noting that they also have their own tags as well which will take priority.
Using OG Meta Tags
First, the title. this is an extremely simply tag, but is necessary for everyone. Even if your embed is representing an object instead of a page, it should still have a title explaining what it is.
Optionally, if your title doesn’t get the job done, you can add an extended description:
The og:type tag is also very important, because it tells sites what kind of content you’re linking, and how it should be formatted. It also allows different kinds of optional parameters depending on the type. There are a couple different options:
website, which is a basic default. article, which represents a news/blog post, and has the optional parameters of published_time , modified_time , author , section , and tag . profile, which represents a user, and has options for first_name , last_name , username , and gender. video. other, which represents a video. There are also tags for movies and TV shows, with their own parameters. Various music related tags, some of which are whitelisted on sites like Facebook.
For optional parameters, you need to add a separate meta property with the parameter name. For example, setting music:duration:
You’ll also want to set the URL tag to link back to your site.
If you want an image to show with your embed, you’ll need to set that as well. Images have a lot of configuration options:
There’s also og:video and og:audio tags that work the same way, but for video and audio respectively.
You can also set the site name manually, if the title doesn’t give that away.
Debugging Meta Tags
Sending them to yourself to debug isn’t the best idea—many platforms will cache the response, making it harder to make quick changes.
Luckily there are a few great tools like opengraph.xyz, where you can put in your link and view the embed response for various platforms.
You’ll of course still want to send the link out on each platform to double check it’s working.
Can You Generate Tags Dynamically?
Of course! Tags are just HTML, and most modern web frameworks are all about rendering dynamic HTML. Though, it needs to be in the header, so it may complicate things for some frameworks focused on writing to the body of the page.
In React, you can do this easily with a package called react-helmet, which goes in your main App() component. You can of course use standard JSX syntax to replace any of the values with values from your page’s state.
For WordPress, you can configure this with a plugin, or add some PHP to your header.php file.
For other frameworks, they’ll likely support meta tags in some fashion, so you’ll want to check how it works for your application.
