Google Crawler dans la console de recherche ne peut pas trouver de route dans React à l'aide de la page Github
Mon problème est Crawl dans la console de recherche Google ne trouve pas de sous-itinéraires dans React.
L’URL est https://huynhsamha.github.io/crypto , et le robot peut fetch and render page d’accueil (route /) et des fichiers statiques tels que /robots.txt, /favicon.ico, mais il ne peut pas trouver les sous-itinéraires, qui sont rendu par React, (SPA, en utilisant Redux), tel que /algorithm/sha256. Exemple, https://huynhsamha.github.io/crypto/algorithm/sha256 ne peut pas être trouvé par Crawler, mais il peut être accessible.
Voici ma capture d'écran de la console de recherche Google que j'ai essayée.
Qui peut expliquer pourquoi et comment résoudre mon problème? J'utilise react-router-dom avec react-redux Mon dépôt sur github ici
Modifier 1
J'ai également essayé la réponse https://stackoverflow.com/a/53966338/8828489 dans cette question, mais ne fonctionne pas. J'ai ajouté le script dans index.html ( https://github.com/huynhsamha/crypto/blob/gh-pages/index.html ), mais la console de recherche ne peut toujours pas être trouvée. restituer toute erreur à l'écran.
Edit 2
J'ai également essayé les réponses https://stackoverflow.com/a/54040745/8828489 et https://stackoverflow.com/a/54048119/8828489 dans cette question, mais ne fonctionne pas. J'ai créé le fichier 404.html et ajouté des scripts à la demande, mais cela ne fonctionnait pas non plus.
Edit 3
J'ai également essayé la réponse https://stackoverflow.com/a/54044148/8828489 dans cette question en créant un simple sitemap.xml, Google peut trouver ce fichier et découvrir toutes les URL que j'ai définies dans sitemap. Mais il ne peut pas non plus extraire ni rendre les URL mentionnées.
J'ai fouillé dans votre code source et je ne vois rien d'inquiétant; Cependant, j'ai trouvé quelques articles sur des sujets similaires (1)(2) . La seconde semble particulièrement utile, alors je vais le répéter ici. Criez à @Zerotorescue sur Reddit.
Ouvrez la console de recherche Google, accédez à Explorer -> Récupérer en tant que Google, effectuez une récupération et un rendu.
Ajoutez ceci à votre site, en tant que partie de balise dans votre fichier HTML ou en tant que partie du paquet:
https://Gist.github.com/mstijak/715fa2dd3f495a98386c3ebbadbabb8c
Je recommande le premier car cela facilite les changements si vous devez le rendre plus lisible (pas besoin de recompiler votre application).
Poussez ceci vers votre site, puis effectuez une autre récupération et un affichage. L'erreur empêchant Google d'exécuter votre application va maintenant s'afficher. La résolution de la console de recherche est assez faible, vous devrez peut-être augmenter la taille de la police de l'erreur et récupérer à nouveau. Ne vous inquiétez pas, Google ne craint pas les appels répétés.
Vous constaterez probablement que le robot d'exploration de Google ne peut pas traiter votre code, car vous utilisez une fonctionnalité ES6 non prise en charge. Vous pouvez résoudre ce problème en procédant à un remplissage multiple. J'ai essayé quelques solutions telles que https://polyfill.io/ qui se sont révélées ne pas vraiment supporter Googlebot et bien que cela puisse parfois fonctionner, il est plutôt peu fiable. Au lieu de cela, je recommande d'utiliser babel-polyfill. Cela augmentera un peu la taille de votre paquet pour tout le monde, mais d'après mon expérience, il fournit le support le plus large possible pour les navigateurs avec un mal de tête minimal. Il suffit de l'allumer et vous avez terminé.
Si vous utilisez create-react-app, c'est le fichier polyfills.js que j'utilise et que vous pouvez copier:
Remarquez que de nombreux commentaires expliquent toutes les problématiques introduites par le service polyfill que vous n’aurez pas à traiter si vous utilisez babel-polyfill.
J'ai trouvé que lorsque j'ai ouvert https://huynhsamha.github.io/crypto/algorithm/sha256 , j'ai effectivement reçu un 404 sous forme de réponse . Je pense que votre solution pour héberger SPA sur GitHub en utilisant le 404.html est le problème ici. Alors que nous, les humains, voyons que votre application est correctement servie sur notre navigateur, Googlebot ne s'en soucie pas et il suffit de regarder le code de réponse et de constater qu'il a reçu un 404. Vous aurez besoin d'une solution de contournement différente qui ne nécessite pas d'utiliser le 404.html comme point d'entrée directement dans votre application.
Essayez de suivre cette solution de contournement par rafrex au lieu de cela, il redirige le navigateur vers index.html en utilisant le 404.html tout en conservant la route originale. Il affirme que Googlebot l'enregistre sous la forme 301 au lieu de 404; sur votre site, faites attention au script situé sous le <!-- ------Single Page Apps GitHub Pages Workaround------ -->:
<!-- 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>
<!-- 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&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>
Plus d'infos et discussions sur le support de GitHub pour une application à page unique ici .
Le problème est que vous utilisez une page 404 pour capturer le trafic entrant sur des itinéraires autres que /. Cela signifie que ces routes servent un code d'état 404 (vous pouvez le voir si vous ouvrez Réseau dans les outils de développement et essayez de visiter l'une de ces URL profondes). Google voit le statut 404 dans l'en-tête de la réponse et abandonne immédiatement. Vous avez probablement remarqué que le message "Introuvable" de Webmaster Tools est apparu très rapidement.
Sur un serveur normal, vous captureriez ces itinéraires et renverriez un code de statut réussi tel que 200 ou 301 et Google poursuivrait l'exploration. Cependant, comme vous utilisez des pages GitHub, vous devez vous y frayer un chemin.
Vous devriez pouvoir le faire en configurant une redirection instantanée à partir de ce modèle 404 vers votre modèle d'index. Les navigateurs interprètent les redirections instantanées comme 301s. Pour ce faire, remplacez le contenu de votre 404.html par quelque chose comme ceci:
<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>
Assurez-vous simplement que la taille de fichier de ce 404.html est supérieure à 512b ou que IE le jettera (zut M $ ...).
Enfin, vous devez vous assurer que votre index.html capture la route originale. Pour ce faire, utilisez un script comme celui-ci dans l'en-tête de votre index.html:
<script>
(function(){
var redirect = sessionStorage.redirect; // remember me?
delete sessionStorage.redirect;
if (redirect && redirect != location.href) {
history.replaceState(null, null, redirect);
}
})();
</script>
Pour référence, j'ai volé ce hack intelligent de:
https://www.smashingmagazine.com/2016/08/sghpa-single-page-app-hack-github-pages/
Parce que, react application est onepage web, vous avez besoin d'un fichier sitemap, vous pouvez le trouver comment créer un un ici , aussi une page 404, et chaque itinéraire ajoute une propriété qui a une ancre aime
<a title="This my Route One" href="https://myreactapp/routeOne" alt="Route One"/>