Creating Web Page Preview while sharing url via social applications — like whats app, fb ..
You have seen many times when share link of YouTube via whats app or any other application so it shows preview for particular website like given image -
The Open Graph protocol enables any web page to become a rich object in a social graph.
Learn By a quick example —
<html>
<head>
<title>Technical Academy</title> <! — Maximum of 65 characters →
<meta name=”description” content=”Technical Academy provide you best learning resources for javascript and related frameworks.”> <! — Maximum of 155 characters →
<meta property=”og:title” content=”Learn Technology “ /> <! — Maximum 35 characters →
<meta property=”og:url” content=”https://www.example.com/webpage/" /> <! — Full link to your webpage address →
<meta property=”og:description” content=”Technical Academy provide you best learning resources for javascript”> <! — Maximum 65 characters →
<meta property=”og:image” content=”/download.png”> <! — Image(JPG or PNG) of size less than 300KB and minimum dimension of 300 x 200 pixel is advised →
<meta property=”og:type” content=”article” />
</head>
<body>
<img src=”download.png”/>
<h1> Shivam is testing This Page for sharing icon preview !! </h1>
</body>
</html>
When deploy this page to your server and share this page url so it will show preview . Lets learn how it works ?
If you want to make website URL show some information when share to social applications or add bookmark to PC and show icons so we need to add some metadata in our website head section . This meta data will be use Open Graph protocol.
you need to add basic metadata to your page head section —
4 important parameter -
og:title — The title of your object as it should appear within the graph, e.g., “Technical Academy”.
og:type — The type of your object, e.g., “video.movie”. Depending on the type you specify, other properties may also be required.
og:image — An image URL which should represent your object within the graph.
og:url — The canonical URL of your object that will be used as its permanent ID in the graph, e.g., “http://www.imdb.com/title/tt0117500/".
Optional Metadata
The following properties are optional for any object and are generally recommended:
og:audio — A URL to an audio file to accompany this object.
og:description — A one to two sentence description of your object.
og:determiner — The word that appears before this object’s title in a sentence. An enum of (a, an, the, “”, auto). If auto is chosen, the consumer of your data should chose between “a” or “an”. Default is “” (blank).
og:locale — The locale these tags are marked up in. Of the format language_TERRITORY. Default is en_US.
og:locale:alternate — An array of other locales this page is available in.
og:site_name — If your object is part of a larger web site, the name which should be displayed for the overall site. e.g., “IMDb”.
og:video — A URL to a video file that complements this object.
Follow Given Steps For perfect Preview on Whatsapp and other social apps —
Follow simple steps to get the perfect preview for WhatsApp, Twitter, Facebook and bookmark icons for pc’s and mobile devices -
Step 1: title
Maximum of 65 characters
<title>your keyword rich title of the website and/or webpage</title>
Step 2: description
Maximum of 155 characters
<meta name=”description” content=”description of your website/webpage, make sure you use keywords!”>
3. Step 3: og:title
Maximum 35 characters
<meta property=”og:title” content=”short title of your website/webpage” />
Step 4: og:url
Full link to your webpage address
<meta property=”og:url” content=”https://www.example.com/webpage/" />
Step 5: og:description
Maximum 65 characters
<meta property=”og:description” content=”description of your website/webpage”>
Step 6: og:image
Important —
Image(JPG or PNG) of size less than 300KB and minimum dimension of 300 x 200 pixel is advised
<meta property=”og:image” content=”//cdn.example.com/uploads/images/webpage_300x200.png”>
Step 7: og:type
In order for your object to be represented within the graph, you need to specify its type. Here’s a list of the global types available: http://ogp.me/#types. You can also specify your own types.
<meta property=”og:type” content=”article” />
Step 8: og:locale
The locale of the resource. You can also use og:locale:alternate if you have other language translations available.
If you don’t specify og:locale, it defaults to en_US.
<meta property=”og:locale” content=”en_GB” />
<meta property=”og:locale:alternate” content=”fr_FR” />
<meta property=”og:locale:alternate” content=”es_ES” />
Step 9: Twitter
For the best Twitter support read this.
Step 10: Facebook
For the best Facebook support read this.
Step 11: favicon
For the best favicon support for all browsers and devices read this.
Bonus step 12: video/audio
It’s also possible to share audio/video. Facebook and twitter for example share videos very well.
Read ogp.me for complete Guide.
Note —
Image(JPG or PNG) of size less than 300KB and minimum dimension of 300 x 200 pixel is advised-
Thank you ! If any Questions please write in comment :)