Website links received in Messages can be made vastly more inviting than a simple text URL. By providing small amounts of metadata in your web pages, links to your website can include rich content such as icons, images and even video. Learn how visitors to your website can share links that look as good as your website.
Hi, I'm Tim Horton from the Safari and WebKit team, and today I'm going to show you how easy it is to ensure that users get beautiful, rich presentations when sharing links to your website in Messages and elsewhere on the system.
Imagine that a user of your site is reading about your latest new product, and wants to share a link to it with their friend. They'll use the Share Sheet in Safari and send it via Messages.
On the other side, their friend will see a very inviting link to tap on.
You should only use "og:image" for interesting images that are specific to the particular page. Generic fallback images -- like your company's logo or a user's avatar -- should be icons instead. Images should not include text. Rich links are presented at many sizes, across many devices. The same image will be shown all the way from Apple Watch to iPad Pro, and text in an image will not scale well across all of those. And as I mentioned before, you should still specify an icon even if you also have an image.
Now we'll take our link a step beyond images and introduce an autoplaying, autolooping video. All that's needed for inline video is yet another Open Graph tag. This time, "og:video". The URL should point to a small, downloadable video file of any format that iOS and macOS can natively play.
As you see, the video plays inline. If the video contains audio, it starts out muted but with the option to unmute it. If you can't host a video file yourself, you can instead point your og:video at a YouTube embed URL. YouTube videos won't autoplay, but the user can tap to play them. It's important to note that this is specific to YouTube; other embedded players will not work.
When adding video metadata to your site, it's important to keep the size in mind. The icon, image, and video together are limited to 10 megabytes, and the smaller they are, the faster the link will appear and the happier your users will be. You should use directly referenced video files for the ideal autoplaying behavior. And like I said earlier, except for YouTube, embedded video that requires HTML or plug-ins is not supported. I hope you'll take this information and go and add Open Graph metadata to your website to make sure that when your users share links to it, they get the best possible experience. For more information and additional resources about what we've talked about, use the links in the Resources section
Looking for something specific? Enter a topic above and jump straight to the good stuff.
An error occurred when submitting your query. Please check your Internet connection and try again.