Hey. Good to have you back reading on Emmason247 again.
Open graph makes site link sharing more attractive. In this article, I will teach you how to use open graph to make your website links appears nice when shared on social networks or media.
This article mainly focused on how to make your website's link appears nice when they are posted on any social media platform social media, like really attractive.
Table of Contents
Introduction
What is Open Graph?
Adding The Title
Adding The Image
Adding The URL
Adding The Type
Adding The Description
Summary
Look at the link below:
Looks boring right?. Now look at the one below:
That is nice, right?
So how do we achieve the later result?
The answer is simple
Open Graph.
What is Open Graph?
The Open graph is used to turn any web page into a clickable object on social media, could be Facebook, Twitter or LinkedIn.
The Idea was actually started by Facebook in 2010. With some meta properties in the head section of our html documents, we can achieve that really easily.
We are going to take the link in the picture at the beginning of the article as our case study. It has a title, an image, a URL,a type and a description.
Now let us discuss them one by one:
Adding the Title
I mean The part marked below:
To add the title, we add the title property of the Open Graph. Add the line of code below in the head session of your HTML document.
<meta property="og:title" content="Your Title Should Come Here" />
That is all you need to displayed the title.
Adding The image.
The image in the link is the part marked below:
To achieve that, add the line of code below to the head section of your HTML document:
<meta property="og:image" content="The Link or URL to your Image Should Come Here" />
That's actually all the code you need to display the image.
Adding the URL.
Open Graph specifies that the URL is The canonical URL of your object that will be used as its permanent ID in the graph. It is the part marked below:
To add it, you simple add this line of code to the head section of your HTML document:
<meta property="og:url" content="Your URL Should Come Here" />
As a recommendation, it should be the URL of the page that owns the link.
Adding the Type.
The type just species the object you are displaying. Is can be a video, an image or a blog post. In our example, the type is a blog post.
To achieve that just add the line to code below to the head section of your document:
<meta property="og:type" content="blog" />
There are some other types anyway.
Use this if you are linking to a movie.
<meta property="og:type" content="video.movie" />
If there is any other thing you want to add in the link and can't figure it out, just let me know in the comments.
Adding the description.
The description as the name implies is a one to two sentence description of your object.
In our above link, the description does not appear but it might be needed for some other social media side so you should add it.
<meta property="og:description" content="Your Description Should Come Here" />
Again adding the description is as easy as that.
Summary
So that is it and below is the complete code:
<meta property="og:title" content="Your Title Should Come Here" />
<meta property="og:image" content="The Link or URL to your Image Should Come Here" />
<meta property="og:url" content="Your URL Should Come Here" />
<meta property="og:type" content="blog" />
<meta property="og:description" content="Your Description Should Come Here" />
All right that is it. Now no more boring looking links.
I remain Isaiah Ozadhe and I write regularly about programming here on Emmason247.
You wouldn't regret reading any of my other articles and tutorials.
Do have a wonderful day.