{"id":65104,"date":"2022-02-05T01:49:18","date_gmt":"2022-02-05T07:49:18","guid":{"rendered":"https:\/\/blogging-techies.com\/ge\/erweitertes-seo-fur-javascript-sites-snapshot-seiten\/"},"modified":"2022-02-05T01:49:18","modified_gmt":"2022-02-05T07:49:18","slug":"erweitertes-seo-fur-javascript-sites-snapshot-seiten","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/ge\/erweitertes-seo-fur-javascript-sites-snapshot-seiten\/","title":{"rendered":"Erweitertes SEO f\u00fcr JavaScript-Sites: Snapshot-Seiten"},"content":{"rendered":"

<\/center><\/p>\n

Da JavaScript im Web zunehmend in HTML integriert wird, m\u00fcssen SEOs ein Verst\u00e4ndnis daf\u00fcr entwickeln, wie JavaScript-Sites durchsuchbar gemacht werden k\u00f6nnen.<\/p>\n

Wir haben in einem fr\u00fcheren Beitrag einige grundlegende SEO-Ans\u00e4tze f\u00fcr JavaScript behandelt. Ein komplexes Thema verdient jedoch eine eingehende Behandlung. Werfen wir also einen Blick auf die Details hinter dem # Popup! \/ Snapshot-Ansatz f\u00fcr JavaScript-Sites.<\/p>\n

Muss man das \u00fcberhaupt?<\/h2>\n

Suchmaschinen verarbeiten jeden Tag mehr und mehr JavaScript. Das bedeutet jedoch nicht, dass Ihre AngularJS-Site indexiert und gerankt wird. Die Engines analysieren jetzt etwas JavaScript, aber die vollst\u00e4ndige Indexierung aller Zust\u00e4nde von JavaScript-Webanwendungen scheint noch in weiter Ferne zu liegen. Wenn Ihr JavaScript im Browser ausgef\u00fchrt wird und Inhalte aus der Datenbank abruft, werden die Engines dies wahrscheinlich nicht sehen.<\/p>\n

Vorab-Rendering von Snapshot-Seiten und Bot-spezifisches Posting<\/h2>\n

Dies ist vielleicht der beliebteste Ansatz f\u00fcr clientseitige JavaScript-SEO-Probleme. Der grundlegende Ablauf ist wie folgt:<\/p>\n

    \n
  1. Erkennen Sie Suchmaschinen-Bots, indem Sie sich entweder die URL ansehen, wenn Sie #! (\u201eHashbang\u201c) oder einfach den Benutzeragenten der Anfrage verifizieren.<\/li>\n
  2. Wenn der Bot erkannt wird, leiten Sie die Anfrage an die Rendering-Engine Ihrer Wahl um, z. B. PhantomJS. Diese Engine muss warten, bis der gesamte AJAX-Inhalt geladen ist.<\/li>\n
  3. Schnappen Sie sich nach dem Laden die Quelle der gerenderten Seite und senden Sie sie an den Bot.<\/li>\n<\/ol>\n

    Ironischerweise ist dies eine Form des Cloaking: das Senden bestimmter Inhalte an Bots, oft ein No-Go in SEO. Diese Art der Tarnung gilt jedoch als \u201eethisch\u201c, da der Inhalt praktisch derselbe ist wie der, den Benutzer sehen w\u00fcrden. Daher sind die Suchmaschinen damit einverstanden.<\/p>\n

    Google verf\u00fcgt \u00fcber eine vollst\u00e4ndige AJAX-Tracking-Spezifikation, die das A und O abdeckt. Die Grundidee ist, dass man das #! Kennung Ihrer URLs oder enthalten den HTML-Code [meta name=\u201dfragment\u201d content=\u201d!\u201d] -Tag in den Seitenkopf einf\u00fcgen. Dadurch wird Google darauf aufmerksam gemacht, dass die Seite URL-Fragmente verwendet, und veranlasst Google, die Seite zu indizieren.<\/p>\n

    Wie ich in meinem vorherigen Beitrag erw\u00e4hnt habe, ist History.pushState eine weitere Option zum Erstellen indexierbarer AJAX-URLs. PushState hat Probleme, einschlie\u00dflich der Tatsache, dass es IE 9 nicht unterst\u00fctzt, der immer noch ein ziemlich beliebter Browser ist.<\/p>\n

    M\u00f6gliche Probleme beim Vorab-Rendering<\/h2>\n

    Es gibt ein paar Dinge, die Sie beachten sollten, wenn Sie sich f\u00fcr Pre-Rendering entscheiden:<\/p>\n

      \n
    • Bot-Erkennung. Stellen Sie sicher, dass Sie alle Bots bedienen, nicht nur den Googlebot (z. B. Bingbot usw.).<\/li>\n
    • Snapshot-Timing. Bedenken Sie, dass das Rendern Ihrer JavaScript-Elemente durch PhantomJS eine Weile dauern kann. M\u00f6glicherweise m\u00fcssen Sie eine Verz\u00f6gerung erstellen, damit alle Inhalte geladen werden k\u00f6nnen, bevor die Seite zwischengespeichert wird. Andernfalls wird Ihre Snapshot-Seite m\u00f6glicherweise unvollst\u00e4ndig oder teilweise gerendert.<\/li>\n
    • Ladezeit der Seite. Wenn Sie den Snapshot-Seitenprozess zum Zeitpunkt der URL-Anforderung des Bots ausf\u00fchren, wird die Seite m\u00f6glicherweise langsam geladen. Die Seitenladegeschwindigkeit ist ein zunehmend wichtiger Faktor f\u00fcr das SEO-Ranking. Wenn Ihre Seite also f\u00fcr den Bot langsam zu laden scheint, kann dies negativ beeinflusst werden. Aus diesem Grund ist es w\u00fcnschenswert, Seiten im Voraus zwischenzuspeichern. Dies hat den zus\u00e4tzlichen Vorteil, dass Ihre Website f\u00fcr Suchmaschinen schneller erscheint als f\u00fcr Benutzer.<\/li>\n
    • Stapelverarbeitung. Wenn Sie viele Seiten haben, m\u00f6chten Sie den Snapshot-Prozess m\u00f6glicherweise zu einem bestimmten Zeitpunkt au\u00dferhalb der Gesch\u00e4ftszeiten oder auf Ihrem eigenen Server ausf\u00fchren. Der Prozess kann ressourcenintensiv sein.<\/li>\n<\/ul>\n

      \u00dcberpr\u00fcfen von Snapshot-Seiten<\/h2>\n

      Da Sie die Bot-Erkennung verwenden, ist es schwieriger zu \u00fcberpr\u00fcfen, ob Ihr Prozess tats\u00e4chlich funktioniert. Eine M\u00f6glichkeit, Ihre Arbeit zu \u00fcberpr\u00fcfen, ist die Verwendung der Funktion \u201eSuche wie mit Google\u201c in den Google Webmaster-Tools. Geben Sie die URL einer Snapshot-Seite (sie kann sich von der den Benutzern angezeigten Live-URL unterscheiden) in GWT ein und pr\u00fcfen Sie, ob Google sie korrekt extrahieren kann. Dies erfordert eine Live-Seite, planen Sie also entsprechend.<\/p>\n

      Abrufen, da Google derzeit #! aber nicht URL pushState. Wenn Ihre URLs statisch aussehen, ist alles in Ordnung.<\/p>\n

      Vorrepr\u00e4sentationsdienste<\/h2>\n

      Der Aufbau einer vollst\u00e4ndigen Pre-Rendering-F\u00e4higkeit ist m\u00f6glicherweise nicht trivial. Bei einer gr\u00f6\u00dferen Site kann dies die Einrichtung eines Caching-Servers, einer Datenbank f\u00fcr Inhalte, eines Dienstes f\u00fcr das Zwischenspeichern von Anrufen, eines Planers und eines Verwaltungsdienstprogramms umfassen. Gl\u00fccklicherweise haben mehrere Unternehmen L\u00f6sungen entwickelt, um Teile oder den gesamten Pre-Rendering-Ansatz anzugehen. Einige, die ich kenne, sind:<\/p>\n

        \n
      • Prerender.io. Prerender.io f\u00fchrt einen Dienst aus, der mit PhantomJS zusammenarbeitet, um Snapshot-Seiten zu hosten und bereitzustellen. Sie beseitigen die Kopfschmerzen beim Betrieb eines eigenen Pre-Render-Servers. Sie sind preisg\u00fcnstig, basierend auf der Anzahl der gehosteten Seiten und wie oft Schnappsch\u00fcsse gemacht werden.<\/li>\n
      • Brombone.com. Brombone f\u00fchrt einen \u00e4hnlichen Dienst aus, bei dem Snapshot-Seiten basierend auf dem Zeitstempel der URL in der Sitemap generiert oder individuell geplant werden k\u00f6nnen.<\/li>\n
      • Ajax-Snapshots. AjaxSnapshots bietet einen Pre-Render-Service mit einigen netten Konfigurationsoptionen. Im Moment listet ihre Website den Preis (zumindest vorerst) als kostenlos auf, das war es also.<\/li>\n<\/ul>\n

        Bezahlte Suche und Zielseiten<\/h2>\n

        JavaScript-Websites haben Probleme mit bezahlter Suche und SEO. Beispielsweise ermittelt AdWords den Qualit\u00e4tsfaktor unter anderem anhand der Inhalte, die der AdWords-Bot auf der Seite sieht. Ein Ansatz besteht darin, die Snapshot-Seite an Google AdsBot zu liefern (eine vollst\u00e4ndige Liste der Crawler und User-Agents von Google finden Sie hier).<\/p>\n

        Wenn sich Ihre Produkte oder Produktinhalte in einer Single-Page-App befinden, kann es au\u00dferdem schwierig sein, diesen Zustand \u00fcber die Ziel-URL der bezahlten Suche zu erzwingen. Erstellen #! Oder statisch aussehende URLs sind hier so ziemlich eine Voraussetzung.<\/p>\n

        Da Landing Pages f\u00fcr die bezahlte Suche oft hochgradig personalisiert werden m\u00fcssen, um gut zu konvertieren, kann es auf lange Sicht besser sein, dedizierte Seiten f\u00fcr Ihre PPC-Kampagnen zu erstellen und Ihre Kernerfahrung mit JavaScript den Benutzern und SEO zu \u00fcberlassen.<\/p>\n

        Fazit<\/h2>\n

        JavaScript-lastige Websites sind gekommen, um zu bleiben. W\u00e4hrend es vielleicht nicht trivial ist, eine JavaScript-Site zu erstellen, die in SEO gut abschneidet, ist es noch mehr Arbeit, wenn man versucht, eine bestehende Site zu reparieren, die ohne SEO-Betrachtung erstellt wurde. Bis Frameworks und Tools verbessert werden, um die Integration von SEO-Anforderungen zu erleichtern, m\u00fcssen SEOs eng mit Entwicklern zusammenarbeiten, um sicherzustellen, dass SEO ber\u00fccksichtigt wird. Es ist vielleicht nicht einfach, SEO und JavaScript in Einklang zu bringen, aber es lohnt sich.<\/p>\n

        Vielen Dank an Vladimir Katz, Senior Engineer bei Huge, f\u00fcr seinen Beitrag zu diesem Beitrag.<\/p>\n

        Startseitenbild \u00fcber Flickr.<\/p>\n ","protected":false},"excerpt":{"rendered":"

        Da JavaScript im Web zunehmend in HTML integriert wird, m\u00fcssen SEOs ein Verst\u00e4ndnis daf\u00fcr entwickeln, wie JavaScript-Sites durchsuchbar gemacht werden k\u00f6nnen. Wir haben in einem fr\u00fcheren Beitrag einige grundlegende SEO-Ans\u00e4tze f\u00fcr JavaScript behandelt. Ein komplexes Thema verdient jedoch eine eingehende Behandlung. Werfen wir also einen Blick auf die Details hinter dem # Popup! \/ Snapshot-Ansatz […]<\/p>\n","protected":false},"author":1,"featured_media":65105,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","fifu_image_url":"https:\/\/blogging-techies.com\/wp-content\/uploads\/2022\/01\/SEO-avanzado-para-sitios-de-JavaScript-paginas-de-instantaneas.png","fifu_image_alt":""},"categories":[7],"tags":[],"_links":{"self":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts\/65104"}],"collection":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/comments?post=65104"}],"version-history":[{"count":0,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts\/65104\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/media\/65105"}],"wp:attachment":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/media?parent=65104"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/categories?post=65104"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/tags?post=65104"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}