Reputation: 15559
In facebook, when I add a link to a website, it automatically brings some synopsis (text and images) from the external website and adds it to the page...
Something like this:
How can this be done? I simply don't know where to start and what to google to find a tutorial about this.
Upvotes: 0
Views: 124
Reputation: 21672
What you're looking for are Open Graph Meta Tags. By including these in the <head>
of your page, Facebook can then use this information to generate useful previews.
To turn your web pages into graph objects, you need to add basic metadata to your page. We've based the initial version of the protocol on RDFa which means that you'll place additional
<meta>
tags in the<head>
of your web page. The four required properties for every page 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/".
As an example, the following is the Open Graph protocol markup for The Rock on IMDB:
<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>
The excerpt above, as well as additional properties and information, can be found here: The Open Graph protocol.
Upvotes: 2