View Source: Почему это все еще имеет значение и как быстро сравнить его с визуализированным DOM

  1. HTML Source
  2. Предоставленный код
  3. Сравните необработанный HTML с визуализированным HTML
  4. Unminify
  5. Google Fetch & Render

Оптимизаторы любят прыгать на подножках. С самого начала развития индустрии 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» .

Там щелкните правой кнопкой мыши на открывающем теге <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 и визуализированного кода?

Номера

Номерной фонд гостиницы насчитывает 173 номера различных категорий.

Забронировать отель можно прямо сейчас: Бронирование онлайн