Search for a command to run...
No comments yet. Be the first to comment.
More and more online services are introducing new ways to confirm login to their services. Logging in with an OTP confirmation token is becoming a very common practice. But such authorization methods have their disadvantages such as bad UX and what i...
Hey 👋, I'm back with a new blog post after a long break! This past week, I’ve been diving deep into integrating push notifications into a mobile app. If you've ever wondered how they work and why they’re so effective, this post is for you! What Are ...
I'm back again with a new blog post. The idea for this post came very spontaneously. I'm currently investing a lot of time in my new development project, and I came up with how to further secure the application. As a solution to this issue, quite a f...
Node.js is an engine that allows us to run JavaScript outside the browser. Many applications today are powered by Node.js, offering numerous advantages and a few drawbacks. However, my intention today is not to introduce Node.js or JavaScript. Today,...
I have said many times that computer science is a huge field in which everyone can find themselves. Being a computer science student has its advantages and benefits, and one such advantage is what GitHub offers with its GitHub for Education program a...
Open Graph is an Internet protocol created by Facebook to standardize the display of metadata on social networks.
Open Graph brings advantages when displaying a website on social networks. Open Graph makes our posts more visible on social networks and shows them better in searches.
Above we can see a website without Open Graph tags and how the link will be displayed on the Facebook social network.
Now I will show how my blog post would look if I share or post a link on Facebook or another social network using the Open Graph protocol.
Even if you don't have any Open Graph tags on your page, nothing serious will happen, but they improve your presentation on social networks.
We know the four basic tags used in the Open Graph protocol, which are considered mandatory. These tags are og:title, og:type, og:image, and og:url.
What represents which element is shown in the image below?
Purpose of individual labels:
og:image - displays an image (contains the URL to the image)
og:title - usually the same as in <title> and displays the page title
og:description - used to describe the page
og:url -represents the URL of the page
og:locale - intended to indicate the language of the publication
There are officially 17 different tags that you can use on your website. You can read more about the possible tags in the official documentation.
Adding Open Graph tags is easy. We add them to the header in the meta tag with the desired content. Below is a simple Open Graph example for the above example post at the following link.
<meta property="og:title" content="Open-source software: what makes it so attractive?">
<meta property="og:description" content="You may already be familiar with the term "open source" if you have been involved in programming for some time. Open-source software has gained popularity for many reasons, some of which I will attempt to explain below.">
<meta property="og:type" content="article">
<meta property="og:url" content="https://blog.thepatik.com/open-source-software-what-makes-it-so-attractive">
<meta name="image" property="og:image" content="https://hashnode.com/utility/r?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1682593145782%2F3f7705ec-2679-4c1c-a52d-b8d3fdeaa78d.png%3Fw%3D1200%26h%3D630%26fit%3Dcrop%26crop%3Dentropy%26auto%3Dcompress%2Cformat%26format%3Dwebp%26fm%3Dpng">
As we have seen, the Open Graph protocol is a simple addition to websites that improve presentation on social networks.