open-graph-protocol
This GitHub repository is a commentary on Facebooks’s Open Graph Protocol — This is not Facebook’s Open Graph protocol repository, which is located in Facebook’s GitHub archive
The Open Graph protocol could use updating (or something)
September 30, 2022 — Many texting apps support the use of Open Graph for rich link previews, but they all treat images differently, and it’s hard to find information. It would be nice if the Open Graph protocol could be updated (I’ve drafted a suggestion in this repository) to at least have standards for how the apps that use Open Graph information treat it and how websites should provide the information.
Table of Contents
Examples of rich link previews in messaging apps
The problem
The Open Graph protocol was created for configuring webpages so that they can be shared on Facebook. Messaging apps, email programs, and other social media sites use the same Open Graph metadata to create rich link previews when a link is shared.
Unfortunately, the Open Graph protocol wasn’t designed for messaging apps, and the apps (e.g. KakaoTalk, Messenger, Telegram, WhatsApp, etc.) do not exactly follow the Open Graph guidelines, nor do they publish information on how they apply the Open Graph protocol. This makes it difficult to create metadata and images that can be effective in all applications.
Rich link previews are important as they help websites build traffic. A link (only the URL) from an acquaintance sent through a messaging app may be clicked or it may not. A link from an acquaintance with some descriptive text and a helpful image has a higher probability of getting clicked.
Examples of rich link previews in messaging apps
The way messaging apps display rich link previews varies. Below are examples from a cooking website (a recipe for peanut butter blossom cookies) and from Coca-Cola (their home page).
Rich link previews for a cookie recipe
Each of the four apps uses different information from the website data to create their rich link preview.
| App | og:title | og:description | og:sitename | page title | domain |
|---|---|---|---|---|---|
| KakaoTalk | ✓ | ✓ | ✓ | ||
| Messenger | ✓ | ✓ | ✓ | ||
| Telegram | ✓ | ✓ | ✓ | ✓ | |
| ✓ | ✓ |
KakaoTalk — includes both the page title (with the URL) and the og:title (which for many sites are the same text) but does not, for this page, include the og:description — if the title goes beyond one line, KakaoTalk drops the description in favor of including more of the title text.
Messenger — includes the og:title and the og:description.
Telegram — includes both the page title and the og:title and the og:description.
WhatsApp — includes just the og:title — if the title was shorter, WhatsApp would have included text from the og:description tag.
Cookie recipe’s Open Graph image
While KakaoTalk and Telegram show the entire image, Messenger zooms in, cropping off more than 70% of the image content, and WhatsApp crops the image to a square. That’s okay for a cookie recipe, but may not work for a product image or an information graphic.
Rich link previews for Coca-Cola’s home page
| App | og:title | og:description | og:sitename | page title | domain |
|---|---|---|---|---|---|
| KakaoTalk | ✓ | ✓ | ✓ | ✓ | |
| Messenger | ✓ | ✓ | ✓ | ||
| Telegram | ✓ | ✓ | ✓ | ✓ | |
| ✓ | ✓ |
KakaoTalk — includes both the page title (with the URL) and the og:title (which for many sites are the same text). If the og:title fits on one line, then KakaoTalk would include one line of the og:description.
Messenger — includes the og:title and the og:description.
Telegram — includes both the page title and the og:title and the og:description. Telegram will uses the twitter:card meta tag (if present) to determine the image layout. If the twitter:card tag is set to summary or if there is no twitter meta tag, then Telegram displays a square image. If the twitter:card tag is set to summary_large_image then Telegram displays a rectangular image — if there is no twitter:card tag, then a large, landscape image is shown if the og image is rectangular or a small square image if the og image is small.
WhatsApp — includes the og:title and part of the og:description.
Coca-Cola’s Open Graph image
Coca-Cola uses a square image with three bottles featuring the Coca-Cola logo in the center of each bottle. Whether the image is used as a square or cropped, the logo is visible. The logo is not readable in a smaller image, but Coca-Cola’s distinctive bottle is recognizable.
Unfortunately, most websites do not have an established logo or product shape and so have to depend on the image in rich link previews being readable to help build their brand identity.
Background
The Open Graph protocol was created at Facebook and published to GitHub in 2010. The GitHub content was used for the Open Graph protocol website, which is controlled by Facebook. No pull requests for the GitHub repository have been accepted since November 2016 and the repository was archived in October 2019.
The protocol defines the tags for communicating page information, but it does not provide any guidance on designing images. Facebook provides information on image sizes in its developer documentation.
Facebook initially recruited others to use Open Graph (e.g. Google and mixi, a Japanese social networking service), but there didn’t seem to be any collaboration on the protocol.
About the same time that Facebook was defining their Open Graph protocol (2010), Bing, Google, and Yahoo worked together to launch in 2011 Schema.org, a collaborative effort to create schemas for structured data on web pages. That effort is still maintained through a public mailing list and is being updated as needed via GitHub and the schema.org website.
What’s needed
While most websites include Open Graph (and Twitter) data, there needs to be guidelines on how to best prepare data & images, especially for messaging apps.
An organization
While Facebook did create the Open Graph Protocol, and they did recruited others to use it, they did not set up an organization like Schema. Ideally, having an organization similar to the way most things are done on the internet would be great. People who are interested in the Open Graph Protocol could join the organization, the protocol could become a working document, rather than an archive on GitHub, and applications that utilize Open Graph data would have a standard to follow, all of which would benefit end users who share links via the applications.
An updated standard
It would be good to have:
- document with ???
- image sizes
- data (needed and no longer needed)
- way to update
- required support from applications that use Open Graph data - clear cache and test page (Twitter is annoying)
- app guide - title versus og:description - Some messaging apps use both the page title and the og:title in their rich link previews. The page title (length recommendation for google vs my recommendation in GitHub) is used on browser tabs and title bar, and for search engines. Start with the current protocol. Define fields. Drop unnecessary fields. Define fallback
New version
As a starting point, I have revised the most recent (2016) version of the Open Graph Protocol to include image recommendations, but nothing about how message apps should process data.
https://richdebourke.github.io/open-graph-protocol/ogp-demo1.html