Тестирование React App SEO с использованием Fetch в качестве Google

1. Одностраничное приложение SEO
2. Простое приложение React
3. Используя Fetch как Google
4. Эксперименты
5. Резюме

При разработке веб-сайта вам может быть интересно понять, насколько хорошо поисковые системы могут сканировать и понимать его. Google предлагает инструмент под названием Просмотреть как Google это может помочь ответить на этот вопрос.

В этом посте я объясню, как использовать Fetch в качестве Google для тестирования вашего сайта. Может использоваться для любого сайта; Тем не менее, я собираюсь сосредоточиться на тестировании SEO видимости реагировать приложения, так как в настоящее время я работаю над общедоступным веб-приложением React.

Одностраничное приложение SEO

Переход к одностраничным приложениям (например, React, угловатый , тлеющие угли и т. д.) изменился способ доставки контента пользователям. Из-за этого поисковым системам приходилось настраивать способ сканирования и индексирования веб-контента.

Так что же это означает для одностраничного SEO приложения? Там были несколько отличный сообщений эта попытка расследовать это. Общий вывод заключается в том, что Google и другие поисковые системы могут сканировать и индексировать эти приложения с довольно хорошей компетенцией. Однако могут быть оговорки, поэтому очень важно иметь возможность протестировать свой сайт. Это где Fetch, как Google входит.

По словам самого Google:

Инструмент «Получить из Google» позволяет вам проверить, как Google сканирует или отображает URL на вашем сайте. Вы можете использовать Fetch as Google, чтобы узнать, может ли робот Google получить доступ к странице на вашем сайте, как он отображает страницу и заблокированы ли какие-либо ресурсы страницы (например, изображения или скрипты) для робота Googlebot. Этот инструмент имитирует выполнение сканирования и рендеринга, как в обычном процессе сканирования и рендеринга Google, и полезен для устранения проблем сканирования на вашем сайте.

Простое приложение React

Чтобы поэкспериментировать с Fetch в качестве Google, нам сначала понадобится веб-сайт (приложение React для нас) и способ его развертывания по общедоступному URL-адресу.

В этом посте я собираюсь использовать простое приложение React «Здравствуй, мир!», Которое я разверну в Heroku для тестирования. Несмотря на то, что приложение простое, концепции хорошо обобщаются для более сложных приложений React (по моему опыту).

Предположим, что наше простое приложение React выглядит следующим образом:

Приложение класса расширяет React.Component {render () {return (<div> <h1> Hello, World! </ h1> </ div>)}}

Используя Fetch как Google

Вы можете найти Fetch как инструмент Google под Google Search Console , (Вам понадобится учетная запись Gmail для доступа.)

Когда вы попадете в консоль поиска, она будет выглядеть примерно так:

Поисковая консоль сначала запрашивает веб-сайт. Мое приложение Heroku размещено по адресу https://react-seo-demo.herokuapp.com/. Введите URL своего веб-сайта, а затем нажмите Добавить свойство.

Затем консоль поиска попросит вас подтвердить, что вы являетесь владельцем URL, который вы хотите проверить.

Способ проверки зависит от того, как размещен ваш сайт. Для моего сайта мне нужно было скопировать проверочный HTML-файл, предоставленный Google, в корневой каталог моего сайта, а затем открыть его в браузере.

После проверки вашего URL, вы должны увидеть следующее меню:

Под опцией Crawl вы должны увидеть Fetch как Google:

Получить как Google позволяет вам тестировать конкретные ссылки, указав их в текстовом поле. Например, если у нас есть страница / users и мы хотим проверить это, мы можем ввести / users в текстовое поле. Оставьте это поле пустым, чтобы протестировать индексную страницу сайта.

Вы можете проверить, используя два разных режима: Fetch, и Fetch and Render. Как описано в Google, Fetch:

Получает указанный URL на вашем сайте и отображает ответ HTTP. Не запрашивает и не запускает никаких связанных ресурсов (таких как изображения или сценарии) на странице.

И наоборот, выборка и рендеринг:

Выбирает указанный URL-адрес на вашем сайте, отображает HTTP-ответ, а также отображает страницу в соответствии с указанной платформой (настольный компьютер или смартфон). Эта операция запрашивает и запускает все ресурсы на странице (например, изображения и сценарии). Используйте это, чтобы обнаружить визуальные различия между тем, как робот Google видит вашу страницу, и тем, как пользователь видит вашу страницу.

Запуск Fetch на нашем тестовом сайте React дает:

Это отражает страницу index.html, в которой находится наше приложение React. Обратите внимание, что это отражает HTML, когда страница загружается, до того, как наше приложение React будет отображено внутри div приложения.

Запуск Fetch and Render дает:

Это обеспечивает сравнение сайта, который робот Google может видеть с тем, что пользователь сайта будет видеть в своем браузере. Для нашего примера они точно такие же, что является хорошей новостью для нас!

В Интернете есть несколько историй о людях, которые запускали Fetch as Google в своих приложениях React и наблюдали пустой или другой вывод «Это то, как робот Googlebot видел страницу». Это может указывать на то, что ваше приложение React разработано таким образом, что не позволяет Google и, возможно, другим поисковым системам правильно читать и сканировать.

