1. Что такое JavaScript?
2. Как JavaScript используется на веб-странице?
3. JavaScript и SEO
4. Сканирование и рендеринг (JavaScript, HTML, CSS)
5. Как обеспечить, чтобы контент JavaScript был SEO-дружественным?
6. Несколько рекомендаций:

Что такое JavaScript?

5-й по популярности язык программирования в мире inc.com , который используется для программирования (то есть изменения, манипуляции вещами ...) в веб-браузерах и серверах.

Несколько быстрых фактов о JavaScript:

• Это не имеет ничего общего с Java. Это два разных языка ( длинная история ...)
• Первоначально он был разработан для работы в веб-браузерах («рендеринг на стороне клиента») для улучшения работы с HTML и CSS. Поскольку эти программы стали более сложными и ресурсоемкими для обработки всех этих новых вещей, люди обратились к серверному рендерингу, чтобы выполнить всю эту обработку и рендеринг до того, как он попадет в браузер. Однако у этого есть свои преимущества и недостатки, которые мы обсудим. позже в разделе «рекомендации»

Как JavaScript используется на веб-странице?

В общих чертах, веб-страница состоит из этих ингредиентов;

1. HTML, который предоставляет такие элементы, как текст, заголовки, изображения, ссылки.
2. CSS, который форматирует и стилизует эти элементы в разных цветах, позициях.
3. JavaScript, который может использовать HTML и применять стили CSS на основе действий пользователя (см. Результаты следующего продукта / активировать анимацию) или на основе предварительно запрограммированных действий разработчика (изменение изображения слайда через 2 секунды, обновление списков кинотеатров при текущих списках) истекает).

Подумайте, когда вы прокручиваете твиттер и загружаете новые твиты, это JavaScript. Большинство веб-сайтов используют это для загрузки новых продуктов / сообщений в блоге при прокрутке или нажатии кнопки.

Существуют более сложные способы использования JavaScript, такие как веб-приложения, такие как Google Maps, некоторые из которых в основном или полностью зависят от использования JavaScript.

JavaScript и SEO

Прежде чем мы перейдем к отношениям между JavaScript и SEO, мы должны рассмотреть процесс, который должен произойти, чтобы веб-страница попала на страницы результатов поисковой системы. Как Технические оптимизаторы мы проводить ревизии и работать с нашими разработчиками, чтобы этот процесс происходил без проблем:

1. Сканирование: найдите и прочитайте все на своей веб-странице
2. Визуализация: понять, что делают все элементы JavaScript / CSS / HTML
3. Индекс: сохранить все это
4. Ранг: Показать вас где-то на страницах результатов поисковой системы

Все 4 этапа имеют свои собственные уникальные задачи и методы оптимизации, чтобы обеспечить отображение наилучшего возможного результата поиска для пользователя. Однако сейчас мы сосредоточимся на этапах «сканирования» и «рендеринга».

Сканирование и рендеринг (JavaScript, HTML, CSS)

Google в основном заботится об опыте пользователя, поэтому он хочет увидеть, как веб-страница выглядит для пользователя. Когда все функции HTML, CSS и JavaScript загружены, как выглядит эта последняя страница?

Таким образом, для этого Google использует свое программное обеспечение, называемое Googlebot, для «извлечения» страницы, а затем использует службу веб-рендеринга (WRS), которая ее «отображает».

• Рендеринг означает, что вы берете код и элементы со страницы и интерпретируете их в том, что пользователь визуально видит в своем браузере.

Бот (или «сканер» или «паук», как их еще называют) должен находить контент по внутренним ссылкам и уникальным URL-адресам. Иногда они не предоставляются на странице, построенной определенным образом с помощью JavaScript, поэтому вы уже теряете часть проиндексированного контента и вносите свой вклад в рейтинг в Google.

Google WRS затем пытается воспроизвести то, как пользователь может видеть страницу, отобразив ее и отметив, запретили ли вы Google просматривать определенные части страницы, например, заблокировали ли вы библиотеки JavaScript или другие ресурсы, влияющие на окончательную версию страницы. выглядит.

