CODEWITHSUNDEEP
htmlcss
Optimus
Optimus

Reputation: 79

How to add url link with its image or fetching with its image using normal html and css? (Share link with metadata in social media)

I want to do the thing which is shown in this image

enter image description here

If you see in the above image the container contains the link URL and image which is fetched from that URL... How it is achieved using HTML and CSS?

Upvotes: 0

Views: 190

Answers (1)

SMAKSS
SMAKSS

Reputation: 10520

Well, to achieve such a thing you need to use the open graph protocol meta tags in your HTML <head>, to enable social media graph read your metadata. There are several tags that are available within the open graph protocol but the main ones are:

  • og:title: The title of your object as it should appear within the graph, e.g., "The Rock".
  • 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/".
<html prefix="og: http://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>

NOTE From the moment that you add these meta tags to your HTML <head> it may take a while (1-2 weeks) until they get read by social media graphs.

Upvotes: 2

Related Questions