Why your link previews are broken, and how Angular SSR fixes them

You publish a blog post, paste the link into LinkedIn, WhatsApp or Slack, and get… a bare URL. No title, no image, no description. If your site is a client-rendered single-page app, this is almost certainly why.

Crawlers don't run your JavaScript

Link-preview bots from Facebook, LinkedIn, X, WhatsApp and Slack fetch your page and read the <meta> tags in the HTML. Most of them do not execute JavaScript. A client-rendered Angular app sends an almost empty index.html and builds the page in the browser, so the crawler sees your default title and nothing else.

Server-side rendering fixes the HTML

With Angular SSR, the server renders the full page for each request, including the title and meta tags for that specific post, service or product. In Angular this is a few lines in a component or resolver:

this.title.setTitle(post.title);
this.meta.updateTag({ property: 'og:title', content: post.title });
this.meta.updateTag({ property: 'og:description', content: post.excerpt });
this.meta.updateTag({ property: 'og:image', content: post.shareImage });
this.meta.updateTag({ name: 'twitter:card', content: 'summary_large_image' });

Because this runs on the server, the HTML the crawler receives already contains the right tags. This very website works exactly this way.

The OG image gotcha

Even with SSR, previews often still show no image. The usual culprits:

• The URL is relative. og:image must be an absolute URL, including https://.
• The image is too big. Several crawlers silently reject large images. On one platform we built, social crawlers ignored full-size uploads until we added a small image proxy (Node and sharp) that serves right-sized versions.
• Wrong dimensions. Aim for 1200×630 so the card isn't cropped awkwardly.
• Caching. Platforms cache previews aggressively. Use their debugging tools to re-scrape after you fix something.

Our default setup

Every page on a site we build gets a canonical URL, a unique title and description, Open Graph and Twitter tags, structured data (JSON-LD), and an automatically generated 1200×630 share image when no custom one is set. Paste any link from this site into a chat app to see it in action.

Need your Angular app to show up properly in search and social? Let's talk.