OPEN GRAPH TAGS

What Are Open Graph Tags?

Open Graph tags are small pieces of information you add to your Full Assault package’s website pages. They tell social media platforms how to display your content when someone shares a link. Think of them as labels that explain what’s on your page and make it look attractive.

Link Unfurling

When you unfurl a link, it auto-expands into a hyperlink in a social media post or chat app. It will then show a preview of the linked content. This preview usually includes a thumbnail image, a title, and a brief description.

Unfurling links improves the user experience. It gives you context and a sneak peek at a link’s content without clicking on it. This is because the link extracts details from specific Open Graph meta tags on the webpage.

Link unfurling is great for social media and messaging apps. It grabs users’ attention and makes shared content more engaging and informative.

Why Are Open Graph Tags Important?

While Open Graph tags don’t directly improve your website’s ranking on search engines like Google, they play a big role in how your content is seen and clicked on social media. Here’s why they matter:

Better First Impressions

A well-designed share looks more appealing, so people are more likely to click on it.

More Clicks and Shares

When your links look good, more people will share them, bringing more visitors to your site.

Consistent Branding

Your website’s look stays the same across different platforms, helping people recognize your brand.

Must-Have Open Graph Tags

To ensure your content looks great when shared on social platforms, setting up the essential Open Graph tags is crucial. It’s important to note that Open Graph requires the correct attribute in the meta tag, not the one used for other meta information like SEO.

Using the correct attribute ensures that platforms like Facebook, LinkedIn, and Twitter can recognize and use the Open Graph data to display your content properly. Here are the must-have tags:

og:title

Sets the title of your page that appears in the share. This is like the headline of your content on social media.

og:description

Adds a short description of your page, giving users more context about what the shared link contains.

og:type

Specifies the type of content being shared, such as a website, article, or video. This helps social platforms categorize your content properly.

og:image

Displays an image when your content is shared. A strong, relevant image can improve click-through rates by making the share more visually appealing.

og:url

Points to the exact URL of the page being shared. This ensures the user lands on the right page when they click the shared content.

Facebook, Instagram, X, LinkedIn Considerations

Facebook & WHATSAPP

Uses the Open Graph protocol.
Uses the property meta tag, example: <meta property=”og:title” content=”Quick Strike Package” />
Images of a recommended size of 1200 x 630 pixels and minimum size of 600 x 315 pixels, JPEG, PNG, GIF, WebP is accepted.

Instagram

Does not use the Open Graph protocol.
Requires an image size of 1080 x 1080 pixels. 

X (Twitter)

Does not use Open Graph tags; instead, it uses its own set of metadata called Twitter Cards to control how content is displayed when shared. As of 24/10/2024, we have been unable to implement them successfully.

Here is what we see others do, that successfully get their cards published:

<meta name=”twitter:card” content=”summary”>
<meta name=”twitter:title” content=”Content here.”>
<meta name=”twitter:description” content=”Description here.”>
<meta name=”twitter:image” content=”https://urlhere”>

LinkedIn

Uses the Open Graph protocol.

Summary

Open Graph tags are a useful way to make your website stand out on social media. By setting up the right tags, you can attract more attention, get more clicks, and grow your audience. With the Meta Tag Manager plugin, it’s easier than ever to get started. Add those tags and see how your content looks better when shared.