Мы все были там раньше. У вас, как у SEO-специалиста, есть рекомендация для вашего сайта, но вам нужен разработчик для ее реализации.
Это очень распространенный сценарий при работе по модели агентства и работе с клиентами в качестве консультанта; мы редко вносим реальные изменения сами.
На этом этапе вы, надеюсь, увидите, как ваши рекомендации будут развернуты командой разработчиков, а в других случаях вам просто придется ждать в очереди, пока не подойдет ваша очередь! Но допустим, вы один из счастливчиков, которые могут быстро получить рекомендации. После того как ваш разработчик скажет, что они развернули ваши рекомендации, как вы убедитесь, что это было сделано правильно?
Помимо запроса устного подтверждения того, что работа выполнена, вы можете взять ее в свои руки и убедиться в этом самостоятельно!
Проверка стандартных обновлений, ориентированных на SEO, обычно довольно проста. Если клиент обновляет копию страницы, вы можете просто просмотреть страницу. Если они обновляют заголовок или описание страницы, вы можете использовать один из миллионов инструментов, доступных в Интернете, который показывает вам основную информацию о странице, интересную для оптимизатора.
Но что, если у вас нет доступа к этим инструментам? Или инструменты не работают, или результат, который они дают, кажется вам неправильным?
Как бы вы проверили статус страницы, просто используя веб-браузер?
Использование веб-браузера для проверки обновлений SEO
Почти каждый современный веб-браузер имеет встроенную функциональность, которая позволяет вам заглянуть внутрь веб-страницы. В Google Chrome этим инструментом является инструмент проверки. Этот инструмент открывает другое окно браузера, в котором показано много вещей, связанных с просматриваемой веб-страницей, но, что наиболее важно для нас, он показывает нам DOM (объектную модель документа).
Используя этот инструмент и просматривая DOM, мы можем видеть весь HTML-код страницы, что позволяет нам видеть, что на самом деле находится на странице, и не полагаться на инструменты, которые не всегда точны на 100%.
Давайте рассмотрим просмотр DOM для seerinteractive.com.
Следующие шаги покажут DOM веб-страницы:
- Откройте веб-страницу, щелкните правой кнопкой мыши где-нибудь на странице и выберите «Проверить».
- Появится всплывающее окно, показывающее DOM страницы, а также множество других вкладок, которые позволяют вам просматривать просматриваемую страницу.
- Используя это окно, вы можете лучше понять, что может видеть бот, в сочетании с функцией «viewsource:» вы можете получить отличное представление о том, что видит Google.
Итак, как это полезно? Недавно у нас возникла проблема, когда нам нужно было обновить метаданные сайта в масштабе, но у нас не было возможности сделать это программно или вручную. Для этого потребовалось бы более 1000 страниц с тегами, которые должны быть жестко запрограммированы человеком. Это было серьезной утечкой ресурсов для клиента, чего они хотели избежать; полностью понятно.
Они попытались изменить теги с помощью JavaScript в браузере пользователя, чтобы использовать код, который у них уже был. На практике это означает, что страница будет загружать первоначальный HTML-код с замещающим заголовком, описанием и каноническим тегом, а затем сценарий JavaScript изменит метаданные на странице после запуска.
При первоначальном осмотре страницы, просто просмотрев ее в обычном браузере, заголовок страницы выглядел правильно, потому что JS работает настолько быстро, что необходимые элементы очень быстро обновляются. Однако мы заметили, что различные SEO-инструменты, с помощью которых мы запускали страницу, сообщали о различных результатах, в том числе:
- Заголовок страницы не сообщается
- Заголовок страницы будет замещающим заголовком
- Название страницы будет правильным
Конечно, это не идеально для SEO. Мы хотим, чтобы метаданные страницы были правильными, когда страница доставляется пользователю и когда ее сканируют боты, что обычно означает, что для исправления ситуации не требуется дополнительный JavaScript. Даже одна или две секунды между загрузкой страницы и исправлением Javascript — это слишком долго, когда дело доходит до сканирования сайта ботами.
Это не было очевидно при первоначальном осмотре — это довольно редкая проблема, которую вы можете понять, только столкнувшись с ней в первый раз. Визуальные проверки страницы выглядели нормально, и инструменты не давали нам последовательного ответа. На данный момент пришло время не полагаться на какие-либо внешние инструменты и просто погрузиться в код страницы.
Используя панель проверки, мы смогли точно увидеть, что и когда происходит в процессе загрузки.
Этот дополнительный уровень понимания и способность к обеспечению качества позволили нам выявить проблему с тем, как были развернуты наши рекомендации, разработать план и дать отзыв разработчикам, чтобы они могли устранить проблему. Без проверки этих изменений, помимо визуальной проверки, мы могли бы не заметить, что неправильные метаданные сканировались, пока не продвинулись намного дальше.
Советы по использованию Chrome Inspect для проверки исправлений SEO
Вот несколько распространенных случаев использования, когда вы можете рассмотреть возможность погружения в код страницы и проверки того, что все так, как должно быть.
Проверка метаданных
- Откройте нужную веб-страницу, щелкните правой кнопкой мыши недоступную для щелчка область веб-страницы и выберите «Проверить». Когда откроется окно, щелкните вкладку «Элементы», и вы увидите HTML-код страницы.
- Отсюда вы можете нажать Ctrl + F, чтобы вызвать панель поиска. Используйте эту панель, чтобы найти метаэлементы, которые вы хотите проверить.
- Для заголовков страниц вы можете выполнить поиск «
- Как только вы найдете то, что ищете, убедитесь, что это действительно правильно.
Проверка UX/визуальных элементов
Вы можете проверить любой UX или визуальный элемент на странице, щелкнув правой кнопкой мыши по этому элементу и выбрав «Проверить». Инструменты разработчика Chrome снова появятся с элементом, который вы щелкнули правой кнопкой мыши, выделенным в DOM.
Проверка Google Analytics или Диспетчера тегов Google на странице с помощью Chrome Dev Tools
Как и в случае с другими метаэлементами, нажмите на неактивную часть страницы, чтобы открыть инструменты dev chrome.
Найдите в dom «analytics.js», «ua-» или «gtm» или другой фрагмент кода, относящийся к вашему пакету аналитики, который может быть на странице.
Завершение
Мы только что коснулись того, что вы можете делать с инструментами Chrome Dev и DOM. Отсюда вы можете полностью изучить веб-страницу вплоть до очень низкого уровня. Итак, идите вперед, исследуйте и проверяйте!
