Привет, Хабр! Представляю вашему вниманию перевод статьи «React SEO: советы по созданию веб-приложений, оптимизированных для SEO» автор Париди Вадхвани.
О чем мы будем говорить
Вы узнаете о проблемах, с которыми сталкиваются приложения React с точки зрения SEO (поисковая оптимизация или поисковая оптимизация).Если быть более конкретным, вы увидите, как React сочетается с методами поисковой оптимизации.
Кроме того, вы узнаете, как Google сканирует сайты React. В общем, перед индексацией в поисковой системе страница проходит несколько этапов.
Все идет хорошо до того момента, пока бот Google не начнет получать данные страницы.
А без их получения сайт страдает.
Введение
Предприниматели полагаются на самую популярную среду разработки веб-приложений React. И их интересует сторона SEO. Когда мы говорим о SEO, веб-сайты React сталкиваются с большими проблемами.Одна из основных причин заключается в том, что разработчики в основном сосредотачиваются на рендеринге на стороне клиента, а Google — на стороне сервера.
И это создает огромные проблемы как для React, так и для SEO. В этой статье мы поговорим об основах SEO-оптимизированных веб-сайтов на React. В этом руководстве вы найдете список проблем, которые мешают оптимизации React для поисковых систем.
Мы также рассмотрим рекомендации, которые помогут вашему приложению занять более высокий рейтинг в результатах поиска Google.
Как бот Google сканирует веб-страницы?
Из всех поисковых систем Google получает около 90% всех запросов, касающихся SEO. Прежде чем углубляться в то, как работает React SEO, давайте посмотрим, как Google его сканирует и индексирует. Изображение ниже взято с сайта Гугл документы .
Схема того, как бот Google индексирует сайт Примечание.
Это пример блок-схемы.
Сам бот Google довольно сложен.
Что следует помнить:
- Бот Google отслеживает очередь, содержащую все URL-адреса, необходимые для последующего сканирования и индексирования.
- Когда сканер бездействует, он выбирает дополнительные URL-адреса из очереди, выполняет запросы и собирает HTML-код.
- Бот решает, собирать и выполнять код JavaScript после анализа HTML. При необходимости URL-адрес добавляется в очередь рендеринга.
- Впоследствии средство визуализации собирает и выполняет JavaScript для создания HTML-кода, который отправляется боту.
- Блок обработки извлекает все теги URL, упомянутые на странице, и добавляет их обратно в очередь сканирования.
- Содержимое добавляется в индекс Google.
Запуск JavaScript обходится дорого, особенно когда нужно сканировать 130 триллионов веб-страниц.
(примечание: именно поэтому бот Google часто не выполняет код JavaScript, необходимый для SEO в React) .
Распространенные проблемы SEO
SEO для веб-сайтов React чрезвычайно важен.Ниже приведены несколько проблем SEO, которые могут исправить разработчики.
1. Пустая страница при первом просмотре.
Известно, что приложения React зависят от JavaScript. И в результате они сталкиваются с проблемами поисковых систем.
Это происходит из-за модели приложения, используемой React. Изначально HTML не содержит никакого важного контента, поэтому боту или пользователю необходимо загрузить и выполнить код JavaScript для просмотра содержимого страницы.
Такой подход указывает на то, что бот Google видит пустую страницу при первом проходе.
Таким образом, контент будет виден Google только после того, как страница будет отображена.
В конечном итоге это приводит к задержкам индексации тысяч страниц.
2. Метаданные страницы
Мета-теги хороши, потому что они позволяют общаться в социальных сетях.сетях и Google отображают значки, заголовки и описания конкретной страницы.
Но социальные сети для получения информации зависят от тега страницы.
Они не выполняют JavaScript на загруженной странице.
React отображает любой контент, даже метатеги.
Поскольку модель приложения остается одинаковой для всего приложения/сайта, становится сложно адаптировать метаданные для каждой страницы.
3. Карта сайта
Карта сайта (карта сайта) — это файл, содержащий всю информацию о видео, страницах и других разделах вашего сайта, а также взаимосвязях между ними.Будучи умной поисковой системой, Google просматривает этот файл, чтобы облегчить чтение информации сайта.
В React нет встроенных методов для создания карт сайта.
Если вы используете React Router для навигации, вам нужно будет найти способы создания карты сайта.
Хотя это потребует некоторых усилий.
4. Пользовательский опыт и время загрузки
Независимо от задачи, получение, обработка или выполнение JavaScript занимает много времени.Кроме того, JavaScript может делать сетевые запросы для получения контента, при этом пользователю приходится немного подождать, прежде чем просмотреть запрошенные данные.
А когда дело доходит до результатов поиска, Google разработал набор жизненно важных веб-функций, основанных на опыте пользователей.
Увеличение времени загрузки влияет на пользовательский опыт, что дает Google понять, что ваш сайт занимает более низкий рейтинг.
5. Другие соображения по SEO
Ниже приведены несколько практик для создания отличного SEO.- Используйте CDN для обслуживания каждого статического ресурса, такого как JS, CSS, шрифты и т. д., и используйте адаптивные изображения, чтобы сократить время загрузки.
- Улучшение файла robots.txt может помочь ботам поисковых систем сканировать ваш сайт.
Проблемы React SEO
Давайте разберемся, как и почему оптимизировать SEO для React сложно.ReactJs — выгодный выбор для веб-разработки в 2021 году , но давайте посмотрим, с какими проблемами столкнется разработчик React при разработке SEO-дружественных веб-сайтов.
1. Использование одностраничного приложения (SPA)
Чтобы сократить время загрузки, разработчики создают SPA на основе JS. Это основная проблема SEO для React-сайтов.
Сайты не перезагружают весь контент. Вместо этого данные страницы обновляются.
Это приводит к повышению производительности приложений.
2. Отсутствие динамических SEO-тегов.
SPA загружают данные во время работы.
Таким образом, когда сканер сайта нажимает на определенную ссылку, странице становится сложнее завершить цикл загрузки.
Метаданные не могут быть обновлены.
И это основная причина, по которой бот-сканер не может показать SPA, в конечном итоге индексируя пустую страницу.
В результате все это ухудшает рейтинг в поисковых системах.
Однако есть возможность решить эту проблему; разработчикам необходимо создать отдельные страницы для бота Google. Но это создает новую проблему.
Создание отдельных страниц влечет за собой бизнес-расходы, помимо проблем с рейтингом на первой странице Google.
3. Проблемы SEO со SPA
Как вы знаете, одностраничные приложения создаются для оптимизации производительности сайта.
Есть несколько проблем, связанных с SEO.
Как сделать React-приложения оптимизированными для SEO
Ниже приведены подходы к улучшению SEO в React.1. Изоморфная реакция
Технология изоморфного JavaScript имеет возможность автоматически определять на стороне сервера, включен ли у клиента JavaScript. Когда JavaScript отключен, изоморфный JavaScript запускается на стороне сервера и предоставляет клиенту готовый контент. Весь необходимый контент и атрибуты становятся доступны сразу, как только страница начинает загружаться.Однако когда JavaScript включен, все работает как динамическое приложение с несколькими компонентами.
Это увеличивает время загрузки по сравнению с обычными сайтами, тем самым предоставляя пользователю более приятные впечатления от SPA.
2. Предварительный рендеринг
Будучи одним из лучших вариантов для создания одно- и многостраничных SEO-приложений, предварительный рендеринг обычно используется, когда сканеры или поисковые роботы неэффективно отображают веб-страницы.Пререндеры — это уникальные программы, ограничивающие запросы к сайту.
В ситуации, когда запрос поступает от поискового робота, пререндер отправляет статическую HTML-версию.
Если происходит стандартный запрос, страница загружается как обычно.
Преимущества:
- Эти программы достаточно мощны, чтобы запускать современный JavaScript и конвертировать его в статический HTML.
- Легко подключить
- Поддержка новейших веб-стандартов.
Недостатки:
- Это не бесплатно
- Не подходит для страниц, данные которых часто меняются.
- Долго загружается, если сайт слишком большой
3. Рендеринг на стороне сервера: получение HTML-файлов со всем содержимым.
Если вы хотите создать приложение React, вам необходимо иметь четкое представление о рендеринге на стороне клиента и на стороне сервера.
При рендеринге на стороне клиента бот и браузер Google получают пустые HTML-файлы с меньшим содержанием или без него.
Затем код JavaScript загружает данные с сервера и позволяет пользователям просматривать их на своих экранах.
Однако рендеринг на стороне клиента сталкивается с рядом проблем SEO. Это связано с тем, что сканер Google не может видеть какой-либо контент или видит меньше контента, чем необходимо, что препятствует правильной индексации страницы.
С другой стороны, при рендеринге на стороне сервера браузер и роботы Google получают HTML-файл со всем содержимым.
Это помогает ботам выполнять индексацию и без проблем повышает рейтинг в результатах поиска.
Лучшие практики React SEO
Эти практики дадут вам ответы на вопрос, как сделать ваше React-приложение оптимизированным для SEO:1. Использование React Router
Скорее всего вы знаете, что React использует SPA (одностраничное приложение).Однако вы можете использовать модель SPA более оптимально, если опишите элементы и правила SEO на своих страницах определенным образом.
Рекомендации: страница должна открываться как отдельный URL без хэштега (#).
(В соответствии с Google , он не может читать хешированные URL-адреса и, следовательно, не может индексировать URL-адреса, сгенерированные React).
Поэтому мы создаем URL-адреса, чтобы они открывались на отдельных страницах.
Мы должны использовать перехватчики React Router в URL-адресах.
Ниже приведен образец: 
При создании контента мы рекомендуем воздержаться от использования setTimeout. Из-за этого бот Google может покинуть страницу и сайт, не прочитав данные.
2. Регистр URL-адреса
Google считает определенные страницы отдельными, если URL-адрес содержит строчные или прописные буквы.Например: /венди /Венди Google будет рассматривать эти два адреса как две отдельные страницы.
Чтобы избежать такого дублирования, всегда пишите адреса строчными буквами.
3. Использование «href» в ссылках
Обязательно укажите «href» для своих ссылок.К сожалению, бот Google не может отслеживать переходы, реализованные с помощью onClick. Следовательно, становится важным включать href в ссылки, чтобы боту Google было легче находить другие страницы и посещать их.
4. Реагирующий шлем
Одним из важных компонентов SEO являются метаданные.
Поэтому они должны появиться в исходном коде даже при использовании React. Использование одного и того же описания и заголовка на всех страницах может быть недостаточным для CTR (рейтинга кликов) и других показателей SEO. 
Вот когда Реагирующий шлем вступает в игру.
Ниже приведен пример структуры кода вместе с метаданными: 
Если описание элемента не удается универсализировать, попробуйте заполнить описание первыми 160 символами содержимого страницы.
Убедитесь, что структура данных элемента сохраняется в исходном коде вместе с метаданными.
(Схема организации, продукт и т. д.) 
Например, ниже приведены необработанные и визуализированные версии веб-сайта yolcu360.com. Структурированные данные отображаются в защищенном виде в обеих версиях.
В идеале мы не должны видеть такой разницы.
Сырой:
Оформлено:
Когда мы проверяем страницу с помощью инструмента Богатые результаты , это говорит нам о том, структурированы ли данные на вашей странице и может ли бот Google легко их просмотреть.
Вы можете визуализировать метаданные или контент и элементы в Google, используя Helmet и рендеринг на стороне сервера вместе.
Любые недостатки или потенциальные ошибки метаданных могут негативно повлиять на каждый из показателей, представленных в результатах поиска.
5. Код ошибки 404.
Все дефектные страницы имеют код ошибки 404. Следовательно, это напоминание о необходимости настройки таких файлов, как server.js иroute.js.
6. Изображения
Вы должны указать изображения на страницы, используя «img src».В соответствии с исследовать , хотя изображения без проблем появляются в элементах страницы, сканер не может их проиндексировать.
Правильное использование: 
Использование чего-либо в качестве фона CSS с React может привести к трудностям при индексации изображений.
Неправильное использование: 
7. Реагировать.
Ленивый Внедрение отложенной загрузки поможет пользователям быстрее просматривать ваш сайт и окажет положительное влияние на показатели скорости загрузки Google. Вы можете найти этот пакет по адресу НПМ .
вы можете использовать React-Snap для оптимизации работы сайта.
Ниже приведен пример: 
По сравнению с другими фреймворками JavaScript, такими как Vue или Angular, React может обойтись файлами меньшего размера.
Он не публикует нежелательный и непригодный для использования код. Следовательно, это помогает значительно увеличить скорость страницы.
Для ясности вы можете разделить JS-файл размером 2 МБ на несколько файлов по 60–70 КБ и запустить их в отдельных процессах.
Заключение
Хотя React и SEO 2021 широко используются в наши дни, с ними связано несколько важных терминов.В их число входят React Helmet, React Router и React-snap. Однако при использовании JavaScript имейте в виду, что Google вычисляет и сканирует сайты HTML быстрее и лучше, чем сайты JavaScript. Но это не значит, что Google не может сканировать JS-сайты.
Единственное, на что вам нужно обратить внимание, это необходимость быть внимательным и точно знать, какие трудности могут возникнуть на пути.
Часто задаваемые вопросы
Чем React может быть полезен в SEO-оптимизации? Предварительный рендеринг и рендеринг на стороне сервера — два важных способа улучшить SEO вашего приложения React. Для чего используется React Helmet? React Helmet — это библиотека, используемая для обработки тега head, включая метаданные и язык вашего веб-приложения.Это позволяет сайту React быть более оптимизированным для SEO. Могут ли React SPA быть оптимизированными для SEO? Фреймворк JavaScript Next.js помогает проектам React решать проблемы SEO в SPA Что такое изоморфное приложение React? Приложение React, которое может работать как на стороне сервера, так и на стороне клиента, называется изоморфным.
Является ли Next.js SEO-дружественным? Да, с помощью Next.js вы можете создавать веб-сайты React, которые легко сканируются поисковыми системами.
Теги: #SEO #SEO #seo оптимизация #react #поисковая оптимизация #результаты поисковых систем #JavaScript #react.js #поисковая оптимизация
-
Как Создать Свой Логотип И Значок
19 Oct, 24 -
Личная Информация Американцев Стоит Копейки
19 Oct, 24
