Open Graph Tags: The Reason Your Links Look Ugly on Social Media

#webdev #seo #socialmedia #wordpress

Open Graph Tags: The Reason Your Links Look Ugly on Social Media

You’ve probably seen it. You paste a link into Slack, LinkedIn, or Twitter, and instead of a neat preview with a relevant image and catchy title, you get a plain URL. It’s a missed opportunity, and frankly, it looks amateurish. The culprit is almost always a lack of Open Graph tags.

Open Graph, or OG, is a set of meta tags that developers can add to a webpage’s <head> section. These tags tell social media platforms and other services how to represent your page when it’s shared. Without them, these platforms have to guess, and their guesses are usually pretty bland, defaulting to a generic link.

For web developers and WordPress agencies, mastering Open Graph is crucial. It directly impacts how your clients’ content is perceived and shared online. A well-formatted social share preview can significantly increase click-through rates.

The Essential Four Open Graph Tags

While there are many Open Graph tags available, focusing on the core four will cover the vast majority of use cases and deliver the most impact.

og:title: This is the title that will appear in the social media preview. It should be concise, engaging, and accurately reflect the content of the page. Aim for something similar to your page’s <title> tag, but it can be tailored for social sharing.
og:description: This is a short summary of the page’s content. It provides context and encourages users to click. Like the title, it should be compelling and informative. Keep it relatively brief, as social platforms often truncate longer descriptions.
og:image: This is arguably the most visually important tag. It specifies the image that will be displayed in the preview. High-quality, relevant images are critical for grabbing attention. Ensure the image dimensions are suitable for social media – often a 1.91:1 aspect ratio works well, but check platform recommendations.
og:url: This is the canonical URL of the page being shared. It ensures that all shares point back to the correct, primary version of the content, consolidating social signals.

Implementing Open Graph Tags

How you implement these tags depends on your development stack.

For Plain HTML Websites

If you’re building a static HTML site or a custom application, you’ll add these tags directly into the <head> section of your HTML documents.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Awesome Article</title>

    <!-- Open Graph Tags -->
    <meta property="og:title" content="The Ultimate Guide to Open Graph Tags for Developers">
    <meta property="og:description" content="Learn why Open Graph tags are essential for social media previews and how to implement them effectively.">
    <meta property="og:image" content="https://www.example.com/images/og-image.jpg">
    <meta property="og:url" content="https://www.example.com/articles/open-graph-guide">
    <meta property="og:type" content="article"> <!-- Optional, but good practice for content -->
    <meta property="og:site_name" content="Your Website Name"> <!-- Optional -->

    <!-- Other head elements like CSS links, etc. -->
</head>
<body>
    <!-- Your page content -->
</body>
</html>

The og:type tag is also very useful. Common values include website, article, book, profile, and video.movie. Specifying the type helps platforms understand the nature of your content. og:site_name is also good for branding.

For WordPress Websites

For most WordPress agencies and developers, managing Open Graph tags is simplified thanks to robust SEO plugins. Yoast SEO and Rank Math are the most popular choices, and they handle OG tag generation automatically for posts, pages, and custom post types.

Using Yoast SEO:
Once Yoast SEO is installed and activated, navigate to the post or page editor. Scroll down below the content editor to the Yoast SEO meta box. You’ll find a "Social" tab. Click on it, and you’ll see fields for setting the title, description, and image specifically for Facebook and Twitter. If you leave these blank, Yoast will usually pull the default SEO title and meta description, and the featured image if available, but customising them is best practice.

Using Rank Math:
Similar to Yoast, Rank Math provides a dedicated meta box in the editor. Look for the "Rank Math" tab. Within its settings, you’ll find options to configure Open Graph (Facebook, Twitter, etc.) for each post or page. You can set a specific title, description, and image. Rank Math also has global settings in the WordPress dashboard under "Rank Math" > "Titles & Metas" to define default OG images and other properties if none are set per post.

Testing Your Open Graph Tags

It’s crucial to verify that your Open Graph tags are implemented correctly and display as expected. Social platforms cache this information, so changes might not appear immediately. You can use debugging tools provided by the platforms themselves.

Facebook Sharing Debugger:
Go to the Facebook Sharing Debugger. Paste your URL and click "Debug". It will show you how Facebook sees your page and highlight any errors or missing tags. It also has a "Scrape Again" button to refresh the cache.

Twitter Card Validator:
Use the Twitter Card Validator. Similar to the Facebook tool, it will fetch your URL and display a preview of your Twitter Card. It will also report any issues with the implementation.

LinkedIn Post Inspector:
LinkedIn offers a Post Inspector. Enter your URL to see how it will look when shared on their platform.

By consistently implementing and testing these essential Open Graph tags, you ensure that every link you share from your projects or client sites presents the best possible impression, leading to better engagement and a more professional online presence.

SiteVett checks this automatically as part of a free website QA scan with 60+ checks across security, SEO, content, performance, and more.