wake-up-neo.com

Google Crawler in Search Console kann keine Routen in React using Github Page finden

Mein Problem ist Crawl in der Google Search Console kann keine Unterrouten in React finden.

Die URL lautet https://huynhsamha.github.io/crypto und der Crawler kann fetch and render homepage (route /) und statische Dateien wie /robots.txt, /favicon.ico, aber die untergeordneten Routen nicht finden gerendert von React (SPA mit Redux), z. B. /algorithm/sha256. Beispiel: https://huynhsamha.github.io/crypto/algorithm/sha256 kann vom Crawler nicht gefunden werden, es kann jedoch darauf zugegriffen werden.

Dies ist mein Screenshot in der Google Search Console, den ich ausprobiert habe.

 enter image description here

Wer kann erklären, warum und wie ich mein Problem beheben kann? Ich verwende react-router-dom mit react-redux Mein Repository auf github hier

Edit 1

Ich habe auch die Antwort https://stackoverflow.com/a/53966338/8828489 in dieser Frage ausprobiert, funktioniert aber nicht. Ich habe ein Skript in index.html ( https://github.com/huynhsamha/crypto/blob/gh-pages/index.html ) hinzugefügt. Die Suchkonsole kann jedoch nicht gefunden werden, daher auch nicht Fehler auf dem Bildschirm darstellen.

Edit 2

Ich habe auch die Antworten https://stackoverflow.com/a/54040745/8828489 und https://stackoverflow.com/a/54048119/8828489 in dieser Frage ausprobiert, funktioniert aber nicht. Ich habe 404.html -Datei erstellt und Skripts hinzugefügt, wie die Antwort zeigt, aber es hat auch nicht funktioniert.

Edit 3

Ich habe auch die Antwort https://stackoverflow.com/a/54044148/8828489 in dieser Frage ausprobiert, indem Sie einen einfachen sitemap.xml erstellt haben. Googlebot kann diese Datei finden und alle in der Sitemap definierten URLs finden. Die genannten URLs können nicht abgerufen und gerendert werden.

10
huynhsamha

Ich habe in Ihrem Quellcode herumgestochert und sehe nichts Besorgniserregendes. Ich habe jedoch ein paar Beiträge zu ähnlichen Themen gefunden (1)(2) . Der zweite scheint besonders hilfreich zu sein, also werde ich es hier wiederholen. Ruf @Zerotorescue auf Reddit zu.

Öffnen Sie die Google Search Console und gehen Sie zu Crawl -> Als Google abrufen, und rufen Sie sie ab.

Fügen Sie dies Ihrer Site hinzu, entweder als Teil eines Tags in Ihrer HTML-Datei oder als Teil des Bundles: 

https://Gist.github.com/mstijak/715fa2dd3f495a98386c3ebbadbabb8c

Ich empfehle das erstere, da es einfacher ist, es zu ändern, wenn Sie es lesbarer machen müssen (Sie müssen Ihre App nicht neu kompilieren).

Schieben Sie dies auf Ihre Website und führen Sie einen weiteren Abruf und eine Anzeige aus. Der Fehler, der verhindert, dass Google Ihre App ausführt, wird jetzt angezeigt. Die Auflösung der Suchkonsole ist ziemlich niedrig. Daher müssen Sie möglicherweise die Schriftgröße des Fehlers erhöhen und erneut abrufen. Machen Sie sich keine Sorgen, Google macht wiederholte Anrufe nicht aus.

Sie werden wahrscheinlich feststellen, dass der Crawler von Google Ihren Code nicht verarbeiten kann, weil Sie einige ES6-Funktionen verwenden, die er nicht unterstützt. Sie können dies durch Polyfilling beheben. Ich habe ein paar Dinge ausprobiert, wie zum Beispiel https://polyfill.io/ , bei dem es sich herausstellte, dass Googlebot nicht wirklich unterstützt wird, und obwohl es manchmal funktioniert, ist es ziemlich unzuverlässig. Stattdessen empfehle ich die Verwendung von Babel-Polyfill. Dadurch wird Ihre Paketgröße für jeden etwas erhöht, aber meiner Erfahrung nach bietet es die breiteste Browserunterstützung mit minimalen Kopfschmerzen. Einfach einschalten und fertig.