Стоит отметить, что Google не сканирует части страницы JavaScript при первом запуске. Это действие откладывается на более позднее время, когда у него есть свободные ресурсы, так как этот процесс требует гораздо больше ресурсов, чем рендеринг простой страницы HTML + CSS.

Если вернуться к тому процессу, как Google сканирует и индексирует ваш сайт, если на вашем сайте есть JavaScript, Google будет использовать DOM на этапе «рендеринга».

• DOM (объектная модель документа) представляет собой полную картину кода, размещенного на веб-странице. Если ваш контент динамический (он опирается на HTML, CSS и JavaScript), то при щелчке правой кнопкой мыши по «представлению источника» будет показана только часть кода, а не биты динамической функциональности. Google, а также Bing и Baidu используют DOM, чтобы выяснить, как выглядит конечная страница и как она работает при извлечении и рендеринге.

Вот эти этапы еще раз, чтобы увидеть, где подходит это действие:

1. Сканирование: найдите и прочитайте все на своей веб-странице
2. Визуализация: использует DOM, чтобы понять, что делают элементы JavaScript / CSS / HTML
3. Индекс: сохранить все это
4. Ранг: Показать вас где-то на страницах результатов поисковой системы

Хотя Google стал лучше обрабатывать страницы, чтобы выяснить, как они выглядят для людей, и использовать все функции JavaScript, управляющие контентом, текущая версия WRS, которую он использует, основана на более старой версии Google Chrome, Chrome 41. Это было выпущено в 2015 году. последняя версия - Chrome 67, поэтому она немного устарела относительно скорости обновления JavaScript. Например, в более новых версиях JavaScript существуют определенные функции и соглашения о кодировании, которые не поддерживаются в этой более ранней версии Chrome.

Как обеспечить, чтобы контент JavaScript был SEO-дружественным?

При создании веб-сайтов веб-разработчики будут сосредоточены на создании максимально возможного пользовательского опыта, обеспечивающего высокую доступность, функциональность и скорость. Пользователи и Google требуют этого, поэтому проекты веб-разработки, конечно же, должны руководствоваться этой целью. Но параллельно с этим или непосредственно после этого мы рекомендуем провести некоторую диагностику и оптимизацию, чтобы гарантировать, что Google может сканировать, отображать и индексировать контент, обеспечивая максимально возможный потенциал SEO-оптимизации сайта.

Несколько рекомендаций:

1. Зайдите в раздел «заблокированных ресурсов» консоли поиска Google, чтобы узнать, что он рекомендует вам раскрыть, и подтвердите, что это функции, которые влияют на то, как контент отображается пользователю:
   • Либо удалите оператор disallow в вашем файле robots.txt для всей папки, содержащей сценарии, либо, если некоторые в этой папке должны оставаться скрытыми, «запретите» папку и «разрешите» определенные файлы. Прежде всего, если вы используете любой JavaScript, который динамически изменяет содержимое страницы (например, нажимает на следующую страницу, открывает содержимое, изменяет заголовок и мета-описание), не блокируйте ресурсы для сценариев, которые управляют этой функцией, в файле robots.txt.
