Everyone wants to create content that stands out, encourages brand awareness, and is easy to share in the online marketing world.
Open Graphs tags are one way to earn more views on social media. These useful tags determine how your link previews appear on social media. When someone shares a link from your website, they’ll see the most important parts of your webpage in the preview.
What Is Open Graph?
In 2010, Facebook introduced Open Graph meta tags to make sharing websites on the platform easier. Twitter and LinkedIn have since adopted Open Graph meta tags to improve their users’ experience.
When you paste a URL into a Facebook input box, you’ll likely see a link preview. Before Open Graph meta tags, you had no control over how your link preview appeared, and sometimes Facebook would display the wrong content.
Open Graphs meta tags help users optimize their social media link previews, so users always see the essential information.
In the following images, we have an example of meta tags included in a webpage’s code. When someone posts the URL to this webpage on Facebook, we see a stylized link preview:
Why Are Open Graph Tags Important?
Social media channels are a steady source of web traffic and conversions. With the right mix of strategy and design, you can convince users to click through to your website to learn more about your brand, make a sale, and much more.
Open Graph meta tags enhance your webpage’s link previews in a way that catches your audience’s eye. Here’s what a link preview looks like for a webpage without Open Graph meta tags on Facebook:
Let’s review a link preview for a web page with Open Graph. In comparison, we see a larger image and a bolded headline, and a truncated URL.
How to Use Open Graph
Facebook lists 17 Open Graph tags in their official documentation, but only four are required for Facebook to understand your webpage. You’ll use the tags by placing them in-between the <head> tags in the webpage’s backend.
The four required tags are:
- OG: title for the title of the article
<meta property="og:title" content="Open Graph: Create Eye-Catching Social Media Snippets" />
- OG: type to indicate the type of object you’re uploading (article, video, etc)
<meta property="og:type" content="article" /> - OG: image for the URL of the main image
<meta property="og:image" content="https://static.semrush.com/cdn-cgi/image/width=1010/blog/uploads/media/00/7c/007.png/>
- OG: URL to indicate the actual URL the user will click through to
<meta property="og:url" content="https://semrush.com"/>
You can use other OG tags, like:
- OG: audio (connect an audio file to your post)
- OG: description (add a brief description)
- OG: determiner (indicate the word that appears before the object’s title in a sentence)
- OG: site-name (list the site from which the object originated)
Other Forms of Open Graph
Twitter Cards
Twitter Cards work similarly to Open Graph in that you can customize how your link previews appear in tweets. When you paste a URL into Twitter’s input box, it will automatically generate a title and main image:
You can still use Open Graph tags with Twitter; the platform just implements its own tag system before Open Graph.
However, Twitter cards have a requirement: images should be sized at 1024 pixels by 512 pixels. You can double-check the appearance of your Twitter card with its Card validator.
Testing Your Open Graph Results
It can be helpful to test your Open Graph implementation to ensure that it works when it’s time to post. To test, you have a few options available to you, including:
Site Audit Tool
The Site Audit Tool includes over 120 on-page and technical SEO checks for each part of your website. One such check indicates how many of your audited pages have Open Graph markups.
To get started with the Site Audit tool:
- Pull up the Site Audit tool from your project’s dashboard. (If you don’t have a project set up, you’ll need to create a project for your website to use the Site Audit tool.)
- Configure the audit’s settings with the tool’s setting panels. You can set the audit’s crawl scope and include any disallowed pages. Select Start Site Audit.
- When the audit is complete, use the Markup thematic report in the Overview tab to see any pages with Open Graph markup:
From the above example, we see that 78% of the pages don’t have any markup. If your results look similar to this, it might be worth considering adding Open Graph markup to your most important pages.
Facebook Object Debugger
Since Facebook uses the Open Graph protocol to determine what to display when a link is available, they offer a debugger tool to test your Open Graph code. To use the tool:
- Navigate to Facebook’s Debugger Tool.
- Enter the URL of the page you want to be scraped and investigated.
- Select Debug.
If there are any issues with your link, the tool returns a warning message:
Other Ways to Check Structured Data
Key Takeaways
Open Graph is a simple addition to your webpage that can bring remarkable results for your marketing campaigns. Your content’s appearance on social media can draw in more users and eventually convert them to sales.
If you’re new to working with Open Graph code, there are plenty of tools to help you test if your implementation works. Try a site auditing tool or any tool that can help you review your structured data.
Find and Fix Sitemap Errors
with the Site Audit Tool
Source link : Semrush.com