Это может произойти по разным причинам, одной из которых может быть слишком медленная загрузка контента. Если ваш контент загружается медленно, есть вероятность, что сканер не будет ждать его достаточно долго. Это не было проблемой в нашем примере выше. Я также запустил Fetch as Google на достаточно большом веб-сайте React, который выполняет несколько асинхронных вызовов для получения исходных данных, и он мог видеть все просто отлично.

Так какой предел? Я решил провести несколько наивных экспериментов.

Эксперименты

Примечание : я не уверен, как Fetch как Google работает под капотом. Есть некоторые посты это намек на то, что он может сделать ваш сайт с помощью PhantomJS ,

Реагирующие приложения обычно полагаются на асинхронные вызовы для извлечения своих начальных данных. Чтобы отразить это, давайте обновим наш пример приложения React, чтобы получить некоторые репозитории GitHub и отобразить список их имен.

Приложение класса расширяет React.Component {constructor () {super (); this.state = {repoNames: []}; } componentDidMount () {let self = this; fetch ("https://api.github.com/repositories", {method: 'get'}) .then ((response) => {return response.json ();}) .then ((repos) => {self.setState ({repoNames: repos.map ((r) => {return r.name;})});}); } render () {return (<ol> {this.state.repoNames.map ((r, i) => {return <li key = {i}> {r} </ li>})} </ ol> )}}

Запуск вышеупомянутого через Fetch, поскольку Google производит следующий вывод:

о нет! Не удалось увидеть данные из асинхронного вызова GitHub. Я буду честен; это немного смутило меня. Сначала я подумал, что это может быть какое-то странное ограничение перекрестного происхождения. Однако оказывается, что робот Googlebot может обрабатывать запросы из разных источников просто отлично. После нескольких копаний, множества проб и ошибок и, но удачи, я обнаружил, что мне нужно включить полифилл ES6 Promise. Очевидно, что браузер, в котором работает робот Google, не содержит реализацию ES6 Promise. После внесения в ES6-обещание , Выборка как вывод Google выглядела так.

Давайте выберем в Fetch как Google немного больше. Предположим, что ваше приложение выполняет медленный вызов или выполняет некоторую асинхронную обработку, используя такие вещи, как setTimeout или setInterval. Как долго Fetch будет ждать, пока Google будет ожидать таких типов асинхронных запросов, и когда она получит снимок вашего веб-сайта?

Давайте изменим наше приложение «Hello, World!» Сверху, чтобы подождать пять секунд, прежде чем отобразить текст «Hello, World!»:

Приложение класса расширяет React.Component {constructor () {super (); this.state = {message: ""}; } componentDidMount () {setTimeout (() => {this.setState ({message: "Hello World !, через 5 секунд"})}, 5000); } render () {return (<div> <h1> {this.state.message} </ h1> </ div>)}}

Запуск Fetch от Google с приведенным выше кодом дает следующее:

Интересно, что он все еще был в состоянии видеть выходные данные компонента. Кроме того, операция Fetch as Google заняла значительно меньше пяти секунд настенных часов, что заставляет меня думать, что среда браузера, в которой она работает, должна быть ускоренной пересылки из-за задержек или чего-то еще. Интересно, что если мы увеличим пять секунд до 15, мы увидим этот результат:

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

Теперь давайте изменим наш компонент так, чтобы он вызывал setInterval каждую секунду, и обновим счетчик, который мы печатаем, на экран:

Приложение класса расширяет React.Component {constructor () {super (); this.state = {message: "", count: 0}; this.update = this.update.bind (this); } update () {let count = this.state.count; this.setState ({count: this.state.count + 1}); } componentDidMount () {setInterval (this.update, 1000); } render () {return (<div> <h1> {`Количество равно $ {this.state.count}`} </ h1> </ div>)}}

Это дает следующий вывод:

Таким образом, он захватил рендеринг страницы после ожидания в течение пяти секунд. Это соответствует приведенному выше поведению setTimeout. Я не уверен точно, сколько мы можем вывести из этих экспериментов; однако, они, похоже, подтверждают, что робот Google будет ждать некоторое время, прежде чем сохранить визуализацию вашего сайта.

Резюме

По моему опыту, Google может довольно эффективно сканировать сайты React, даже если они действительно загружают данные заранее. Однако, вероятно, хорошей идеей будет оптимизировать ваше приложение React, чтобы загружать наиболее важные данные (которые вы хотели бы сканировать) как можно быстрее при загрузке приложения. Это может означать упорядочение вызовов API определенным образом, предпочтение сначала загружать частичные данные или даже рендеринг начальной страницы на сервере, чтобы она сразу загружалась в браузере клиента.

Помимо времени загрузки, есть несколько других вещей, которые могут вызвать проблемы с SEO для вашего приложения React. Мы видели, что недостающие полифилы могут быть проблематичными. Я также видел, что использование функций со стрелками было проблематичным, поэтому, возможно, стоит ориентироваться на более старую версию ECMAScript.

Похожие

Комментарии