Every marketer is familiar with the expression “content is king”, but without followers and readers, content is not enough.
Social media is the best way to share your blog posts and get your content to a wider audience.
Sites like Facebook and Twitter have a huge audience that is ready to spread the word. Open graph tags (OPGs) are a great way to maximize your outreach potential.
Have you heard of OPGs and the open graph protocol that underlies them? Let me tell you what they are, why they are important, and how to use them.
What is Open Graph? And Why Was It Created?
Facebook introduced Open Graph 2010 in an effort to encourage integration between Facebook and other sites. It allows posts to be rich objects with the same functionality that other Facebook objects.
It helps to optimize Facebook posts by giving you more control over how information is transferred from a third party website to Facebook, when a page has been shared, liked, etc. ).
This information is sent using Open Graph tags within the head> section of the website's code.
Other social media sites also use social meta tags. Twitter and Linkedin, for instance, recognize Open Graph tags. Twitter, however, has its own meta tags to identify Twitter Cards. Twitter uses OGP tags if it cannot locate any.
How My Agency Can Drive Huge Traffic to Your Website
- SEO: Unlock massive amounts of search engine traffic Real results.
- Content Marketing Our team creates amazing content that gets shared, gets links and attracts traffic.
- Paid media– Effective paid strategies with clear ROI
CALL
Why Marketers Should Care about OGP Tags
OGP tags are essential for marketers as they ensure that every time a user shares a link from your content on social networks, the correct information is automatically filled in. This will increase customer engagement and allow potential customers to learn more about you brand or product.
OPG tags are also important for marketers as social media sites are the main drivers of web traffic. Marketers today need to be able to harness the power and potential of social meta tags.
OGP tags are also useful for tracking how your content performs on social media. This will allow you to adjust your sharing strategy.
But, the most important thing is that open graph tags can make a huge impact on conversions by solving common problems.
Have you ever shared a Facebook link only to discover that the thumbnail is missing or that there is a different image than you expected?
These OGP tags are a great way to improve your social media marketing.
However, they will not influence your on-page search engine optimization. It's worth considering because of the potential boost in reach that social media can provide.
Let's now look at the most important OGP tags on Facebook and how we can optimize them for better sharing.
Understanding Facebook OGP Tags
OGP tags, as explained in the introduction, are essential because they allow you control how your content looks when shared on sites such as Facebook. Open graph tags allow you to control the title, description and image of the post. This is a great way for content to look amazing when shared.
Additional information:
- OGP tags allow you to use the correct description and image, which can improve click-through rates. You can also add details like whether it is a movie, book or product.
- OGP tags allow you to monitor how your content performs on Facebook. The OG tags transmit traffic data to Facebook when someone shares an article on your site. The data allows you to see which articles get the most engagement and which ones need to be improved.
- OGP tags are used to ensure that you share the right image and description on Facebook. This can improve click-through rates.
- It is simple to add OGP tags. Most content management systems include plugins or extensions that simplify the process.
Facebook offers several open graph tags types. OGP tags can be used to indicate the site's name and thumbnail image on Facebook. You can also specify the description that will appear when someone shares a page.
This section will cover the various types and explain how they can be used.
og:title
The og title is used to define the title of your content. It is similar to the traditional meta tag in your code. Facebook will use the open graph title title if it doesn't find the tag og:title on your page.
Facebook explained that most content is shared using a URL. OGP tags are required to control how your content appears on the site.
Facebook says it all:
“Without these Open Graph Tags, the Facebook Crawler uses internal heuristics for a best guess about your title, description, preview image, and preview image. Open Graph tags can be used to explicitly identify this information in order to ensure high quality posts on Facebook.
You can get the most out of OGP by thinking about how your text looks and its length.
Remember that Facebook feed text is bold and very eye-catching. It should be captivating, just as a great post title.
Although there is no limit to the number of characters you can use, it's best for your title to be between 60-90 characters. Facebook will reduce your title to 88 characters if it exceeds 100 characters.
Example:
og:url
Open Graph tags can be added to a Facebook link. These tags allow Facebook to display rich information such as images, titles, and descriptions.
This is how to set the canonical URL of the page you share. This is how you can define the page to which all of your shares should go. It is helpful to have multiple URLs for the same content. Parameters can be useful. Important Note: The URL you provide is not displayed in the Facebook newsfeed. Only the domain is visible.
Example:
og:type
This is how to describe the type of object you share: video, image, blog post, etc. There are many options. Here are some examples.
Web-based:
- Website
- Article
- Blog
Entertainment:
- Book
- Game
- Movie
- Food
Place:
- city
- Country
People:
- Actor
- Author
- politician
Business:
- Company
- Hotel
- Restaurant
The complete list can be viewed here.
If your page contains a “Like” button, this tag is crucial. It represents a real-life object, such as a book or movie. This tag determines whether your content is displayed in a user’s profile's interest section in the event that they “Like” it.
Since what you share is a link on a website, the “website” value will be used in most cases. Facebook will interpret any type you don't specify as “website”.
Example:
og:description
The meta description tag in HTML is very similar to this metadata descriptor. This is the place you describe your content. However, instead of being displayed on search engine results pages, it appears below the link title on Facebook.
It won't impact your SEO like a regular meta description tag. However, it is a good idea for making it appealing to get people to click it.
Og: description tags do not limit you to a certain character count. However, it is best to use at least 200 letters. Facebook allows you to display as many characters as 300 in some cases depending on the link/title/domain. However, I recommend that you treat anything more than 200 characters as an extra.
Example:
og:image
Many marketers find this OGP tag to be the most intriguing. A picture makes content stand out. This allows you to ensure that Facebook displays a specific thumbnail when you share your page. It can also help you increase your conversion rates.
Facebook will display an unwelcome ad banner on the page if you don't set the og.image. This is something you don't want!
Here are some more tips:
- You should remember that static pages don't require any type of content management system (CMS), such as WordPress, so you will need to manually change the og.image for each page.
- The og:image tags will be assigned to each page automatically if you have a CMS that you use. You can find the complete list of plugins down below.
- For OG images, the most common resolution is 1200 pixels x627 pixels (1.91/1 ratio). Your thumbnail will stand out and be larger than the rest. Don't exceed 5MB in size.
It will display as a thumbnail if the image is less than 400 pixels by 209 pixels. It is not nearly as eye-catching.
Remember that Open Graph images can have different pictures than those on your page.
You should take advantage of this opportunity to make your mark even more.
If your title is great but the image you're using isn't very interesting (not an infographic, not a person with good looks, etc.), then consider changing it. Consider using an image that has a few lines of copy (see the example below).
Remember this one thing: Place your text (or the most important part of it) in the middle. Facebook trims thumbnails on the sides.
Example:
An online generator makes it easy to add OPGs.
Advanced Facebook Open Graph Tags
These Open Graph tags are what you should be familiar with. You can also use more advanced tags to provide more detailed specifications.
Take, for example.
- og:locale is used to define the language. American English is the default
- og:site_name is used to determine if the object (page) you are sharing is part a larger network.
- To add audio or video files to an object, use og.audio or og.video
- fb:app_id – for linking to a Facebook app (e.g., FB comments) with the object
After you have set up your open-graph tags, it is important to verify that they are working properly. You can use the Sharing Debugger, which will show you how your content appears when shared on Facebook, Messenger, or other sites. You can also refresh the information for multiple URLs simultaneously using the Batch Invalidator.
Simply enter the URL of your page and click on Debug.
Facebook's debugging software offers two benefits.
When you first type the link, it will return any errors or suggestions for OG tags. You can also view the og.image and your description.
It also clears Facebook's cache. Imagine this: You post a link on Facebook and then you notice a typo in the thumbnail. So you go back to your site to fix the OGP tags and then post it again to Facebook.
Most likely, nothing will occur. The thumbnail will remain the same. The cache is responsible for this. After any adjustments to your links, the Facebook Sharing Debugger will refresh them with new cache. Make sure you use it every time.
Twitter Cards
Twitter cards allow you to attach media files to your tweets and add additional information. This can help increase the visibility of your tweets, and provide context to users who click through.
While they are not identical, Twitter cards use the same open-graph protocol as OGP tags. These tags make it easier to create Twitter cards with minimal duplication.
Twitter Cards, similar to Facebook's Open Graph tags allow you to stand out among the thousands of tweets. They allow you to create additional content with your 140-character tweet.
Although this doesn't automatically show up in people's feeds, it does add a “View summary” button to the tweet.
Open graph tags can be used to define your content's title and description as well as the image. You can also use them to identify your page's content type, and the audience you wish to reach.
Click it to:
The Twitter card is a tempting option and gives you a quick summary of the shared page. These tags are not used by many sites, so you have a unique opportunity to make your tweets stand apart from the rest.
These cards are easy to install, and even if your computer skills are not up to par, there is a way around it. Install a WordPress plugin.
WordPress SEO by Yoast does the job flawlessly.
To activate Twitter cards in Yoast
- Log in to WordPress
- Navigate to your dashboard
- Select the “SEO” option from the drop-down menu.
- Click on SEO to choose social. Click.
- Click on Accounts to access your Twitter username
- Click on the “Twitter” tab to access it
- Scroll down to “Add Twitter Card Meta Data”
- Click “enabled”
- Final: Save any changes.
If this is not an option, you can ask your web developer to give you the ready-to implement Twitter Card tags. Here's how to make them.
Twitter: card
The required tag functions in the same way as og:type. This tag describes the content you are sharing. There are seven options available: summary, photo and video, product, app gallery, and “larger version” summary.
The link at the bottom changes depending on what type of content you choose. For summaries, you can click “View summary”, while for photos, click “View photo”. Twitter will automatically read your link as a summary if this tag isn't set.
Example:
twitter:title
It does basically the same thing to its OG counterpart. The title of your article will be bolded if you specify it. Avoid repeating the same text in your tweets. To reinforce your message, make the most of the available space and let the copy complement each other. You can use up to 70 characters
Example:
twitter:description
This tag can be used to create a lead description for the page you're sharing. Open Graph tags are not meant to be keyword-focused. They won't help your SEO. Make compelling copy that complements the title and tweet. This part is limited to 200 characters by Twitter.
Example:
twitter:url
This is the URL that you will use to share the content. (Refer to the description of the Facebook Open Graph tag for more details.
Example:
twitter:image
You guessed it. This is how to set your picture to match your tweet. Twitter offers two options: a card with either a smaller or larger image.
The type tag will let you choose which one. The large option should have a resolution of at most 280x150px, and a file size not exceeding 1MB. To boost your message, you can use the same technique as the Facebook thumbnail. Simply add text to the image.
Example:
Twitter Approves Your Request
It is simple to add cards to your tweets – just add some code at the end of your tweet. Twitter will use this code to determine which card type and how the content should look.
There is a variety of Twitter Cards. You can choose which one best suits you.
Keep in mind, however, that you must first request approval from Twitter for your page to be eligible for Twitter Cards.
This process takes only 15 minutes, and you can do it easily with their Card Validator.
To get started,
- Choose the card type you want to use.
- Add your meta tags
- Use Twitter's validator tool to verify the URL.
- To see your card displayed, test it in the validator. https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards
Card Validator is available once you have been approved. It allows you to verify your links before you commit.
Twitter Plugins
There are many plugins available to implement Twitter cards, just like Facebook. Here are some:
- Drupal
- Magento
- Zen Cart
How to Implement Open Graph Tags
How can you implement OGP tags They are located in the head> section of your page's HTML. You can ask your web developer to help you if you are unable to manage the code. To save your time, you can prepare the entire package yourself by following the tips.
Install one of these plugins if you use WordPress. Although I prefer WordPress SEO by Yoast as my preferred tool, there are other tools that you can use for free, such as:
- Open Graph Protocol Framework. This one is not compatible with the latest WordPress updates.
- Open Graph and Tweet Cards Tags
Here are other OG plugins/extensions/add-ons for:
- Joomla
- Drupal
- Magento
- Zen Cart
Like Facebook. Twitter provides a tool to validate OGP tags. Twitter Card Validator allows you to preview and test how your tweets will look when shared on other sites. Enter the URL of the website where you wish to share your tweet, and then click “validate”.
The validator will display a preview of your tweet on the website and show the title, description and image.
FAQs
What is Open Graph? Why was it created?
Open Graph Protocol (OGP), a set of tags that are used to structure websites, allows it to be shared more easily on social media platforms. OGP tags enable web admins control the appearance of their content when shared on social media sites such as Facebook and LinkedIn.
Open graphs are found in the webpage's “Head” section.
What's SEO OGP?
This type of metadata was introduced by Facebook in 2010. This allows semantic integration of Facebook's HTML. It allows website owners to tell Facebook how they want Facebook to index their websites. https://www.oreilly.com/library/view/facebook-application-development/9780470768730/ch006-sec012.html
You can check your OGP tags with free tools. Facebook offers a validator that allows you to check for errors in your tags.
Conclusion
This is the final code for Facebook and Twitter.
Although it might seem confusing, there are many tools that make the process much easier. You don't even need to be able to code.
There are three types of Open Graph meta tag: og.title, og.image and og.description. Taking the time to implement them can have distinct benefits, such as better click-throughs, engagement, and increased conversions. Adding Open graph to your site will increase its visibility.
It's amazing how few people optimize these tags despite all these benefits. It makes you stand out, draws more views and clicks, and can also improve your SEO. All of these things lead to more profit.
Are you using open graph meta tags? What has the impact been on your site?
————————————————————————————————————————————–
By: Neil Patel
Title: 12 Essential Open Graph Meta Tags for Facebook and Twitter
Sourced From: neilpatel.com/blog/open-graph-meta-tags-2/
Published Date: Sat, 09 Jul 2022 19:00:00 +0000