typescript - Angular SEO hur man korrekt implementerar dynamisk titel och meta?

Jag har en liten fråga om Angular titel och meta. Jag har importerat bibliotek i min Angular. Jag sätter min titel och beskrivning av meta i konstruktorn av .ts-filerna på detta sätt (olika titlar och beskrivningar för varje sida förstås);

//To set the title
this.titleServ.setTitle("SOME TITLE HERE")
//To set the meta
this.meta.addTag({name: "description", content: "SOME DESCRIPTION HERE"})

När jag kör min webbplats genom IIS och kollar från webbläsaren, ser jag fortfarande något som detta;

  <title></title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">

Som sagt, jag kan inte se min sidtitel eller sidbeskrivning från källkoderna (men jag kan se det från en Google-sökning och i Google Chrome-fliken). Jag försöker för närvarande att ställa in sökmotoroptimeringar. Finns det något problem här? Jag menar, alla guider jag har sett kan se sin sidtitel från sektionen och kan också se meta.

Vad gjorde jag fel eller finns det något jag behöver göra mer för att webbplatsen ska synas på Google vid sökning med vissa nyckelord?

Svar #1

Angular är som standard en klient-sida applikation. När du kör appen och tittar på HTML-källan får du i princip källkoden till index.html som finns i roten av src.

För SEO behöver du rendera sidan på servern. På så sätt, när webbläsaren tar emot HTML, är den förrenderad med vissa dataelement, inklusive de SEO-relaterade taggarna/innehållet.

Detta är den officiella guiden om hur man lägger till server-side rendering (Angular Universal) till din applikation: https://angular.io/guide/universal

Den viktigaste delen är att för att serversidesrendering ska kunna ske, behöver du starta din app med det dedikerade kommandot (t.ex. npm run dev:ssr som standard). Detta kommer att starta upp Node, som kommer att hantera förfrågningarna på serversidan.