How deeply does Modern Angular cover search engine optimization?

Defines crawlers, keywords, links, and indexing, then stops at the problem client-side JavaScript creates for SPAs.

Search engine optimization

Search engine optimization is the practice of improving a website's visibility and ranking in search-engine results.

Search engine optimization (SEO) improves web-page visibility by using relevant keywords and structures that help search-engine crawlers find, interpret, and index content. Higher search visibility can increase traffic and revenue for public-facing sites such as blogs, landing pages, and marketing websites. section 9.1.2

Angular single-page applications create a specific SEO problem:

A crawler initially loads the page, extracts available information and links, and indexes keywords. section 9.1.2
Unlike a browser, the crawler does not execute client-side JavaScript, so an SPA may expose little more than its initial application shell. section 9.1.2
This limitation matters less for frequently used enterprise tools than for sites whose traffic depends on discovery through search. section 9.1.2

A local legal-services site

A legal company in Albuquerque can target terms such as “lawyer in ABQ.” If crawlers can find and index its pages, users searching that phrase may discover the site. section 9.1.2

Listing 9.1 index.html file of an Angular single-page application

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Hrms</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <app-root></app-root>
  <script src="runtime.js" type="module"></script>
  <script src="polyfills.js" type="module"></script>
  <script src="styles.js" defer></script>
  <script src="vendor.js" type="module"></script>
  <script src="main.js" type="module"></script>
</body>

</html>

The Angular SPA entry document shows an app-root element surrounded by JavaScript bundles, illustrating why crawler access can differ from browser rendering. section 9.1.2

How Modern Angular covers it

liveBook manning.com

Read Modern Angular on liveBook Get the book at manning.com

Also explained in

liveBook manning.com

WordPress Power Toolkit: Harness AI to build next-level websitesSearch engine optimization is the practice of improving a website so that search engines rank it more favorably for relevant queries.

Compare how 2 books explain search engine optimization →

Related concepts

keyworduses · A keyword is a word or phrase with special significance for representing a topic, information need, content relevance, or syntactic role.
AI optimizationcontrasts with · AI optimization is the practice of improving website content and structure so AI systems can understand, recommend, and present it for relevant queries.
semantic markupused by · Semantic markup is the practice of using HTML elements according to the meaning and structural or interactive role of their content.
lexical searchused by · Lexical search retrieves or ranks items by matching query terms or other surface-text features against indexed content, often using sparse representations and statistical weighting.

This explainer was generated by Manning's knowledge graph from the text of Modern Angular. The section links point to the parts of the book it draws on.