Have you ever seen Twitter links that have a preview to the content? Those links are using Open Graph Protocol. This is something that I literally found out today, as I was asking a fellow blogger Flavio Copes, recommended btw. Apparently it is a very common practice but it doesn’t get used so often by new web developers and can definitely make your content stand out.
What is Open Graph Protocol?
Open Graph is an internet protocol that was originally created by Facebook to standardize the use of metadata within a webpage to represent the content of a page.
Within it, you can provide details as simple as the title of a page or as specific as the duration of a video. These pieces all fit together to form a representation of each individual page of the internet.
Why to use it?
As I said before it makes your content stand out, which is obviously what we want on the internet. Not using a content rich link can make us lose potential traffic we could have had.
Open Graph basics
There are 5 Open Graph tags that are required for it to work properly which are
og:description. Twitter uses this tags as a fallback in case you don’t use
twitter:* with the corresponding tag
For placing the tags on you website, just do it with normal
<meta> tags in the
<meta property=“og:[replace with tag]” content=“[VALUE]” />
og:title: Title of your website
og:description: Description of your website
og:type: Depends on what your content is. The full list of standard object properties is in Object Properties Reference.
og:image: An image URL which should represent your object within the graph.
og:url: The URL of your site. ex. https://gabriellazcano.com
In my case this would be what I have to add:
<head> <meta property="og:title" content="What is Open Graph Protocol and how to create Twitter Cards?"> <meta property="og:description" content="Have you ever seen Twitter links that have a preview to the content? I'll show you how to do them"> <meta property="og:image" content="http://gabriellazcano.com/images/image.png"> <meta property="og:type" content="article"> <meta property="og:url" content="https://gabriellazcano.com"> <!-- more stuff --> </head>
If you’re interested in diving in more, the documentation does a great job at providing a list of all of the available tags for you to use.
How Twitter uses Open Graph?
Twitter has it’s own way of creating the so called Twitter Cards. It’s really not difficult, as straightforward as the simple
og:* tags but you have to add them if you expect to make it work in the site.
You add them similarly as the the Open Graph tags but you have to use the
name attribute and
tip: Ensure you are using
<meta name="twitter:card" content="[substitute with summary, summary_large_image, app, etc)]"> <meta name="twitter:title" content="[title]"> <meta name="twitter:description" content="[description]"> <meta name="twitter:image" content="[link to image]"> <!-- more stuff -->
You can check the full documentation on Twitter cards on https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started
You can test and visualize your Twitter cards in https://cards-dev.twitter.com/validatorEdit this page on Github