Wenn Sie die create -react-app verwenden, können Sie diese Datei mit der Datei polyfills.js kopieren, die Sie kopieren können: 

https://github.com/WoWAnalyzer/WoWAnalyzer/blob/2c67a970f8bd9026fa816d31201c42eb860fe2a3/config/polyfills.js#L1

Beachten Sie, dass es viele Kommentare gibt, die alle Probleme erläutern, die der polyfill-Dienst einführt, mit denen Sie sich bei Verwendung von babel-polyfill nicht befassen müssen.

4
Morgan

Als ich https://huynhsamha.github.io/crypto/algorithm/sha256 öffnete, habe ich tatsächlich eine 404 als response erhalten. Ich denke, Ihr Workaround für das Hosting von SPA auf GitHub mit 404.html ist hier das Problem. Während wir Menschen sehen, dass Ihre App in unserem Browser richtig bereitgestellt wird, kümmert sich googlebot nicht darum, und schauen Sie sich nur den Antwortcode an und stellen Sie fest, dass er einen 404 erhalten hat. Sie benötigen eine andere Problemumgehung, bei der nicht 404.html als Einstiegspunkt für Ihre App verwendet wird.

Folgen Sie diesem Workaround von rafrex . Er leitet den Browser mithilfe von index.html unter Verwendung der 404.html-Anweisung an 301 weiter und behauptet, dass googlebot das als 404 anstelle von <!-- ------Single Page Apps GitHub Pages Workaround------ --> als <!-- 404.html --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Cryptography</title> <!-- ------Single Page Apps GitHub Pages Workaround------ --> <script type="text/javascript"> // Single Page Apps for GitHub Pages // https://github.com/rafrex/spa-github-pages // Copyright (c) 2016 Rafael Pedicini, licensed under the MIT License // ---------------------------------------------------------------------- // This script takes the current url and converts the path and query // string into just a query string, and then redirects the browser // to the new url with only a query string and hash fragment, // e.g. http://www.foo.tld/one/two?a=b&c=d#qwe, becomes // http://www.foo.tld/?p=/one/two&q=a=b~and~c=d#qwe // Note: this 404.html file must be at least 512 bytes for it to work // with Internet Explorer (it is currently > 512 bytes) // If you're creating a Project Pages site and NOT using a custom domain, // then set segmentCount to 1 (enterprise users may need to set it to > 1). // This way the code will only replace the route part of the path, and not // the real directory in which the app resides, for example: // https://username.github.io/repo-name/one/two?a=b&c=d#qwe becomes // https://username.github.io/repo-name/?p=/one/two&q=a=b~and~c=d#qwe // Otherwise, leave segmentCount as 0. var segmentCount = 1; var l = window.location; l.replace( l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') + l.pathname.split('/').slice(0, 1 + segmentCount).join('/') + '/?p=/' + l.pathname.slice(1).split('/').slice(segmentCount).join('/').replace(/&/g, '~and~') + (l.search ? '&q=' + l.search.slice(1).replace(/&/g, '~and~') : '') + l.hash ); </script> </head> <body> </body> </html> registriert Achten Sie auf Ihre Site auf das Skript unter dem <!-- index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="theme-color" content="#000000"> <meta name="description" content="Cryptography Algorithms: Secure Hash Algorithm (sha256, sha512, ...), Message Digest Algorithm (md5, ripemd160), HMAC-SHA, HMAC-MD, pbkdf2, Advanced Encryption Standard (AES), Triple Data Encryption Standard, (TripleDES, DES), RC4, Rabbit, ..."> <meta name="keywords" content="crypto, algorithms, secure hash, sha, sha512, sha256, message digest, md5, hmac-sha, aes, des, tripledes, pbkdf2, rc4, rabbit, encryption, descryption"> <meta name="author" content="huynhsamha"> <!-- Open Graph --> <meta property="fb:app_id" content="440168923127908"> <meta property="og:url" content="https://huynhsamha.github.io/crypto"> <meta property="og:title" content="Cryptography Algorithms"> <meta property="og:description" content="Cryptography Algorithms: Secure Hash Algorithm (sha256, sha512, ...), Message Digest Algorithm (md5, ripemd160), HMAC-SHA, HMAC-MD, pbkdf2, Advanced Encryption Standard (AES), Triple Data Encryption Standard, (TripleDES, DES), RC4, Rabbit, ..."> <meta property="og:type" content="website"> <meta property="og:image" content="%PUBLIC_URL%/img/main.jpeg"> <meta property="og:site_name" content="Cryptography"> <meta property="og:locale" content="vi_VN"> <!-- Twitter Card --> <meta name="Twitter:card" content="summary"> <meta name="Twitter:site" content="@huynhsamha"> <meta name="Twitter:creator" content="@huynhsamha"> <meta name="Twitter:url" content="https://huynhsamha.github.io/crypto"> <meta name="Twitter:title" content="Cryptography Algorithms"> <meta name="Twitter:description" content="Cryptography Algorithms: Secure Hash Algorithm (sha256, sha512, ...), Message Digest Algorithm (md5, ripemd160), HMAC-SHA, HMAC-MD, pbkdf2, Advanced Encryption Standard (AES), Triple Data Encryption Standard, (TripleDES, DES), RC4, Rabbit, ..."> <meta name="Twitter:image:src" content="%PUBLIC_URL%/img/main.jpeg"> <!-- manifest.json provides metadata used when your web app is added to the homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/ --> <link rel="manifest" href="%PUBLIC_URL%/manifest.json"> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> <link rel="author" href="//github.com/huynhsamha"> <link rel="canonical" href="//huynhsamha.github.io/crypto"> <!-- Notice the use of %PUBLIC_URL% in the tags above. It will be replaced with the URL of the `public` folder during the build. Only files inside the `public` folder can be referenced from the HTML. Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> <link href="//fonts.googleapis.com/css?family=Open+Sans:400,600,700&amp;subset=vietnamese" rel="stylesheet"> <link rel="stylesheet" href="%PUBLIC_URL%/css/bootstrap.min.css"> <link rel="stylesheet" href="%PUBLIC_URL%/lib/font-awesome/css/font-awesome.min.css"> <!-- ------Single Page Apps GitHub Pages Workaround------ --> <script type="text/javascript"> // Single Page Apps for GitHub Pages // https://github.com/rafrex/spa-github-pages // Copyright (c) 2016 Rafael Pedicini, licensed under the MIT License // ---------------------------------------------------------------------- // This script checks to see if a redirect is present in the query string // and converts it back into the correct url and adds it to the // browser's history using window.history.replaceState(...), // which won't cause the browser to attempt to load the new url. // When the single page app is loaded further down in this file, // the correct url will be waiting in the browser's history for // the single page app to route accordingly. (function(l) { if (l.search) { var q = {}; l.search.slice(1).split('&').forEach(function(v) { var a = v.split('='); q[a[0]] = a.slice(1).join('=').replace(/~and~/g, '&'); }); if (q.p !== undefined) { window.history.replaceState(null, null, l.pathname.slice(0, -1) + (q.p || '') + (q.q ? ('?' + q.q) : '') + l.hash ); } } }(window.location)) </script> <title>Cryptography</title> </head> <body> <noscript> You need to enable JavaScript to run this app. </noscript> <div id="root"></div> <!-- This HTML file is a template. If you open it directly in the browser, you will see an empty page. You can add webfonts, meta tags, or analytics to this file. The build step will place the bundled scripts into the <body> tag. To begin the development, run `npm start` or `yarn start`. To create a production bundle, use `npm run build` or `yarn build`. --> <script src="%PUBLIC_URL%/js/jquery-3.3.1.slim.min.js" type="text/javascript"></script> <script src="%PUBLIC_URL%/js/popper.min.js" type="text/javascript"></script> <script src="%PUBLIC_URL%/js/bootstrap.min.js" type="text/javascript"></script> <!-- Google Adsense --> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> </body> </html>

