How to Add Social Media Embeds To Your Website (Open Graph Meta Tags) – CloudSavvy IT

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 <meta> 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:

<meta property="og:type" content="value" />

For example, a basic setup for most websites looks like the following:

<meta property="og:image" content="https://i.imgur.com/imagelink.jpg">
<meta property="og:title" content="Website Title" />
<meta property="og:description" content="Website Description" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/" />

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.

<meta name="twitter:title" content="Website Title"> 
<meta name="twitter:description" content="Website Description"> 
<meta name="twitter:image" content="https://i.imgur.com/imagelink.jpg">

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.

<meta property="og:title" content="Website Title" />

Optionally, if your title doesn’t get the job done, you can add an extended description:

<meta property="og:description" content="Website 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:

<meta property="music:duration" content="60" />

You’ll also want to set the URL tag to link back to your site.

<meta property="og:url" content="https://example.com/" />

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:

<meta property="og:image" content="https://example.com/ogp.jpg" />
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />
<meta property="og:image:alt" content="A shiny red apple with a bite taken out" />

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.

<meta property="og:site_name" content="CloudSavvy IT" />

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.

import React from "react";
import Helmet from "react-helmet";

function App() {
  return (
    <main>
      <Helmet>
         <title>Example</title>

         <meta itemprop="name" content="Example" />
         <meta property="og:title" content="Example" />

         <meta itemprop="description" content="A description" />
         <meta name="description" content="A description" />
         <meta property="og:description" content="A description" />

         <meta itemprop="image" content="http://example.com/example.png" />
         <meta property="og:image" content="http://example.com/example.png" />

         <meta property="og:url" content="https://example.com" />
         <meta property="og:type" content="website" />
      </Helmet>
    </main>
  );
}

For WordPress, you can configure this with a plugin, or add some PHP to your header.php file.

<meta name="description" content="<?php if ( is_single() ) {
        single_post_title('', true); 
    } else {
        bloginfo('name'); echo " - "; bloginfo('description');
    }
    ?>" />

For other frameworks, they’ll likely support meta tags in some fashion, so you’ll want to check how it works for your application.