Making Urls Paste with Metadata Preview In Facebook, Facebook Messenger, Twitter...
source link: https://fuzzyblog.io/blog/webdev/2020/03/14/making-urls-paste-with-metadata-preview-in-facebook-messenger-twitter-apple-messages.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Making Urls Paste with Metadata Preview In Facebook, Facebook Messenger, Twitter, Apple Messages
Mar 14, 2020
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://covidnearme.org/assets/covid-5c8b7d67715397bef73ccaf0ee4402a1952d97123328aeb2db839ca071583c98.png" />
Step 3: Testing in The Sharing Debugger
Go to https://developers.facebook.com/tools/debug/ and paste in your url. You may need to click the Scrape Again button a few times while you work this out.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK