1. Небольшое тестирование всегда помогает ...
2. Вывод - что делать

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

К сожалению, рендеринг на стороне сервера доказал, что это не решение «один размер подходит всем» - ваш бэкэнд уже может быть собран, и на нем не работает Node.

Другие решения включают использование службы предварительного рендеринга или инфраструктуры, такой как Next.js , который используется для создания приложений React и предоставляет готовые к использованию инструменты для рендеринга на стороне сервера, такие как установка HTML-тегов для SEO и выборка данных перед рендерингом компонентов в процессе сборки.

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

Небольшое тестирование всегда помогает ...

Хотя робот Googlebot может сканировать все приложения React, созданные клиентом, лучше быть осторожным и иметь возможность проверять свой сайт на наличие или отсутствие поисковых роботов. К счастью, уже есть инструмент для этого - Google Просмотреть как Google Инструмент позволяет вам проверить, как Google сканирует или отображает URL на вашем сайте. Его основная функция состоит в том, чтобы моделировать сканирование и рендеринг, как это делается в обычном процессе сканирования и рендеринга Google.

Вы можете использовать Fetch как Google для выполнения следующих задач:

• Узнайте, может ли робот Google получить доступ к странице на вашем сайте
• Узнайте, как робот Googlebot отображает страницы на вашем сайте
• Узнайте, заблокированы ли какие-либо ресурсы страницы, такие как изображения или сценарии, для робота Googlebot

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

Для развертывания, Heroku будет работать просто хорошо Если у вас возникли проблемы с развертыванием приложения в Heroku, вы можете проверить это краткое и подробное руководство, написанное Алексом Гвозденом. Вот ,

Вот как выглядит наше приложение:

Класс App extends Component {render () {return (<div> <h1> Googlebot всегда будет сканировать </ h1> </ div>); }}

Чтобы использовать Fetch в качестве инструмента Google, посетите Google Search Console - вам нужен аккаунт Google, чтобы иметь доступ к обоим инструментам. Вот обзор того, как выглядит консоль поиска Google:

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

На этом этапе консоль поиска попросит вас подтвердить URL-адрес, который вы хотите проверить. Чтобы проверить URL, выполните шаги, изложенные в рекомендуемом методе:

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

Перейдите на боковую панель и нажмите опцию Crawl , вы должны увидеть Fetch as Google:

Используя Fetch as Google, вы можете проверить определенные ссылки, прикрепленные к вашему веб-сайту, указав их в текстовом поле. Допустим, у нас есть страница / products, которую мы хотим протестировать, мы можем ввести / products в текстовое поле. Оставьте это поле пустым, чтобы проверить страницу индекса нашего сайта.

Fetch as Google позволяет тестировать ваш сайт в двух разных режимах:

Извлечь : это позволяет вам выбрать указанный URL на вашем сайте и отображает HTTP-ответ. Fetch не запрашивает и не запускает никаких связанных ресурсов, таких как изображения или сценарии на странице.

Извлекать и отображать: эта опция выбирает указанный URL на вашем сайте, отображает HTTP-ответ, а также отображает страницу. Он запрашивает, а также запускает все ресурсы на странице.

Мы будем использовать опцию Fetch and Render, чтобы определить разницу между тем, как робот Googlebot видит вашу страницу, и тем, как пользователь видит эту же страницу. Когда мы запускаем Fetch and Render в нашем тестовом веб-приложении React, вот результат:

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

Это означает, что Google и, возможно, другие поисковые системы не смогут прочитать ваш сайт, и, следовательно, вы можете потерять SEO. Робот Google не может правильно сканировать ваш сайт из-за слишком медленной загрузки контента. Асинхронные вызовы, такие как AJAX и setTimeout, не могут быть завершены до того, как робот Google будет сканировать и отображать ваш сайт.

Как мы можем сказать? Есть только один способ узнать. В нашем приложении React давайте внесем некоторые изменения и еще раз протестируем, используя Fetch в качестве Google. Мы будем использовать setTimeout, чтобы немного замедлить работу нашего приложения и заставить его отображать сообщение « Googlebot всегда будет сканировать », скажем, через 20 секунд:

Приложение класса расширяет React.Component {constructor () {super (); this.state = {message: ""}; } componentDidMount () {setTimeout (() => {this.setState ({message: "Googlebot всегда будет сканировать"})}, 20000); } render () {return (<div> <h1> {this.state.message} </ h1> </ div>)}} экспорт приложения по умолчанию;

После того, как setTimeout был реализован, это был вывод:

Очевидно, что робот Googlebot не ожидает загрузки, которая занимает слишком много времени.

Вывод - что делать

У Google есть возможность сканировать даже «тяжелые» сайты React довольно эффективно. Однако вы должны создать свое приложение таким образом, чтобы оно загружало важные материалы, которые вы бы хотели, чтобы робот Google сканировал при загрузке приложения. Вещи, чтобы принять к сведению включают в себя:

• Рендеринг вашей страницы на сервере, чтобы он мог загрузить сразу. Вы можете узнать больше об этом, используя мою статью о серверной части React. Вот

• Выполнение асинхронных вызовов только после рендеринга ваших компонентов

• Тестирование каждой из ваших страниц с использованием Fetch as Google, чтобы убедиться, что робот Googlebot находит ваш контент

• Если ваш веб-сайт в значительной степени будет зависеть от индексации поисковой системы, я предлагаю вам отображать контент на сервере. Таким образом, вы всегда уверены, что что бы сервер не имел, поисковая система будет индексировать.

Похожие

Комментарии