The tags are alright

I really like how Slack, Twitter, Facebook, and WhatsApp expand links, adding context and putting the focus on the main content. YouTube links become inline players or thumbnails. News articles display short summaries alongside the author’s name. Even something simple, like my podcast’s landing page, can be jazzed up:

How does it work? Meta tags. By parsing tags defined in the <head> element of the link’s html, you can extract a lot of data: title, type, related media, content creator, etc. Each of the major social networks have their own formats, but Eran Hammer’s Metaphor node library understands them all.

Just pass Metaphor a URL & a callback and it’ll return an object packed full of Twitter, Facebook, and oEmbed data (another common embedding protocol):

text { url: 'http://commit.devpost.com', type: 'website', title: 'The Devpost Commit', description: 'A weekly show about software developers, hackathons, and getting a job in tech -- Hosted by Richard Murby and Neal Shyam', image: { url: 'https://challengepost-assets.s3.amazonaws.com/commit/commit-twitter-card.jpg', size: 566832 }, sources: [ 'ogp', 'resource', 'twitter' ], author: 'Devpost', icon: { any: 'http://commit.devpost.com/public/img/favicon.ico', smallest: 'http://commit.devpost.com/public/img/favicon.ico' }, twitter: { site_username: '@devpost', creator_username: '@devpost' }, site_name: 'Devpost', preview: '<html><head><title>The Devpost Commit</title></head><body><div class=\'metaphor-embed\'><div class=\'metaphor-embed-header\'><img class="metaphor-embed-header-icon" src="http://commit.devpost.com/public/img/favicon.ico"/><div class="metaphor-embed-header-site">Devpost</div><a class="metaphor-embed-header-link" href="http://commit.devpost.com"><div class="metaphor-embed-header-title">The Devpost Commit</div></a></div><div class=\'metaphor-embed-body\'><div class="metaphor-embed-body-description">A weekly show about software developers, hackathons, and getting a job in tech -- Hosted by Richard Murby and Neal Shyam</div><img class="metaphor-embed-body-image" src="https://challengepost-assets.s3.amazonaws.com/commit/commit-twitter-card.jpg"/></div></div></body></html>' }

Comments :)
2017 Neal Shyam