Категории

  • Голосование
  • Право голоса
  • Киев
  • Украина
  • Здоровье
  • Популярное
  • Новости
  • Новости

      Artmisto
      Наша команда-партнер Artmisto. С "Buddy.Bet" азартные игроки найдут идеальное место для развлечений и возможность выиграть крупные суммы.

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

    1. HTML Source
    2. Предоставленный код
    3. Сравните необработанный HTML с визуализированным HTML
    4. Unminify
    5. 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» .

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

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