SearchConsoleのGoogleCrawlerは、GithubPageを使用してReact）でルートを見つけることができません
私の問題は、Google Search ConsoleのCrawlがサブを見つけることができないことです- Reactのルート。
URLは https://huynhsamha.github.io/crypto であり、クローラーはfetch and renderホームページ（ルート/）および/robots.txtなどの静的ファイルを使用できます。 /favicon.icoですが、Reactによってレンダリングされるサブルートが見つかりません（[〜＃〜] spa [〜＃〜]、/algorithm/sha256などのRedux）を使用します。例、 https://huynhsamha.github.io/crypto/algorithm/sha256 Crawlerで見つかりませんが、アクセスできます。
これは、私が試したGoogle SearchConsoleのスクリーンショットです。
誰が私の問題を解決する理由と方法を説明できますか？ react-router-domとreact-reduxを使用しています。githubのリポジトリ ここ
編集1
私もこの質問の答えを試しました https://stackoverflow.com/a/53966338/8828489 ですが、機能していません。 index.html（ https://github.com/huynhsamha/crypto/blob/gh-pages/index.html ）にスクリプトを追加しましたが、SearchConsoleが見つかりません、したがって、画面にエラーを表示することもできません。
編集2
私も答えを試しました https://stackoverflow.com/a/54040745/8828489 そして https://stackoverflow.com/a/54048119/8828489 これで質問が、機能していません。 404.htmlファイルを作成し、答えの指示に従ってスクリプトを追加しましたが、機能しませんでした。
編集3
私も答えを試しました https://stackoverflow.com/a/54044148/8828489 この質問では単純なsitemap.xmlを作成することで、googlebotはこのファイルを見つけてすべてのURLを見つけることができますサイトマップで定義されています。ただし、記載されているURLをフェッチしてレンダリングすることもできません。
私はあなたのソースコードをざっと見て、何も憂慮すべきことは見ていません。ただし、同様の問題に関する投稿がいくつか見つかりました （1）（2） 。 2つ目は特に役立つように思われるので、ここで繰り返します。 Redditの@Zerotorescueに叫んでください。
Google Search Consoleを開き、[クロール]-> [Googleとしてフェッチ]に移動して、フェッチとレンダリングを実行します。
HTMLファイルのタグの一部として、またはバンドルの一部として、これをサイトに追加します。
https://Gist.github.com/mstijak/715fa2dd3f495a98386c3ebbadbabb8c
前者をお勧めします。読みやすくする必要がある場合（アプリを再コンパイルする必要がない場合）に変更が簡単になるためです。
これをサイトにプッシュしてから、別のフェッチと表示を行います。 Googleがアプリを実行できないというエラーが表示されます。 Search Consoleの解像度はかなり低いため、エラーのフォントサイズを大きくして、もう一度フェッチする必要がある場合があります。心配しないでください、Googleは繰り返しの電話を気にしません。
サポートされていないES6機能を使用しているため、Googleのクローラーがコードを処理できないことに気付くでしょう。これは、ポリフィリングで修正できます。 https://polyfill.io/ のように、実際にはGooglebotをサポートしていないことが判明し、動作する場合もありますが、信頼性がかなり低いなど、いくつか試しました。代わりに、babel-polyfillの使用をお勧めします。それは皆のためにあなたのバンドルサイズを少し増やすでしょう、しかし私の経験ではそれは最小限の頭痛で最も広いブラウザサポートを提供します。オンにするだけで完了です。
Create-react-appを使用している場合、これは私が使用しているpolyfills.jsファイルであり、コピーできます。
ポリフィルサービスが導入する、babel-polyfillを使用する場合に対処する必要のないすべての問題を説明するコメントがたくさんあることに注意してください。
https://huynhsamha.github.io/crypto/algorithm/sha256 を開いたときに、実際には response として404を受け取ったことがわかりました。ここでは、404.htmlを使用してGitHubでSPAをホストするための回避策が問題だと思います。私たち人間はあなたのアプリが私たちのブラウザで正しく提供されていることを確認しますが、googlebotは気にせず、応答コードを見て、404を受信したことを確認します。 404.htmlをアプリへの直接のエントリポイントとして使用しない別の回避策が必要になります。
次のことを試してください rafrexによるこの回避策 代わりに、元のルートを維持しながらindex.htmlを使用してブラウザを404.htmlにリダイレクトし、googlebotがそれを301ではなく404として登録すると主張します。以下のサイトへの変更については、<!-- ------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>
シングルページアプリに対するGitHubのサポートに関する詳細とディスカッション ここ 。
問題は、404ページを使用して/以外のルートへの着信トラフィックをキャプチャしていることです。これは、これらのルートが404ステータスコードを提供することを意味します（開発ツールでネットワークを開いて、これらの深いURLの1つにアクセスしようとするとこれを確認できます）。 Googleは、応答ヘッダーに404ステータスを確認し、すぐに諦めます。ウェブマスターツールの「見つかりません」というメッセージが超高速で表示されることに気付いたと思います。
通常のサーバーでは、これらのルートをキャプチャして、200や301などの正常なステータスコードを返すと、Googleはクロールを続行します。ただし、GitHubページを使用しているため、その周りをハックする必要があります。
その404テンプレートからインデックステンプレートへのインスタントリダイレクトを設定することで、これを実行できるはずです。ブラウザは、インスタントリダイレクトを301sとして解釈します。これを行うには、404.htmlの内容を次のようなものに置き換えます。
<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>
その404.htmlのファイルサイズが512bより大きいことを確認してください。そうしないと、IEはそれを破棄します（くそーM $ ...）。
最後に、index.htmlが元のルートをキャプチャしていることを確認する必要があります。これを行うには、index.htmlの先頭で次のようなスクリプトを使用します。
<script>
(function(){
var redirect = sessionStorage.redirect; // remember me?
delete sessionStorage.redirect;
if (redirect && redirect != location.href) {
history.replaceState(null, null, redirect);
}
})();
</script>
参考までに、私はこの巧妙なハックを次の場所から盗みました。
https://www.smashingmagazine.com/2016/08/sghpa-single-page-app-hack-github-pages/
反応アプリは1ページのWebであるため、sitemapファイルが必要です。1つを作成する方法を見つけることができます ここ 、 404ページも作成し、すべてのルートに次のようなアンカーを持つプロパティを追加します。
<a title="This my Route One" href="https://myreactapp/routeOne" alt="Route One"/>
また、コードに警告は表示されません（ただし、thinkはありませんが、<Route />にbaseUrlが必要です。私は間違っている可能性があり、それが問題だとは思わないが、不要な場合は削除する価値があるかもしれない）。
推測ですが、リンクをバウンスしながら[ネットワーク]タブを見ると、サービスワーカーに気づきました。確かに、私はサービスワーカーに関してはあまり精通していませんが（まだ！）、少しグーグルすると、グーグルクローラーはまだサービスワーカーをサポートしていないことが明らかになりました この記事では 、 この記事 、そして google ....アプリ内ナビゲーションを介して到達したリンクの1つでLighthouseテストを実行すると（たとえば、/algorithmをクリックした場合）にも気づきました。ホームページのナビゲーションからタブを押してから灯台テストを実行します）次のエラーが発生します：
このLighthouseの実行に影響する問題がありました：Chrome拡張機能は、このページの読み込みパフォーマンスに悪影響を及ぼしました。シークレットモードで、または拡張機能のないChromeプロファイルから）ページを監査してみてください。
およびより興味深い：
Lighthouseは、要求されたページを確実にロードできませんでした。正しいURLをテストしていること、およびサーバーがすべての要求に適切に応答していることを確認してください。ステータスコード：404。
...ブラウザでレンダリングされているのがはっきりと表示されているにもかかわらず。疑わしいようです。したがって、ifは、navigationがどのように発生しているかの一部です（おそらくあなたのリポジトリのregisterServiceWorker.jsファイルに基づいています（笑）、それはあなたのリンクが見つからない/フォローされていない原因である可能性があります。