undefined | Better HN

0 pointstppiotrowski4y ago0 comments

When you share a url like a news article on Twitter or send it on Slack, iMessage etc, you get a small preview widget showing you the headline and a photo from the story.

The way this is generated is Twitter/iMessage scrapes the HTML of the url you are sharing and looks for <meta name="og:image" content="https://imgur/adfstdd"> and displays whatever image is in the content field. Similarly the widget title is populated from <meta name="og:title" content="About Us">

In a static html site there is only one index.html so all routes have the same meta tags unless you overwrite the index.html file using an edge worker.

0 comments

dom964y ago

> In a static html site there is only one index.html so all routes have the same meta tags unless you overwrite the index.html file using an edge worker.

I guess this is specifically for SPA static sites? I would expect a static html site to have different html files for each page, like blog/2020-09-09-title.html and that could then have its own metatags, so no need for this dynamic rewriting, unless I'm missing something.

tppiotrowskiOP4y ago

Correct. This is only for SPAs that use client side routing like react-router. React SPAs are quite common with startups in my experience.

dbbk4y ago

Crawlers like Google's run JavaScript now though, so your example is outdated.

tppiotrowskiOP4y ago

This isn't only for googlebot but Twitterbot, slackbot, facebookbot and [fill-in-blank]bot that fetch your page to generate a url preview in their app when links from your domain are shared.

1 more reply

j / k navigate · click thread line to collapse

0 comments

dom964y ago

> In a static html site there is only one index.html so all routes have the same meta tags unless you overwrite the index.html file using an edge worker.

tppiotrowskiOP4y ago

Correct. This is only for SPAs that use client side routing like react-router. React SPAs are quite common with startups in my experience.

dbbk4y ago

Crawlers like Google's run JavaScript now though, so your example is outdated.

tppiotrowskiOP4y ago

This isn't only for googlebot but Twitterbot, slackbot, facebookbot and [fill-in-blank]bot that fetch your page to generate a url preview in their app when links from your domain are shared.

1 more reply

j / k navigate · click thread line to collapse