Using Rich Preview Meta Tags As Images Html Css

When you send a link via text, facebook message, or any mainstream messaging client you'll notice it generates a 'rich preview'. This is basically an image that pops up of the webs

Solution 1:

The big companies like Facebook and Twitter all have their own spiders that periodically crawl the web looking at the DOM of websites. If they see the relevant tags, they'll generate their respective 'preview' automatically.

Literally all you need to do is have the right <meta> tags in your head section. You've demonstrated the OpenGraph protocol in your sample above, which is used by most sites.

The basic tags, according to OpenGraph 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/.

There's a number of others, though those are the main ones that you need.

Sites often define their own prefixes though. Twitter, for example, additionally uses a custom twitter: prefix to allow for some extended functionality.

Facebook has a debug tool through which you can submit your URL to have them forcibly update their preview, and Twitter has their own card validator which will also forcibly crawl the site.

Simply wait for the site in question to crawl your own website, or submit your site manually through a respective tool, and your preview will be crafted. This preview will apply to anyone who attempts to hotlink to your website, not just you as the person who used the tool.

Hope this helps!