CODEWITHSUNDEEP
htmlweb
bryanjclark
bryanjclark

Reputation: 6434

How can I customize the "web preview" in iMessages for my website?

In iMessage, when you share a webpage, the URL gets expanded to a nice preview, like this: NYTimes rich preview in iMessage

How do I go about adding this metadata to my own website?

Upvotes: 1

Views: 1606

Answers (1)

bryanjclark
bryanjclark

Reputation: 6434

Turns out, you get these previews by implementing The Open Graph protocol, like so:

<html prefix="og: http://ogp.me/ns#">
<head>
  <title>The Rock (1996)</title>
  <meta property="og:title" content="An Eclipse Chaser’s Guide to Your First Eclipse" />
  <meta property="og:type" content="article" />
  <meta property="og:url" content="https://www.nytimes.com/2017/08/14/science/eclipse-chasers-first.html" />
  <meta property="og:image" content="https://static01.nyt.com/images/2017/08/15/science/15SCI-CHASERS4/15SCI-CHASERS4-facebookJumbo.jpg" />
  ...
</head>
...
</html>

Upvotes: 4

Related Questions