Angular2 SEO-jak zrobić aplikację angular 2 crawlable

Buduję aplikację Angular 2 używając frameworka Angular-Meteor .

Chciałbym osiągnąć szybkie i konsekwentne indeksowanie przez google i inne wyszukiwarki, a także umożliwić Facebook sharer i innym scraperom generowanie podglądów moich treści generowanych w JS.

Zazwyczaj SPAs używają PhantomJS do renderowania strony po stronie serwera i wysyłania statycznego HTML do klienta.

Oczywiście, że sam mogę się urodzić PhantomJS ' em kiedy przechwycę an _escaped_fragment_ lub gdy widzę Google lub scraper user agent, ale zawsze doświadczyłem wycieków pamięci i osieroconych instancji Phantom, gdy spawanie PhantomJS bezpośrednio na stronach internetowych o dużym ruchu (użyłem NodeJS i Ten moduł).

W przypadku aplikacji Angular 1 rozwiązywałem to za pomocą modułów angular, takich jak Angular-SEO, ale wydaje się, że trudno przekonwertować taki moduł na angular 2.

Nie znalazłem jeszcze odpowiedniego modułu Angular 2 . Czy Powinienem zbuduj go sam, czy jest jakiś inny dobry sposób, aby to osiągnąć od dziś ?

Author: Hongbo Miao, 2015-11-25
Source

3 answers

Wspaniałą rzeczą w Angular2 jest to, że po uruchomieniu cała zawartość wewnątrz głównego elementu aplikacji znika. Oznacza to, że możesz umieścić tam, co chcesz, z serwera, który chcesz odebrać przez gąsienice.

Możesz wygenerować tę zawartość za pomocą renderowanej na serwerze wersji zawartości w aplikacji lub mieć niestandardową logikę.

Więcej informacji znajdziesz tutaj: https://angularu.com/VideoSession/2015sf/angular-2-server-rendering i tutaj: https://github.com/angular/universal

 26
Author: jornare,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-11-25 14:04:25

Właśnie stworzyłem ng2-meta , Moduł Angular2, który może zmieniać meta tagi na podstawie bieżącej trasy.


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'
      }
    }
  }
];

Możesz również aktualizować meta tagi z komponentów, usług itp.


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);
  }
}

Podczas gdy obsługuje to gąsienice obsługujące Javascript (takie jak Google), możesz ustawić awaryjne meta tagi dla gąsienic innych niż Javascript, takich jak Facebook i 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>

Trwa obsługa renderowania po stronie serwera.

 8
Author: WeNeigh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-10-19 15:21:19

Renderowanie serwerów nie jest wymogiem porządnego rankingu google ...

Miałem forum z około 33.000 wpisów w plikach Google sitemap. Ta strona została napisana przy użyciu asp.net webforms, i miał przyzwoity strumień przychodzących żądań od google. Ta strona miała bardzo złą czytelność urządzeń mobilnych (coś, co jest karane przez google, faktycznie wspomniano o tym w moim Google "search console")

Przepisałem wszystko z angular (wersja jest angular5). Jestem korzystanie z usług Title i Meta, aby ustawić Moje tagi title i meta. Wszystkie trasy zawierają słowa kluczowe wyodrębnione z rzeczywistej zawartości. Upewniłem się również, że każdy element z atrybutem [routeLink] jest znacznikiem A, na którym również podałem element href (tego szuka crawler ...) I oczywiście zwróciłem dużą uwagę na czytelność urządzeń mobilnych.

Wynik: faktycznie dostaję więcej ruchu przychodzącego niż wcześniej, a w konsoli wyszukiwania wyraźnie widzę, że moje indeksowane strony poszły w górę: 30K + stron, tylko około 10K zostały uwzględnione w indeksie. Teraz mam prawie 25 tysięcy stron w indeksie.

Nie mówię, że renderowanie po stronie serwera jest nieistotne. Korzystanie z uniwersalnych lub innych metod spowoduje szybszy czas pobierania, co prawdopodobnie doprowadzi do wyższego wyniku. Ale google jest zdecydowanie w stanie prawidłowo indeksować kątowe SPA.

Edit: jakiś dowód: jeśli wygooglujesz "3ds max threadripper", zobaczysz, że faktycznie przewyższa jedną z największych witryn sprzętowych na internet.

 0
Author: Davy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-01-03 14:29:52