# Making Urls Paste with Metadata Preview In Facebook, Facebook Messenger, Twitter, Apple Messages

DevFeed: [Making Urls Paste with Metadata Preview In Facebook, Facebook Messenger, Twitter, Apple Messages](<https://devfeed.tech/articles/making-urls-paste-with-metadata-preview-in-facebook-facebook-messenger-twitter-apple-messages-28355.md>)

Original publisher: [Read original article](<http://fuzzyblog.io/blog/webdev/2020/03/14/making-urls-paste-with-metadata-preview-in-facebook-messenger-twitter-apple-messages.html>)

Author: Fuzzygroup

Published: 2020-03-14T00:00:00Z

Content type: tutorial

Language: en

Sources: [Scott Johnson](<https://devfeed.tech/sources/scott-johnson.md>)

Topics: [Web Development](<https://devfeed.tech/topics/web-development.md>), [HTML](<https://devfeed.tech/topics/html.md>), [debug](<https://devfeed.tech/topics/debug.md>), [Tooling](<https://devfeed.tech/topics/tooling.md>)

Tags: [apple](<https://devfeed.tech/tags/apple.md>), [debugger](<https://devfeed.tech/tags/debugger.md>), [debugging](<https://devfeed.tech/tags/debugging.md>), [facebook](<https://devfeed.tech/tags/facebook.md>), [html](<https://devfeed.tech/tags/html.md>), [messages](<https://devfeed.tech/tags/messages.md>), [messenger](<https://devfeed.tech/tags/messenger.md>), [twitter](<https://devfeed.tech/tags/twitter.md>), [web-development](<https://devfeed.tech/tags/web-development.md>), [webdev](<https://devfeed.tech/tags/webdev.md>)

## AI overview

A tutorial explaining how HTML metadata controls URL previews when links are pasted into Facebook Messenger, Apple Messages, Facebook, and Twitter. It describes using platform-specific meta tags and testing the result with the Facebook Sharing Debugger.

## Source excerpt

I am an old tech guy. I was at the conference where TBL announced the web and I wrote my first HTML snippet just a few years later. But I pretty quickly moved from front end HTML onto back end web development and there are techniques that, while common today, I have never learned. An example of this is making urls appear, with metadata, when they are pasted into a messaging tool like: Facebook Messenger Apple Messages Facebook itself Twitter itself We've all seen this. Sometimes you paste a url into Facebook Messenger and all that comes out is the url itself. And sometimes you get a picture, a title, etc. The secret to this is three fold: A set of HTML meta tags for Facebook A set of HTML meta tags for Twitter Testing it in a debugging tool like the Facebook Sharing Debugger Step 1: The HTML Meta Tags for Facebook Here is an example of the HTML meta tags for Facebook: <meta name="twitter:card" content="summary"/> <meta name="twitter:site" content="@fuzzygroup"/> <meta name="twitter:creator" content="@fuzzygroup"/> <meta name="twitter:title" content="www.covidnearme.org -- a web site for tracking COVID-19 near you"/> <meta name="twitter:description" content="www.covidnearme.org - an easy to use web site for watching the spread of COVID-19 in your country and / or state"/> <meta name="twitter:image" content="https://covidnearme.org/assets/covid-5c8b7d67715397bef73ccaf0ee4402a1952d97123328aeb2db839ca071583c98.png"/> Step 2: The HTML Meta Tags for Twitter Here is an example of the HTML meta tags for Twitter: <meta property="og:url" content="https://www.covidnearme.org/" /> <meta property="og:type" content="website" /> <meta property="og:locale" content="en_US"> <meta property="og:title" content="www.covidnearme.org -- a web site for tracking COVID-19 near you" /> <meta property="og:description" content="www.covidnearme.org - an easy to use web site for watching the spread of COVID-19 in your country and / or state" /> <meta property="og:image" content="https://covidnear