wake-up-neo.com

Angular2 SEO - Wie man eine angular 2 App crawlen kann

Ich erstelle eine Angular 2 App mit dem Angular-Meteor Framework .

Ich möchte eine schnelle und konsistente Indizierung durch Google und andere Suchmaschinen erreichen und Facebook Sharer und andere Scraper erlauben , um eine Vorschau meines JS-generierten Inhalts zu erstellen.

Normalerweise verwenden SPAs das PhantomJS, um die Seite serverseitig zu rendern und den statischen HTML-Code an den Client zu senden.

Natürlich kann ich PhantomJS selbst erzeugen, wenn ich ein _escaped_fragment_ abfange oder wenn ich den google- oder scraper-User-Agent sehe, aber ich habe immer Speicherlecks und Orphan-Phantom-Instanzen festgestellt, als ich PhantomJS direkt auf Websites mit großem Datenverkehr erzeugt habe (ich habe NodeJS und - dieses Modul ).

Für Angular 1 Apps habe ich dies mit angular Modulen wie Angular-SEO gelöst, aber es scheint schwierig zu sein, solche zu konvertieren Modul zu angular 2.

Ich habe noch kein passendes Angular 2 Modul dafür gefunden. Sollte ich es selbst bauen, oder gibt es einen anderen guten Weg, um dies ab heute zu erreichen?

28
Rayjax

Das Tolle an Angular2 ist, dass beim Starten alle Inhalte in Ihrem Root-App-Element verschwinden. Dies bedeutet, dass Sie von dem Server, den Sie von Crawlern abholen möchten, alles dort ablegen können, was Sie möchten.

Sie können diesen Inhalt mithilfe einer vom Server gerenderten Version des Inhalts in Ihrer App oder mithilfe einer benutzerdefinierten Logik generieren.

Weitere Informationen finden Sie hier: https://angularu.com/VideoSession/2015sf/angular-2-server-rendering und hier: https://github.com/angular/universal

26
jornare

Ich habe gerade ng2-meta erstellt, ein Angular2-Modul, das Meta-Tags basierend auf der aktuellen Route ändern kann.


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

Sie können auch Meta-Tags von Komponenten, Diensten usw. aktualisieren.


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

Während dies für JavaScript-fähige Crawler (wie Google) geeignet ist, können Sie Fallback-Metatags für Crawler ohne Javascript wie Facebook und Twitter festlegen.

<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>

Unterstützung für serverseitiges Rendern ist in Bearbeitung.

8
WeNeigh

Server-seitiges Rendern ist keine Voraussetzung für ein anständiges Google-Ranking ...

Ich hatte ein Forum mit ungefähr 33.000 Einträgen in seinen Google-Sitemap-Dateien. Diese Website wurde unter Verwendung von asp.net-Webformularen erstellt und hatte einen anständigen Strom eingehender Anfragen von Google. Diese Website hatte eine sehr schlechte Lesbarkeit für Handys (etwas, das von Google bestraft wird, es hat dies tatsächlich in meiner Google "Suchkonsole" erwähnt)

Ich habe alles mit angular (implementierte Version ist angle5) umgeschrieben. Ich benutze die Dienste Title und Meta, um meine Title- und Meta-Tags festzulegen. Alle Routen enthalten Schlüsselwörter, die aus dem tatsächlichen Inhalt extrahiert wurden. Ich habe sie auch erstellt sicher, dass jedes Element mit einem [routeLink] -Attribut ein A-Tag war, auf dem ich auch das href-Element angegeben habe (das ist, wonach ein Crawler sucht ...) Und natürlich habe ich der mobilen Lesbarkeit viel Aufmerksamkeit geschenkt.

Ergebnis: Ich erhalte tatsächlich mehr eingehenden Datenverkehr als zuvor, und in der Suchkonsole sehe ich deutlich, dass meine indizierten Seiten aufgestiegen sind: Von den über 30.000 Seiten wurden nur etwa 10.000 in den Index aufgenommen. Jetzt habe ich fast 25k Seiten im Index.

Ich sage nicht, dass serverseitiges Rendern irrelevant ist. Die Verwendung universeller oder anderer Methoden führt zu schnelleren Downloadzeiten, was wahrscheinlich zu einer höheren Punktzahl führt. Aber Google ist definitiv in der Lage, ein angular SPA zu indizieren.

bearbeiten: Einige Beweise: Wenn Sie "3ds max threadripper" googeln, werden Sie feststellen, dass es tatsächlich eine der größten Hardware-Websites im Internet übertrifft.

0
Davy