Google Crawler в консоли поиска не может найти маршруты в React, используя страницу Github - PullRequest
0 голосов
/ 28 декабря 2018

Моя проблема Сканирование в Консоль поиска Google Не удается найти под-маршруты в Реагировать .

URL-адрес https://huynhsamha.github.io/crypto, и сканер может fetch and render домашняя страница (маршрут /) и статические файлы, такие как /robots.txt, /favicon.ico, но он не может найти под-маршруты, которые отображаются в React, ( SPA , с использованием Redux), например /algorithm/sha256.Например, https://huynhsamha.github.io/crypto/algorithm/sha256 не может быть найден Crawler, но он может быть доступен.

Это мой скриншот в поисковой консоли Google, который я пробовал.

enter image description here

Кто может объяснить, почему и как решить мою проблему?Я использую 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),, но консоль поиска по-прежнему не может быть найдена, поэтому она также не может отображать ошибки на экране.

Редактировать 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-адреса.

Ответы [ 5 ]

0 голосов
/ 05 января 2019

Проблема в том, что вы используете страницу 404 для захвата входящего трафика на маршруты, отличные от /.Это означает, что эти маршруты обслуживают код состояния 404 (вы можете увидеть это, если откроете Сеть в инструментах разработчика и попытаетесь посетить один из этих глубоких URL-адресов).Google видит статус 404 в заголовке ответа и сразу же сдается.Вы, вероятно, заметили, что сообщение «Не найдено» в Инструментах для веб-мастеров появилось очень быстро.

На обычном сервере вы бы захватили эти маршруты и вернули бы успешный код состояния, такой как 200 или 301 иGoogle продолжит ползти.Тем не менее, поскольку вы используете страницы GitHub, вам нужно обойти это.

Вы сможете сделать это, настроив мгновенное перенаправление с этого 404 шаблона на ваш индексный шаблон.Браузеры интерпретируют мгновенные перенаправления как 301 s.Чтобы сделать это, замените содержимое вашего 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/

0 голосов
/ 04 января 2019

Поскольку приложение реагирования является одностраничным, вам нужен файл sitemap , вы можете найти его, как сделать один здесь , тоже создать страницу 404, и каждый маршрут добавитьсвойство, которое имеет привязку как

<a title="This my Route One" href="https://myreactapp/routeOne" alt="Route One"/>
0 голосов
/ 03 января 2019

Я также не вижу ничего тревожного в вашем коде (хотя я не думаю , вам нужен baseUrl в вашем <Route /> - хотя я могу ошибаться и не думаю, чтоэто проблема, но она может стоить устранить, если в этом нет необходимости).

Просто предположение, но, глядя на вкладку сети, пока я бегал по ссылкам, я заметил работника сервиса.Я, правда, не очень подкован, когда дело доходит до сервисных работников (пока!), Однако поиск в Google немного показал, что сканеры Google еще не поддерживают сервисных работников, как утверждается в этой статье , этой статье и google .... Я также заметил, что если я запускаю тест Lighthouse на одной из ссылок, которые я получил с помощью навигации в приложении (например, я нажимаю на вкладку /algorithmиз навигации на домашней странице, а затем запустите тест Lighthouse) Я получаю следующие ошибки:

Были проблемы, влияющие на этот запуск Lighthouse: расширения Chrome отрицательно влияли на производительность загрузки этой страницы.Попробуйте выполнить аудит страницы в режиме инкогнито или из профиля Chrome без расширений.

и еще интереснее :

Маяк не смог надежно загрузитьСтраница, которую вы запросили.Убедитесь, что вы проверяете правильный URL и что сервер правильно отвечает на все запросы.Код состояния: 404.

... несмотря на то, что он четко виден в браузере.Кажется подозреваемым.Итак, , если является частью того, как происходит навигация (кажется, что это, вероятно, основано на файле registerServiceWorker.js в вашем репозитории), это может быть причиной того, что ваши ссылки небыть найденным / прослеженным

0 голосов
/ 04 января 2019

Я обнаружил, что когда я открыл https://huynhsamha.github.io/crypto/algorithm/sha256,, я фактически получил 404 как ответ .Я думаю, что ваш обходной путь для размещения SPA на GitHub с использованием 404.html является проблемой здесь.В то время как мы, люди, видим, что ваше приложение корректно отображается в нашем браузере, 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&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>

Дополнительная информация и обсуждение поддержки GitHub для одностраничного приложения здесь .

0 голосов
/ 29 декабря 2018

Я ковырялся в вашем исходном коде и не вижу ничего тревожного;Тем не менее, я нашел несколько сообщений о подобных проблемах (1) (2) .Второе кажется особенно полезным, поэтому я повторю это здесь.Приветствуйте @Zerotorescue в Reddit.

Откройте Google Search Console и перейдите в Crawl -> Fetch as Google и выполните выборку и визуализацию.

Добавьте это на свой сайт, либо как частьтега в вашем HTML-файле или в составе пакета:

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

Я рекомендую первый, так как его легче изменить, если вам нужно сделать его более читабельным(нет необходимости перекомпилировать ваше приложение).

Нажмите это на свой сайт, а затем выполните еще одну выборку и отображение.Теперь появится сообщение об ошибке, которое не позволяет Google запустить ваше приложение.Разрешение поисковой консоли довольно низкое, поэтому вам, возможно, придется увеличить размер шрифта ошибки и выполнить выборку снова.Не волнуйтесь, Google не возражает против повторных звонков.

Вы, вероятно, обнаружите, что сканер Google не может обработать ваш код, потому что вы используете какую-то функцию ES6, которую он не поддерживает.Вы можете исправить это, заполнив поле.Я попробовал пару вещей, таких как https://polyfill.io/, которые оказались не совсем поддерживают Googlebot, и хотя иногда это может работать, это довольно ненадежно.Вместо этого я рекомендую использовать babel-polyfill.Это немного увеличит размер вашего пакета, но по моему опыту он обеспечивает самую широкую поддержку браузера с минимальной головной болью.Просто включите его, и все готово.

Если вы используете приложение create-реакции-приложение, то я использую файл polyfills.js, который вы можете скопировать:

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

Обратите внимание, что есть много комментариев, объясняющих все проблемы, возникающие в сервисе polyfill, с которыми вам не придется сталкиваться, если вы используете babel-polyfill.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...