Member Avatar for bigtiny

Hi all,

I'm not very experienced at web development, but I'd like to know how the following is accomplished. I haven't been able to find specific info via google on this. I think web services are involved, but I'd like either an explanation of the specifics or a pointer to a tutorial or info about it. Please be gentle.

I'm using an application, let's say the 'whatsapp' messaging app, cuz that's where I last saw this behavior. I'm trading messages with a friend about, I don't know, Korean food. We start discussing restaurants and I remember there's this great Korean restaurant I know.

So I pop out to my browser, look up the restaurant's web page and open it. I then copy the URL for the restaurant's web page from the address box.

Now I go back to whatsapp and write a text message like "Oh hey, you might want to check out this restaurant, it's really good " and paste in the URL. Now in my send box in whatsapp I see:
"Oh hey, you might want to check out this restaurant, it's really good <URL>" and I hit send.

In my whatsapp interface, the message I just sent is put up in the main display where I can see the 'conversation', but here instead of seeing "Oh hey, you might want to check out this restaurant, it's really good <URL>" I see "Oh hey, you might want to check out this restaurant, it's really good followed by what appears to be content from the actual web page, including photos, etc.

  • 3 Contributors
  • 2 Replies
  • 709 Views
  • 2 Hours Discussion Span
  • Latest Post Latest Post by gentlemedia

Dani AI

Generated

As already pointed out, that rich snippet is a link preview built from metadata on the page (things like the page title, description and a thumbnail). WhatsApp (and other messengers) typically have a server-side scraper that fetches the URL you paste, reads the social metadata, builds a small “card” (title, image, short text) and caches it. That explains why the message in your chat turns into a preview instead of showing the raw URL text. ’s note about trackers is a different issue — trackers are scripts that collect usage data — but the preview itself is created by a crawler fetching the page.

Practical checklist to make previews predictable:

  • Put social metadata in the initial HTML that the server returns (not only injected by JavaScript). If your site is a single-page app, use server-side rendering or a pre-render step so scrapers see the tags.
  • Use an explicit image for previews, hosted at an absolute HTTPS URL, and declare its dimensions (some scrapers use width/height hints). A common recommendation is around 1200x630 px for best display.
  • Ensure the page and image respond with HTTP 200 and are not blocked by robots.txt, firewall rules, or require login.
  • Prefer stable og/twitter/schema metadata (title/description/image) and include fallbacks so different platforms pick the right values.

Quick troubleshooting you can run from your server or local machine:

  • Simulate the scraper with a curl request using the Facebook/WhatsApp scraper user-agent to see the raw HTML and headers. For example:
curl -L -A "facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)" https://example.com/your-page

If the meta tags or image are missing for that request, the preview will fail in WhatsApp too. Remember scrapers usually do not execute JavaScript.

A couple of final notes: platforms cache scraped previews, so after changing tags either force a re-scrape (platform debug tools or change the URL with a version query) or wait for the cache to expire. And while the preview fetch is a server-side request (not your phone sharing browsing history), the server fetching the page will cause the page’s third-party resources (trackers, images, etc.) to be requested by that crawler — so trackers on the page can still observe that fetch.

Recommended Answers

All 2 Replies

Member Avatar for rproffitt

It's most likely done with trackers. Apps today are now, for the most part always including Trackers. Yes, you've read about Ad-Sponsored Apps but there's more. There's always more.

Take a look at https://imgur.com/gallery/dumrc to start your journey of learning about Trackers in Apps.

I can only hope that we see a way to submit an App to see what's inside. But in short, if you use an app with trackers, that can leak as you noted then cause Google Ads to use targeted ads.

From the link above, some information you need to know about these trackers. WHAT ARE THEY DOING?

Flurry and Nexage are two of the trackers, and if you go to the above page, you will find that there is a collected information page that details some of the behaviours of the apps.

Flurry in particular, is a Verizon/Yahoo (now called Oath) venture that will, undoubtedly raise hackles.
https://arstechnica.com/information-technology/2017/06/oath-verizon-completes-4-5-billion-buy-of-yahoo-and-merges-it-with-aol/

Flurry watches how you interact with other users in the app, and culls a lot of other data to create and individualized portrait of you as a consumer.
https://reports.exodus-privacy.eu.org/trackers/25/

Nexage is also an Oath product that precisely monitors your individual usage, your location using all available suites like Cellular/Wi-Fi/Bluetooth/GPS, which makes me wonder if they're accessing this information while the application is off because these all can be accessed while they're turned off in some phones) and will associate all that recon data with all other information. They also state categorically that they will collect financial/health information, but they won't share it. But, they immediately falsify that by saying they will sometimes share your information if you give consent. Using the app that the tracker is embedded in, is considered consent.
https://reports.exodus-privacy.eu.org/trackers/33/

Indeed, Localytics uniquely identifies the user (BY NAME) and your GeoLocation with or without GPS, and stores that information. Interestingly, they track who uninstalls the application. One of their largest customers is Comcast (right at the bottom of their website's homepage): https://www.localytics.com/ "

Edited by rproffitt because: Formatting change.
Member Avatar for gentlemedia

This is because the page you share via WhatsApp has certain metadata included within the head of the HTML. It's called the Open Graph protocal and it's invented by Facebook so that when people share webpages on Facebook it shows a title, description and image in their posts. Now since WhatsApp is from Facebook, WhatsApp uses this metadata too to display a title, description and image in your message.

<html prefix="og: http://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta name="description" content="description of your website/webpage">
<meta property="og:title" content="The Rock" />
<meta property="og:description" content="Kick ass movie bla, bla, bla..." />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>

More info about OG here http://ogp.me/ and for testing or debugging your OG metadata here https://developers.facebook.com/tools/debug/

Edited by gentlemedia
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.