0

У гугла есть проблема с индексацией приложений на angular и вообще SPA. У angular есть такой модель как angular universal. Как пишут в доках, проблема индексации решается с этим модулем и индексация вообще происходит на скомпилированном на стороне сервера приложением. Дак вот вопрос.. правда ли это и действительно ли совсем не будет с этим модулем проблем? Например, у меня есть какая-то информация, хранится она в json файле и в приложение добавляется только по нажатию на кнопку какую-то. Найдет ли гугл эту информацию при просмотре моей страницы своим роботом при использовании мной вышеупомянутого модуля?

2
  • нет, не найдет, сервер рендерит страницу один раз, а все то, что добавляется по нажатию кнопки - это динамика
    – arturovt
    27 окт 2018 в 21:11
  • Есть ли какой-то способ решить эту проблему? На сайте, к примеру, будет несколько языковых версий, каждая, понятное дело, загружается по нажатию на кнопку соотв. Как мне рассказать гуглу информацию на каждом языке? В таком случае angular бесполезен со всем его сервисом переводов?
    – AnLip
    27 окт 2018 в 21:33

1 ответ 1

1

Для того, чтобы интегрировать Universal в существующий проект - нужно понять для чего он нужен и как он работает. Universal в действительности нужен в случаях, когда в требованиях проекта есть индексирование сайта поисковыми роботами и тд. Я использую Universal на работе в проектах, где клиент хочет что-то публиковать на Facebook или Twitter, от мета тегов, которые вставляются динамически в рантайме нет толку для парсеров. Universal - один из самых сложных инструментов в семействе пакетов @angular/*.

Что он делает? Под капотом @angular/platform-server всего навсего использует уже готовые средства из пакета @angular/core:

import { renderModuleFactory } from '@angular/platform-server';

renderModuleFactory(AppServerModuleNgFactory, {
    url: '/',
    document: readFileSync('./index.html').toString()
}).then((html) => console.log(html));

Единственная функция, которая в основном используется для работы с Universal, первым аргументом принимает скомпилированную фабрику корневого модуля, вторым аргументом - опции, например для какого роута рендерить страницу. В конечном итоге используя генератор событий isStable (свойство класса ApplicationRef), когда Angular построил DOM для текущего роута - Universal использует сервис Document, который можно заинжектить через токен @Inject(DOCUMENT), для конвертации DOM в строку через Document.prototype.serialize.

У него есть свои подводные камни, на которые все натыкаются выходя в плавание:

<h1 *ngIf="true">Меня увидят?</h1> <-- будет в дереве

<h1 [hidden]="true">Меня увидят?</h1> <-- будет в дереве

<h1 *ngIf="shouldShow">Меня увидят?</h1> <-- не будет в дереве, если `shouldShow = false`

<button (click)="shouldShow = true">Показать</button>

По поводу вашего вопроса с информацией и нажатием кнопки, представим любой файл с json:

// information.json

{
    "information": {
        "shouldUseGraphQL": true,
        "version": "1.0.0"
    }
}

Компонент:

import { information } from './information.json';

class Component {
    public information: Information | null = null;

    public showInformation(): void {
        this.information = information;
    }
}

Шаблон:

<h1 *ngIf="information">{{ information | json }}</h1>
<button (click)="showInformation()">Показать информацию</button>

Информация пользователю показывается после нажатия кнопки, соответственно на этапе изначального рендеринга information у нас null, Universal натыкается на такую конструкцию и 'вырезает' тег h1. Окей, как быть? Мы можем сделать так, чтобы инфомарция была в дереве, но показывалась только по условию:

import { information } from './information.json';

class Component {
    public information: Information = information;

    public shouldHideInformation = true;

    public showInformation(): void {
        this.shouldHideInformation = false;
    }
}

Шаблон:

<h1 [hidden]="shouldHideInformation">{{ information | json }}</h1>
<button (click)="showInformation()">Показать информацию</button>

В данном случае если нажать Ctrl + U в браузере и посмотреть на DOM, то этот h1 там будет, только не будет виден пользователю в браузере из-за атрибута hidden.

Если вы работаете с мультиязычностью, то динамика тут никак не поможет. Можно использовать связку @ngx-translate + TransferState. Например у пользователя на странице будет какой-то select с возможностью выбора языка, он выбирает язык, меняется язык в приложении + в куках устанавливается язык, который он выбрал, в следующий раз при перезагрузке страницы в хедеры accept-language можно устанавливать его выбранный язык и Universal будет возвращать вам html с нужным переводом. Но если нужно, чтобы разные версии индексировались поисковиками, то тут только делать разные версии сайтов, в смысле русский язык у вас будет по роуту mysite.com/ru, а английский mysite.com/en, потому что поисковик не сможет тыкать кнопки и выбирать нужный ему язык :)

3
  • Большое спасибо за объяснения. Но вот как раз самая главная проблема кроется в том, что вы написали в последних предложениях. То есть, по сути, при использовании сервиса переводчика ngx от angular на индексацию google рассчитывать не придется?
    – AnLip
    27 окт 2018 в 22:25
  • можно рассчитывать на индексацию если сделать разные версии сайтов, но увы если приложение просто одностраничное (без каких-либо роутов), то гугл будет индексировать страницу с языком, который загружается изначально, но в примере с /ru и /en - так сделать не очень сложно, по сути у вас будет path: ':lang', component: Component, children: [{ ... }], при иницилазации класса Component - инжектить ActivatedRoute и брать параметры из урла (this.route.snapshot.params.lang => ru | en)
    – arturovt
    27 окт 2018 в 22:29
  • Вот оно! Спасибо за объяснения еще раз, и особенно за последнюю подсказку! Как я сам не додумался! Спасибо!!
    – AnLip
    27 окт 2018 в 22:32

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.