Open Graph
About
Open Graph is a preview of website when a user send a link into messaging system like Slack, Discord, Teams, Messenger or Twitter for example. It's display website title, a description and an image, it seems unimportant, but with this small card, users in conversation can have a useful presentation of website or page of a website. If this an article, we can see an abstract of body with an image which is attractive. The design of this card depends of social network or messaging system. We have two type: open graph (for Facebook and some messaging systems) and twitter card (for Twitter).
Links
Documentation
- ogp.me: official Open Graph website
- developer.twitter.com: official Twitter documentation
- ionos.com/digitalguide/online-marketing/social-media/open-graph: best article about Open Graph
Tools
- webcode.tools: amazing tool for SEO, can generate data
Test tools
- metatags.io: amazing tool to test Open Graph and Twitter card (with a lot social networks)
- opengraph.xyz
Examples
- loftie.com/post/how-to-add-twitter-and-facebook-cards-to-your-vue-app: example for Vue app
Table of Contents