Open graph tags are the snippets of code that tell social media platforms how to format your posts when you post a link to the website.
They’re the solution to messy disorganized social media content that does not clearly convey the message you want to make it clickable and attention-grabbing. They allow you to control the image, the title, the description, and more that are shown.
Not only do they make your content more clickable, but they help users understand what your content is about at a glance, and they help Facebook and Twitter understand the content better, allowing for more visibility on your posts in searches.
Which Open Graph Tags Should I Use?
There are three main components to open graph tags that most social media platforms can use: og:title, og:description, and og:image.
og:title
This one is as simple as it sounds–it’s the title of the article that will show up when you post it on social media. It should be cut down to be able to fit nicely on mobile screens, and focus on maximizing clickability. Think of the most attention grabbing headline you can–it doesn’t necessarily need to be SEO optimized like your blog titles do.
og:description
This appears as smaller text underneath the og:title, and it should offer just a bit more context for the content. If it makes sense you can copy your meta description and put it here.
og:image
This is the most important element, as it is social media and the image will take up by far the most real estate on a user’s screen. If it’s a shareable page such as your home page or articles, you can use a custom high-quality image. If it’s anything else, you can simply use a vectorized version of your logo.
How To Use Open Graph Tags in WordPress
If your website is on WordPress, most SEO plugins come with the capability of entering your own open graph tags. We use Yoast SEO.
On the Yoast SEO widget on your page, there is a “Social” tab. Click that and simply input your title, description, and image, and Yoast will automatically create Open Graph tags for that page.
If you’re not using widgets or third party plugins, you can input the OG tags in the <head> of your page. They should look like this:
<meta property=”og:title” content=”What Are Open Graph Tags?” />
<meta property=”og:description” content=”Open graph tags are a useful way to control how your social media posts that link to your website are formatted. Learn how to use them!“ />
<meta property=”og:image” content=”https://blog.shoresitedesigns.com/wp-content/uploads/2021/08/Circle.jpg” />
