Facebook introduced Open Graph in 2010 to promote integration between Facebook and other websites by allowing posts to become rich objects with the same functionality as other Facebook objects.
- Neil Patel
Open Graph describes a protocol that is based on HTMlLMETA tags. Specific META tags are defined which have a property that begins with og:, for example;
<meta property="og:title" content="The Rock" />
These tags means specific things to certain crawlers, that help them figure out how to present your site links, and how they relate to other things on the Internet... authors, companies, products, and so on.
Primarily this is used in social media, which makes stronger use of images than search engines do.
Open Graph tags answer these questions;
- What image should be used to represent this page?
- What type of page is this?
- What description should appear?
- Is there an audio file, or a video file associated with this page?
- Are there ontological details, like songs, artists, albums, actors, writers, directors... that this page related to?
What og: Tags Matter?
Many Open Graph tags are highly specialized for certain types of content, so they probably have limited use for most sites. However, it's worth reading the spec to find anything that can benefit your SEO and social media presentation.
Most of them have value, but some are difficult to manage in Webflow, and already have useful fallbacks.
og:title
Should fall back to your HTML <title> tag, if you don't specify this one.
Webflow directly supports this in Page SEO settings.
og:url
Is a canonical URL, which means it will be different for every page on your site. If you're already using the Canonical URL setting in Webflow, you should be all set.
og:image
Essential to make your link stand out visually.
- The recommended size by Facebook is 1200px x 627px ( 1:91:1 aspect ratio ) however the most common size in use is 1200px x 630px.
- Yes, you can theoretically animate an og:image, and some platforms will respect it
How Social Media Platforms Use It
Different platforms look for different things;
“Without these Open Graph tags, the Facebook Crawler uses internal heuristics to make a best guess about the title, description, and preview image for your content. Designate this info explicitly with Open Graph tags to ensure the highest quality posts on Facebook.”
Twitter has its own meta tags for Twitter Cards, but if Twitter robots cannot find any, it uses OGP tags instead.
- Neil Patel
Facebook Shows My Page Wrong
Use the Facebook Sharing Debugger to refresh your cached Open Graph data.
Open Graph Tools
Analyze your website
- OpenGraph.xyz - https://www.opengraph.xyz/
