Angular SEO, как правильно реализовать динамический заголовок и мета?

У меня есть небольшой вопрос о заголовке и метаданных Angular. Я импортировал библиотеки в свой angular. Я установил свой заголовок и описание метаданных в конструкторе файлов .ts, подобных этому (конечно, разные заголовки и описания для каждой страницы);

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

Когда я запускаю свой веб-сайт через IIS и проверяю из браузера, я все еще вижу что-то вроде этого;

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

Как уже было сказано, я не могу увидеть название своей страницы или описание страницы из исходных кодов (но я вижу это из поиска Google и на вкладке Google Chrome). В настоящее время я пытаюсь настроить поисковую оптимизацию. Есть ли здесь какая-то проблема? Я имею в виду, что все учебники, которые я видел, могут видеть заголовок своей страницы из раздела, а также могут видеть мета.

Что я сделал не так или нужно что-то еще сделать, чтобы сайт был виден в google с поиском по некоторым ключевым словам?

Я думаю, что любая функция Angular SEO требует рендеринга на стороне сервера (с Angular Universal)

Aleksey Solovey 25.12.2020 16:45

@AlekseySolovey Я запустил команду «npm i @ng-toolkit/universal», чтобы иметь рендеринг на стороне сервера, но нужно ли мне что-то большее, чем просто запуск этой команды?

Michael Jordan 25.12.2020 17:12

Попробуйте провести хотя бы небольшое исследование. angular.io/guide/universal

R. Richards 25.12.2020 17:31
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
3
407
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Angular по умолчанию является клиентским приложением. Когда вы обслуживаете приложение и просматриваете исходный код HTML, вы, по сути, получаете исходный код index.html, который находится в корне src.

Для SEO вам нужно отобразить страницу на сервере. Таким образом, когда браузер получает HTML, он предварительно отображается с определенными элементами данных, включая теги/контент, связанные с SEO.

Это официальное руководство о том, как добавить рендеринг на стороне сервера (Angular Universal) в ваше приложение: https://angular.io/guide/universal

Ключевая часть заключается в том, что для рендеринга на стороне сервера вам необходимо запустить приложение с помощью специальной команды (например, npm run dev:ssr по умолчанию). Это запустит узел, который будет обрабатывать запросы на стороне сервера.

Другие вопросы по теме