__Code-Auszug__

Weitere Informationen und Diskussionen zum GitHub-Support für die Single-Page-App hier .

3
chrsep

Das Problem ist, dass Sie eine 404-Seite verwenden, um eingehenden Verkehr auf anderen Routen als / zu erfassen. Dies bedeutet, dass diese Routen einen 404-Statuscode bereitstellen (Sie können dies sehen, wenn Sie Network in dev-Tools öffnen und versuchen, eine dieser tiefen URLs aufzurufen). Google sieht im Antwortheader einen 404-Status und gibt es sofort auf. Sie haben wahrscheinlich bemerkt, dass die Meldung "Nicht gefunden" in den Webmaster-Tools superschnell auftauchte.

Auf einem normalen Server würden Sie diese Routen erfassen und einen erfolgreichen Statuscode wie 200 oder 301 zurückgeben, und Google würde mit dem Crawlen fortfahren. Da Sie jedoch GitHub-Seiten verwenden, müssen Sie sich daran hacken.

Sie sollten dazu in der Lage sein, indem Sie eine sofortige Umleitung von dieser 404-Vorlage zu Ihrer Indexvorlage einrichten. Browser interpretieren sofortige Weiterleitungen als 301s. Ersetzen Sie dazu den Inhalt Ihres 404.html durch Folgendes:

