Случай серверного рендеринга (SSR) и невозможность сканирования роботом Googlebot
Была среда. Четверг и пятница обещали быть солнечными - идеальные пляжные дни, но потом, конечно ... Наш клиент обнаружил ошибку, как и в оптимальные пляжные дни. Проблема - Google не индексировал определенные страницы.
Прежде чем мы продолжим, следует отметить несколько моментов:
- Страницы корректно загружались в браузере
- Страницы возвращали роботу Googlebot ошибку сервера 5xx
- Мы понятия не имели, что делать
Как и во всем, что вы не представляете, что делать, мы начали швырять дерьмо в стену и надеяться, что что-то прилипнет.
Первым делом нужно было проверить, не возникали ли у других поисковых роботов такая же проблема. Я попробовал этот от Роберта Хаммонда (спасибо за бесплатный онлайн-сканер), который оказался довольно полезным. Он показал мне, что проблема возникла только у Googlebot.
Так в чем же была настоящая ошибка? Нашел еще один полезный ресурс Websniffer, который тоже дает заголовок сделанного запроса.
Прежде чем мы забегаем вперед, позвольте мне рассказать вам об архитектуре веб-сайта:
- Мы используем фреймворк Vue для веб-интерфейса.
- Nuxt используется для рендеринга на стороне сервера (SSR)
- AWS используется для размещения сайта.
- Elastic Beanstalk обрабатывает извлечение ресурсов AWS для запуска и работы веб-сайта (серверы, балансировщики нагрузки и т. Д.)
- CloudFront кэширует веб-сайт в периферийных местоположениях, чтобы пользователи могли быстрее получить доступ к веб-сайту из разных местоположений.
Итак, вернемся к шапке.
Как видно из вышеизложенного, я был убежден, что на самом деле проблема в CloudFront. Первоначальная гипотеза заключалась в том, что робот Google обнаружил пограничное местоположение CloudFront, на котором были кэшированы страницы с 500 адресами.
Короче говоря, я был неправ. На начальном этапе своей карьеры я начал понимать: 9 из 10 случаев CloudFront - это НЕ проблема.
Благодаря помощи коллеги по прозвищу Бэйн (да, он похож на заклятого врага Бэтмена). Он указал мне на тот факт, что страница не была обнаружена роботом Googlebot при использовании URL-адреса исходного экземпляра Elastic Beanstalk, что исключает проблему CloudFront.
(Бэйн также показал мне еще один действительно крутой ресурс, который, вероятно, является единственным ресурсом, который вам может понадобиться при тестировании проблем с роботом Google - спасибо техническому SEO за бесплатный ресурс.)
Итак, если проблема не в CloudFront, ТО ЧТО ЕСТЬ !?
Снова Бэйн пришел на помощь (да, Бэтмен, да ладно тебе, братан) и решил взглянуть на журналы Elastic Beanstalk. Как обычно, оглядываясь назад, я понял, что это было наиболее логичным решением - ретроспективный взгляд всегда равен 20/20.
3:08:56 ERROR Cannot read property 'map' of undefined at a.checkAndChangeBreadcrumbString (components/Common/Truncation.vue:4:0) at a.checkAndChangeBreadcrumbString (node_modules/vue/dist/vue.runtime.common.prod.js:6:29698) at a.<anonymous> (components/Common/Truncation.vue:4:0) at a.t._render (node_modules/vue/dist/vue.runtime.common.prod.js:6:35273) at node_modules/vue-server-renderer/build.prod.js:1:70663 at Yi (node_modules/vue-server-renderer/build.prod.js:1:67227) at io (node_modules/vue-server-renderer/build.prod.js:1:70639) at ro (node_modules/vue-server-renderer/build.prod.js:1:70270) at eo (node_modules/vue-server-renderer/build.prod.js:1:67517) at node_modules/vue-server-renderer/build.prod.js:1:70737
АГА! Ошибка была в функции checkAndChangeBreadcrumbString. Ах да, и угадайте, кто был виноват в Git… Ага… это был я.
Мммммм, я почти почувствовал запах раствора.
checkAndChangeBreadcrumbString () {
return this.post.breadcrumbs.map(breadcrumb =>
breadcrumb.name === 'Why go'
? { ...breadcrumb, name: 'Tours & Safaris' }
: breadcrumb
)
},
CheckAndChangeBreadcrumbString предназначалась для поиска любых хлебных крошек с названием Why Go и изменения его на Tours & Safaris. Также важно отметить, что это было вычисляемое свойство. Это означает, что функция запускается при начальной загрузке, а затем ожидает изменений в ее свойствах перед повторным запуском.
Однако роковой ошибкой было предположение, что this.post.breadcrumbs был обработан. Поскольку this.post на самом деле представляет собой данные, вызываемые из API, он не существует до завершения запроса API.
Возникло состояние гонки: при загрузке сайта роботом Googlebot не было достаточно времени для загрузки this.post, поэтому он возвратил ошибку 5xx.
Итак, исправление было таким:
checkAndChangeBreadcrumbString () {
if (this.post.breadcrumbs && this.post.breadcrumbs.length) {
return this.post.breadcrumbs.map(breadcrumb =>
breadcrumb.name === 'Why go'
? { ...breadcrumb, name: 'Tours & Safaris' }
: breadcrumb
)
}
return []
},
Добавление if (this.post.breadcrumbs && this.post.breadcrumbs.length) решило проблему, поскольку теперь функция запускается только после того, как this.post.breadcrumbs существует и имеет длину.
Теперь робот Googlebot наконец-то смог просканировать страницу, потому что не было состояния гонки, приводящего к неопределенному объекту. Данные просто загружались, когда были готовы. Страница была довольна, и робот Google был доволен, поэтому мы были довольны, и клиент был доволен, и все были довольны ... КОНЕЦ (но не совсем потому, что #reflection)
Уроки, которые я усвоил:
- Регулярно проверяйте ошибки поиска в поисковой консоли Google, чтобы обнаруживать проблемы на раннем этапе
- Загрузка страницы в браузере НЕ означает, что робот Googlebot может ее проиндексировать.
- Проблема, вероятно, не в CloudFront, хотя может показаться, что это так.
- Вы, вероятно, виноваты (ну, может быть, это относится только ко мне)
- Просмотр журналов - это способ решить проблемы, потому что вы узнаете, в чем проблема на самом деле
- Вы не можете предполагать, что данные всегда будут доступны, когда робот Googlebot сначала сканирует сайт.
- ОЗНАКОМИТЬСЯ ВСЕГДА 20/20
- Бэйн ›Бэтмен
- Все никогда не бывают счастливы
