If you want to make sure that your website content looks great when it's shared on social media platforms like Facebook and Twitter, then you need to use Open Graph tags. Open Graph tags allow you to control how your website content is displayed when it's shared on these platforms. In this blog post, we will show you how to add Open Graph tags to your website so that your content looks great when it's shared!
These special tags are called open graph tags (OG: tags), and they are part of the Facebook's OG protocol. There are 17 tags altogether, but you only need a few basic ones to add to your page.
- og:title - The title of your page.
- og:type - The type of your object, for web pages, it's
- og:image - The image URL
- og:url - The canonical URL of your page
- og:description - a short description of your page. In most cases, if it makes sense, you can reuse the same meta description of your page. Facebook recommends often cutting off the description.
- og:locale - only use if the page content is not written in US English (en_US), i.e.
If you are already using an SEO plugin on your website, typically, they'll take care of these tags for you, so you don't have to create them manually.
Open Graph tags best practices.
When you're adding Open Graph tags to your website, there are a few best practices that you should follow:
- Use Open Graph tags on all of your website pages. This way, when someone shares any page from your website, the Open Graph tags will be used.
- Ensure all of the required Open Graph tags on each page. The required Open Graph tags are: og:title, og:type, og:image, and og:url.
- Include Open Graph tags for all of the different types of content that you have on your website. For example, if you have blog posts, videos, and product pages on your website, you should include Open Graph tags for each type of content.
- Use unique Open Graph tags on each page. This way, when someone shares a specific page from your website, the correct Open Graph tag will be used.
- Test your Open Graph tags to make sure they're working correctly. You can use the Facebook Debugger tool to test your Open Graph tags.
External sources: https://ogp.me/