2. Убедитесь, что все ваши внутренние ссылки написаны в HTML-теге «A» (например, <a href= Организации/another-pageveloper>…), так как Google может их обязательно сканировать, что позволит ему затем пройти путь по этим ссылкам через сайт. и откройте для себя все существующие страницы. Если вы используете события JavaScript «onclick», чтобы перевести пользователя на новую страницу, Google будет непросто идентифицировать их как ссылки (например, onclick = »myFunction ()»>).
3. Если ваш веб-сайт генерирует новый контент, например, нажимает на следующую страницу или загружает больше продуктов, например, но не меняет URL, тогда это проблема, поскольку Google не сможет увидеть этот новый контент.
   • Просто быстро, если вы задумывались об использовании фрагментов идентификаторов с хэш-ударом (схема сканирования AJAX «#!», Например «thing.com/cars.php#!audi) это больше не будет поддерживаться со второго квартала 2018 года
   • Подумайте о настройке отступления в HTML для таких функций, как «читать дальше» или «загрузить больше продуктов», чтобы при отключении JavaScript в браузере кнопки представляли собой HTML с тегами <a href=gotiuted>, следующие страницы были разбиты на страницы по новой URL, это может быть проще всего было решить этот тип проблемы. Смотрите некоторый ресурс по этому
   • Другим решением для этого, в качестве альтернативы вышеприведенному, является создание чистых URL-адресов для того, чтобы при изменении содержимого на одной странице, чтобы Google и Bing могли их сканировать, вы можете сделать это с помощью «Pushstate History API», увидеть некоторый ресурс по этому
4. Если вы выполняете много скриптов на стороне клиента и испытываете затруднения при их рендеринге в Google, рассмотрите возможность предварительного рендеринга или рендеринга на стороне сервера:
   • Предварительный рендеринг: это когда кешированная версия страницы обслуживается, снимок, если хотите. Это немного лучше, чем обслуживание версии DOM, поскольку вы делаете шаг рендеринга. Одним из недостатков этого метода может быть то, что данные могут быть устаревшими, что является проблемой, если у вас есть страницы, которые необходимо постоянно обновлять. Другим недостатком является то, что иногда вы могли заметить изменения в последний момент в стиле содержимого при загрузке (цвет, формат, положение меняется внезапно). Проверьте этот ресурс на предварительный рендеринг для дальнейшего чтения.
   • Рендеринг на стороне сервера: буквально это звучит так, сервер обо всем позаботится, отрисовывая все перед отправкой страницы в браузер. Это хорошо работает для SEO, так как вы можете быть уверены, что все элементы JavaScript отображаются и возвращаются с сервера. Вы также в конечном итоге немного быстрее начальной загрузки страницы. Однако вы можете упустить некоторые из богатых функций, которые предоставляет рендеринг на стороне клиента.
   • Объедините оба: вы могли бы рассмотреть возможность использования комбинации обоих, чтобы использовать преимущества скорости, SEO и богатой функциональности. Вот хороший пост в блоге на сравнение обоих методов и дальнейшего чтения.

Тестирование вашего SEO-дружественного JavaScript

Существует несколько способов диагностики и тестирования вашего кода, чтобы обеспечить максимальную индексацию его кода:

Бесплатные инструменты:

1. Используйте инструмент извлечения и рендеринга Google Search Console - отметит, загружаются ли страницы полностью или частично с ошибками. Одним из недостатков этого инструмента является то, что тест может позволить более 5 секунд проверять выборку и отображать страницу, что не помогает, если вы тестируете, насколько быстро вы можете сократить этот процесс (в идеале менее 5 секунд).
2. Проверьте, совместим ли ваш JavaScript с Chrome 41 (помните, Google использует эту версию Chrome в качестве справочного материала для проверки того, как ваш JavaScript отображается для пользователей). Вы можете использовать этот инструмент для тестирования, если ваши функции поддерживаются в Chrome 41 и будут сравнивать совместимость с последними версиями браузера: https://caniuse.com/#compare=chrome+41
3. Отладка вашего сайта с помощью Инструмент Rich Results - этот инструмент отображает ваши страницы и выявляет окончательный код с любыми ошибками
4. Используйте инструменты разработчика Chrome для тестирования JavaScript (ошибки и время загрузки страницы / скрипта) - это фантастическое руководство рассказывает вам через это

Платные инструменты:

1. DeepCawl Теперь он может сканировать и отображать JavaScript на вашем сайте (они взимают ежемесячную плату за свой инструмент, эта функция является дополнением). Функция работает довольно хорошо, так как я протестировал это от бета-версии до финальной версии Live увидеть их руководство
2. Screaming Frog также имеет эту функцию, инструмент имеет разовую плату за пользователя, и эта функция включена - см. это руководство

Если у вас есть веб-сайт, который может потерять видимость SEO из-за неполной индексации контента или из-за проблем с юзабилити, связаться сегодня чтобы увидеть, как наши Техническая команда SEO может помочь.

Похожие

Комментарии