What is Open Graph Protocol?
Open Graph Protocol
The complete guide to implementing Open Graph protocol for rich social media previews
Source: This guide is based on the official Open Graph Protocol specification
Introduction
The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook.
While many different technologies and schemas exist and could be combined together, there isn’t a single technology which provides enough information to richly represent any web page within the social graph. The Open Graph protocol builds on these existing technologies and gives developers one thing to implement.
Basic Metadata
Required properties for every page
To turn your web pages into graph objects, you need to add basic metadata to your page. The four required properties for every page are:
og:titleThe title of your object as it should appear within the graph, e.g., “The Rock”.
og:typeThe type of your object, e.g., “video.movie”. Depending on the type you specify, other properties may also be required.
og:imageAn image URL which should represent your object within the graph.
og:urlThe canonical URL of your object that will be used as its permanent ID in the graph.
Example Implementation:
<html prefix="og: https://ogp.me/ns#"> <head> <title>The Rock (1996)</title> <meta property="og:title" content="The Rock" /> <meta property="og:type" content="video.movie" /> <meta property="og:url" content="https://www.imdb.com/title/tt0117500/" /> <meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" /> ... </head> </html>
Optional Metadata
Recommended properties for enhanced social sharing
The following properties are optional for any object and are generally recommended:
og:descriptionA one to two sentence description of your object.
og:site_nameIf your object is part of a larger web site, the name which should be displayed for the overall site.
og:localeThe locale these tags are marked up in. Of the format language_TERRITORY. Default is en_US.
og:audioA URL to an audio file to accompany this object.
og:videoA URL to a video file that complements this object.
Structured Properties
Additional metadata for images, videos, and audio
Some properties can have extra metadata attached to them. These are specified in the same way as other metadata but the property will have extra colons.
Image Properties
og:image:urlIdentical to og:imageog:image:secure_urlHTTPS alternate URLog:image:typeMIME typeog:image:widthWidth in pixelsog:image:heightHeight in pixelsog:image:altAlt text descriptionComplete Image Example:
<meta property="og:image" content="http://example.com/ogp.jpg" /> <meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" /> <meta property="og:image:type" content="image/jpeg" /> <meta property="og:image:width" content="400" /> <meta property="og:image:height" content="300" /> <meta property="og:image:alt" content="A shiny red apple with a bite taken out" />
Object Types
Different types of content and their specific properties
In order for your object to be represented within the graph, you need to specify its type using the og:type property.
Common Types
websiteAny non-marked up webpage should be treated as website type.
articleFor blog posts, news articles, and other written content.
video.movieFor movie and video content.
music.songFor music tracks and audio content.
Best Practices
Tips for optimal Open Graph implementation
Image Specifications
Use images that are at least 1200x630 pixels for the best display on high resolution devices.
Description Length
Keep descriptions between 150-300 characters for optimal display across platforms.
URL Consistency
Always use absolute URLs and ensure they match your canonical URLs.
Testing
Use tools like Facebook’s Sharing Debugger to test your Open Graph implementation.
Tools and Resources
Helpful tools for testing and implementing Open Graph