Автор оригинала: FreeCodeCamp Community Member.
Патрик Хонг
Недавно я проверил, предотвратит ли рендеринг на стороне клиента, предотвращающуюся веб-сайты по поисковой системе роботов. Как Моя статья Показано, реагирование, похоже, вообще не повредит поисковой системой.
Теперь я беру его на следующий уровень. Я настроил проект And React Project, чтобы точно увидеть, что Google может выползть и индексировать.
Настройка небольшого веб-приложения
Моя цель состояла в том, чтобы создать приложение для реагирования на голыми костями и минимизировать время, проведенное настроить Cabel, WebPack и другие инструменты. Затем я бы развернул это приложение к общедоступному веб-сайту как можно быстрее.
Я также хотел иметь возможность развертывать обновления до производства в течение нескольких секунд.
Учитывая эти цели, идеальные инструменты были Create-React-App и страницы GitHub.
С Create-React-App Я построил небольшое реагированное приложение в течение 30 минут. Это был просто вопрос набора этих команд:
create-react-app seo-sandboxcd seo-sandbox/npm start
Я изменил текст по умолчанию и логотип, разыгрывая с форматированием, и Voilá – веб-страница, которая отображается на 100% на стороне клиента, чтобы дать Googlebot что-то жевать!
Вы можете увидеть мой проект на Github Отказ
Развертывание страниц GitHub
Create-React-App было полезно. Почти экстрасенс. После того, как я сделал NPM запустить сборку Он признал, что я планировал опубликовать свой проект на страницах GitHub и сказал мне, как это сделать:
Вот мой SEO Sandbox размещен на страницах GitHub: https://pahund.github.io/seo-sandbox/
Настройка консоли поиска Google
Google предоставляет бесплатный набор инструментов, называемых Поиск Google Socole для веб-мастеров, чтобы проверить свои сайты.
Чтобы настроить это, я добавил, что они называют «свойством» для моей веб-страницы:
Чтобы убедиться, что я на самом деле владельцем сайта, мне пришлось загрузить специальный файл для Google, чтобы найти на веб-сайте. Благодаря Nifty NPM запустить развертывание Механизм, я смог сделать это за считанные секунды.
Глядя на мою веб-страницу через глаза Google
С помощью конфигурации я могу теперь использовать инструмент «FECTE в качестве Google», чтобы посмотреть на мой SEO Sandbox Page Page Page My Seo Sandbox так, как GoogleBot видит это:
Когда я нажал на «FECTE и RENDER», я мог бы исследовать, какие части моей страницы на основе реагирования могут быть фактически проиндексированы GoogleBot:
Что я обнаружил до сих пор
Discovery # 1: GoogleBot читает контент, который загружен асинхронно
Первое, что я хотел проверить, было ли GoogleBot не указан или сканирует частей страницы, которые визуализируются асинхронно.
После того, как страница была загружена, мое приложение raction делает запрос AJAX для данных, затем обновляет части страницы с помощью этих данных.
Чтобы моделировать это, я добавил конструктор в свой компонент приложения, который устанавливает состояние компонента с помощью window.settimeout вызов.
constructor(props) { super(props); this.state = { choMessage: null, faq1: null, faq2: null, faq3: null }; window.setTimeout(() => this.setState(Object.assign(this.state, { choMessage: 'yada yada' })), 10); window.setTimeout(() => this.setState(Object.assign(this.state, { faq1: 'bla bla' })), 100); window.setTimeout(() => this.setState(Object.assign(this.state, { faq2: 'shoo be doo' })), 1000); window.setTimeout(() => this.setState(Object.assign(this.state, { faq3: 'yacketiyack' })), 10000);}→ Смотрите настоящий код на GitHub
Я использовал 4 различных тайм-аута 10 миллисекунд, 100 миллисекунд, 1 секунды и 10 секунд.
Как получается, GoogleBoT будет отказаться от 10-секундной тайм-аута. Другие 3 текстовых блока отображаются в окне «Fetch в качестве Google»:
React Router смущает GoogleBot
Я добавил React Router (Версия 4.0.0-alpha.5) в мое веб-приложение для создания строки меню, которая загружает различные подпункты (скопированные и вставлены прямо из своих документов):
Сюрприз, сюрприз – когда я сделал «привлечь в качестве Google», я только что получил пустую зеленую страницу:
Похоже, что использование React Router для маршрутизатора для клиентских набонных страниц проблематично с точки зрения дружелюбие поисковой системы. Осталось, чтобы быть видимым, является ли это только проблема альфа-версии RACT RAGUER 4, или если она также проблема с устойчивым React Router 3.
Будущие эксперименты
Вот некоторые другие вещи, которые я хочу проверить с моей настройкой:
- Подходит ли GoogleBot ссылки в асинхронно отображаемых текстовых блоках?
- Могу ли я установить метаги, как Описание Асинхронно с моим реактивным приложением и иметь GoogleBot понять их?
- Сколько времени занимает GoogleBot для ползания на веб-сайту, представленном в реагировании со многими, многие, многие страницы?
Может быть, у вас есть еще несколько идей. Я хотел бы прочитать о них в комментариях!