<html>
<head>
  <script>
    sessionStorage.redirect = location.href; // we'll use this later
  </script>
  <meta http-equiv="refresh" content="0;URL='/crypto'">
</head>
<body></body>
</html>

Stellen Sie einfach sicher, dass die Dateigröße von 404.html größer ist als 512b oder IE, um sie zu löschen (verdammt M $ ...).

Als letztes müssen Sie sicherstellen, dass Ihr index.html die ursprüngliche Route erfasst. Verwenden Sie dazu ein solches Skript im Kopf Ihres index.html:

<script>
  (function(){
    var redirect = sessionStorage.redirect; // remember me?
    delete sessionStorage.redirect;
    if (redirect && redirect != location.href) {
      history.replaceState(null, null, redirect);
    }
  })();
</script>

Als Referenz habe ich diesen cleveren Hack gestohlen von:

https://www.smashingmagazine.com/2016/08/sghpa-single-page-app-hack-github-pages/

2
Jonny Asmar

Da es sich bei der App um Onepage-Web handelt, benötigen Sie eine sitemap -Datei. Sie finden hier auch die Erstellung einer one here sowie eine 404-Seite. Jede Route fügt eine Eigenschaft hinzu, die einen Anker aufweist. .würde gerne

<a title="This my Route One" href="https://myreactapp/routeOne" alt="Route One"/>
2
Soleil

Ich sehe auch nichts Besorgniserregendes in Ihrem Code (obwohl ich nicht denke, dass Sie die baseUrl in Ihrem <Route /> brauchen - obwohl ich mich irren könnte, und glaube nicht, dass dies das Problem ist, aber es kann sich lohnen wenn unnötig beseitigen). 

Nur eine Vermutung, aber als ich auf die Registerkarte "Netzwerke" schaute, bemerkte ich den Service-Mitarbeiter. Ich bin zwar nicht besonders versiert, wenn es um Servicemitarbeiter geht (noch!), Jedoch hat Googlen ein wenig gezeigt, dass Google-Crawler Servicemitarbeiter noch nicht unterstützen, wie behauptet in diesem Artikel , diesem Artikel , und von google .... Ich habe auch festgestellt, dass ich, wenn ich einen Lighthouse-Test mit einem der Links durch In-App-Navigation durchführe (beispielsweise klicke ich aus der Navigation auf der Startseite auf /algorithm) und dann einen Leuchtturm-Test durchführen) Ich erhalte folgende Fehler:

Bei diesem Lighthouse-Lauf gab es Probleme. Chrome-Erweiterungen die Ladeleistung dieser Seite negativ beeinflusst. Versuchen Sie, das .__ zu überprüfen. Seite im Inkognito-Modus oder aus einem Chrome-Profil ohne Erweiterungen.

und interessanter:

Lighthouse konnte die angeforderte Seite nicht zuverlässig laden. Machen Stellen Sie sicher, dass Sie die korrekte URL testen und dass der Server korrekt ist Antworten auf alle Anfragen. Statuscode: 404.

... obwohl es deutlich im Browser dargestellt wird. Sieht verdächtig aus. Also, wenn ein Teil von navigation ist (wahrscheinlich auf der registerServiceWorker.js-Datei in Ihrem Repo-Lol basiert), kann dies die Ursache dafür sein, dass Ihre Links nicht gefunden/verfolgt werden. 

0
HolyMoly