Angular2 SEO - Как сделать сканирование angular 2

Я создаю приложение Angular 2, используя Angular -Meteor framework.

Я бы хотел быстро и последовательно индексировать Google и другими поисковыми системами и разрешить Facebook и другим скреперам создавать предварительные просмотры моего JS-сгенерированного контента.

Обычно SPA используют PhantomJS для отображения страницы на стороне сервера и отправки статического HTML клиенту.

Конечно, я могу порождать PhantomJS самостоятельно, когда я перехватываю _escaped_fragment_ или когда вижу пользовательский агент google или скребок, но я всегда испытывал утечки памяти и сироты Phantom при появлении PhantomJS непосредственно на сайтах с большим трафиком (I использовали NodeJS и этот модуль).

Для Angular 1 приложений я использовал это с Angular модулями, такими как Angular-SEO, но, похоже, сложно преобразовать такой модуль в Angular 2.

Я пока не нашел подходящего модуля Angular 2. Должен ли я сам строить его или есть ли еще хороший способ достичь этого на сегодняшний день?

Ответ 1

Самое замечательное в Angular2 заключается в том, что при запуске все содержимое внутри вашего корневого элемента приложения исчезает. Это означает, что вы можете поместить туда все, что захотите, с сервера, который вы хотите получить от сканеров.

Вы можете сгенерировать этот контент, используя версию контента, содержащую сервер, в вашем приложении или пользовательскую логику.

Здесь вы можете найти дополнительную информацию: https://angularu.com/VideoSession/2015sf/angular-2-server-rendering и здесь: https://github.com/angular/universal

Ответ 2

Я только что создал ng2-meta, модуль Angular2, который может изменять метатеги на основе текущего маршрута.


const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent,
    data: {
      meta: {
        title: 'Home page',
        description: 'Description of the home page'
      }
    }
  },
  {
    path: 'dashboard',
    component: DashboardComponent,
    data: {
      meta: {
        title: 'Dashboard',
        description: 'Description of the dashboard page',
        'og:image': 'http://example.com/dashboard-image.png'
      }
    }
  }
];

Вы также можете обновлять метатеги от компонентов, сервисов и т.д.


class ProductComponent {
  ...
  constructor(private metaService: MetaService) {}

  ngOnInit() {
    this.product = //HTTP GET for product in catalogue
    metaService.setTitle('Product page for '+this.product.name);
    metaService.setTag('og:image',this.product.imageURL);
  }
}

Хотя это относится к Javascript-совместимым сканерам (например, Google), вы можете установить резервные метатеги для не-Javascript-сканеров, таких как Facebook и Twitter.

<head>
    <meta name="title" content="Website Name">
    <meta name="og:title" content="Website Name">
    <meta name="og:image" content="http://example.com/fallback-image.png">
    ...
</head>

Выполняется поддержка рендеринга на стороне сервера.

Ответ 3

Обработка серверов не требуется для достойного рейтинга google...

У меня был форум с около 33 000 записей в файлах Sitemap для Google. Этот веб-сайт был написан с использованием веб-форм asp.net и имел приличный поток входящих запросов от Google. На этом веб-сайте была очень плохая мобильная читаемость (что было оскорблено Google, на самом деле это упоминалось в моей поисковой консоли Google)

Я переписал все с помощью angular (развернутая версия - угловая5). Я использую службы Title и Meta для установки моего названия и метатегов. Все маршруты содержат ключевые слова, извлеченные из фактического содержимого. Я также убедился, что каждый элемент с атрибутом [routeLink] был тегом A, на котором я также указал элемент href (это то, что искатель искал...) И, конечно же, я уделял большое внимание мобильной читаемости.

Результат: на самом деле я получаю больше входящего трафика, чем раньше, и в консоли поиска я отчетливо вижу, что мои индексированные страницы выросли: из 30k + страниц только 10K были включены в индекс. Теперь у меня почти 25k страниц в индексе.

Я не говорю, что рендеринг серверов не имеет значения. Использование универсальных или других методов приведет к увеличению времени загрузки, что, вероятно, приведет к более высокой оценке. Но Google определенно способен правильно индексировать angular SPA.

edit: некоторые доказательства: если вы google "3ds max threadripper", вы увидите, что он фактически превосходит один из самых больших аппаратных сайтов в Интернете.