What is Open Graph Protocol?
The Open Graph protocol enables any web page to become a rich object in a social graph.
Hi! In this post, we will talk about Open Graph protocol. I will introduce Open Graph usage in Next.js at the end of the writing.
First of all, what is Open Graph protocol? Open Graph is developed to control how the URL will look in social media. Also, it’s standardized SEO meta tags. Facebook introduced it in the first place in 2010, however, it’s used most of the web today.
We use Open Graph in our daily usage. When we share a URL on social media we see a website title, some description, and an image. This information comes from the Open Graph protocol.
Open Graph Metadata Properties
Open Graph protocol can be seen in the head section of websites. It can be seen as og:title, og:description, og:image, and some other metadata. With these meta tags, the website seems more professional and gets more attention from users.
og:title- The title of your website as it should appear within the graph. This blog title will seen as What is Open Graph Protocol?og:description- A one to two-sentence description of your website. This blog description will seen as The Open Graph protocol enables any web page to become a rich object in a social graph.og:type- The type of your website, e.g., "video.movie". Depending on the type you specify, other properties may also be required. This blog type will seen as articleog:image- An image URL that represents your website. This blog has the first image in the beginning as og:imageog:url- The canonical URL of your website.
Many content creation websites set these properties while creating the content. As an example, if you are a writer at SubStack, then it sets properties from your content.
Websites could create different images and properties for Open Graph. For instance, GitHub generates images related to the source.
If you are creating your website on your own, then this responsibility belongs to you.
As an example, I will show some metadata properties copied from one of my blogs
Open Graph in Next.js
Next.js has features to handle and create Open Graph properties. To add an image just create an image in the corresponding folder with the name opengraph-image.
Next.js has detailed documentation for Open Graph protocol. For more details, you can check it in the resources section