- HTML Source
- Предоставленный код
- Сравните необработанный HTML с визуализированным HTML
- Unminify
- Google Fetch & Render
Наша команда-партнер Artmisto
Оптимизаторы любят прыгать на подножках. С самого начала развития индустрии SEO-специалисты находили холмы, от которых можно было бы умереть - от дверных проемов до плотности ключевых слов, от PageRank Sculpting до Google Plus.
Один из последних ажиотажей был «предоставлен DOM»; в основном, полностью визуализированная версия веб-страницы со всем выполненным клиентским кодом. Когда Google опубликовал подробности об их веб-сервисе рендеринга В прошлом году некоторые оптимизаторы быстро заявили, что имеют значение только полностью отрисованные страницы. Фактически, некоторые высокопоставленные SEO-специалисты зашли настолько далеко, что заявили, что «источник просмотра мертв» и что отображаемая модель DOM - единственная вещь, на которую должен обратить внимание SEO.
Эти люди были бы неправы, конечно.
Такие прокламации происходят от фундаментального незнания о том, как работают поисковые системы. Да, отображаемый DOM - это то, что Google в конечном итоге будет использовать для индексации содержимого веб-страницы. Но индексатор - это только часть поисковой системы. Есть и другие аспекты поисковой системы, которые так же важны и не обязательно смотрят на визуализированный DOM веб-страницы.
Одним из таких элементов является сканер . Это первая точка контакта между веб-страницей и поисковой системой. И, знаете что, сканер не отображает страницы . Я объяснил разница между сканированием и индексированием раньше, поэтому обязательно прочитайте это.
В настоящее время из-за популярности JavaScript и SEO существует множество умных людей, которые проводят тесты, чтобы точно определить, как размещение контента в JavaScript влияет на сканирование, индексирование и ранжирование. До сих пор мы узнали, что JavaScript может мешать ползать и что индексирование содержимого с поддержкой JS часто задерживается ,
Итак, мы знаем, что сканер видит только необработанный HTML-код страницы. И я подозреваю мы знаем что у Google есть подход к многоуровневой индексации, который сначала использует необработанный HTML-код веб-страницы, прежде чем приступить к визуализации страницы и извлечению содержимого этой версии. Короче говоря, исходный код веб-страницы все еще имеет значение. На самом деле это очень важно.
Я нашел полезным сравнить исходный HTML-код веб-страницы с полностью визуализированной версией. Такое сравнение позволяет мне оценить различия и рассмотреть любые потенциальные проблемы, которые могут возникнуть при сканировании и индексации.
Например, могут быть ссылки на более глубокие страницы, которые видны только после полной визуализации страницы. Эти ссылки не будут видны сканеру, поэтому можно ожидать задержки при сканировании и индексации этих более глубоких страниц.
Или мы можем обнаружить, что фрагмент JavaScript манипулирует DOM и вносит изменения в содержимое страницы. Например, я видел, как плагины комментариев вставляли новые теги заголовка <h1> на страницу, вызывая всевозможные проблемы на странице.
Итак, позвольте мне показать вам, как быстро сравнить исходный HTML-код веб-страницы с полностью отображаемой версией.
HTML Source
Получить исходный код HTML веб-страницы довольно просто: используйте функцию «Просмотр исходного кода» в своем браузере (Ctrl + u в Chrome), чтобы просмотреть исходный код страницы - или щелкните правой кнопкой мыши и выберите «Просмотр исходного кода» - затем скопируйте и вставьте весь код в новый текстовый файл.
Предоставленный код
Извлечение полностью визуализированной версии кода веб-страницы - немного больше работы. В Chrome вы можете открыть DevTools браузера с помощью комбинации клавиш Ctrl + Shift + i или щелкнуть правой кнопкой мыши и выбрать «Проверить элемент».
В этом представлении убедитесь, что вы находитесь на вкладке Элементы. Там щелкните правой кнопкой мыши на открывающем теге <html> кода и выберите « Копировать» > « Копировать externalHTML» .
Затем вы можете вставить это в новый текстовый файл.
С Chrome DevTools вы получаете вычисленную модель DOM в соответствии с вашей версией Chrome, которая может включать манипуляции с кодом из ваших плагинов и, вероятно, будет отличаться от версии Chrome, чем служба веб-рендеринга Google.
Чтобы проанализировать потенциальные проблемы с отображением кода в поиске Google, вам потребуется код из вычисленного DOM, как его видит индексатор Google.
Для этого вы можете использовать Google Инструмент для тестирования богатых результатов , Это единственный инструмент, который в настоящее время отображает веб-страницы так же, как индексатор Google , и имеет кнопку «Просмотреть исходный код», которая позволяет просматривать и копировать полностью отображаемый HTML-код:
Сравните необработанный HTML с визуализированным HTML
Чтобы сравнить две версии кода веб-страницы, я использую Diff Checker , Доступны и другие инструменты, поэтому используйте любой, какой вы пожелаете. Мне нравится Diff Checker, потому что он бесплатный и визуально выделяет различия.
Просто скопируйте две версии в два поля Diff Checker и нажмите кнопку «Найти разницу». Вывод будет выглядеть так:
Во многих случаях вы получите множество бессмысленных различий, таких как удаленные пробелы и косые черты. Чтобы навести порядок, вы можете выполнить поиск и замену текстового файла, в котором вы сохранили необработанный HTML, например, чтобы заменить все вхождения «/>» просто «>». Затем, когда вы снова запустите сравнение, вы получите намного более чистый вывод:
Теперь вы можете легко обнаружить любые значимые различия между двумя версиями и оценить, могут ли эти различия вызвать проблемы при сканировании и индексации.
Это высветит, где JavaScript или другой клиентский код манипулировал содержимым страницы, и позволит вам судить, будут ли эти изменения значительным образом влиять на SEO страницы.
Unminify
Иногда исходный код веб-страницы будет минимизирован, что удаляет все пробелы и вкладки для сохранения байтов. Это приводит к большим стенам текста, которые может быть очень трудно, если не невозможно, проанализировать:
В этом случае я использую unminify.com положить вкладки и пробелы обратно и сделать его легко читаемым фрагментом исходного кода. Это помогает определить проблемы, когда вы используете Diff Checker для сравнения двух версий.
Сравнение двух аккуратно отформатированных фрагментов кода намного проще и позволяет быстро сосредоточиться на областях кода, которые действительно отличаются - это указывает на то, что браузер или фрагмент кода на стороне клиента каким-либо образом манипулировали страницей.
Google Fetch & Render
Важность необработанного HTML-кода веб-страницы для SEO подразумевается самим Google. В функции «Получить из Google» в консоли поиска есть два варианта просмотра веб-страницы:
Эти два параметра подчеркивают различные способы взаимодействия систем Google с веб-страницей:
- Выборка: как сканер видит страницу
- Извлечение и визуализация: как индексатор Google в конечном итоге отобразит страницу
Поскольку сканер Google не полностью отображает веб-страницы, исходный HTML-код будет оставаться важным аспектом любого целостного анализа SEO веб-страницы. Неспособность принять исходный код в учетную запись оставит вас открытым для целого ряда ошибок новичка.
Какие инструменты вы используете для сравнения необработанного HTML и визуализированного кода? Поделитесь своими советами и рекомендациями в комментариях.
Обновление: стоит отметить, что Sitebulb SEO-сканер теперь имеет встроенную функцию, которая позволяет визуально сравнивать необработанный HTML-код веб-страницы и визуализированный DOM.
SEO , технический
Какие инструменты вы используете для сравнения необработанного HTML и визуализированного кода?
