1. Как работают инфраструктуры JavaScripts.
2. Google и JavaScript
3. Позиционирование сайта с использованием JavaScript Framework
4. 1 / Аудит вашего сайта
5. 2 / Как сделать эти сайты оптимизированными для SEO?

В начале марта SEOCamp провел у Седрика Рамбо и Филиппа Йонне конференцию, посвященную SEO-подходу к использованию сайтов с полноценным JavaScript.
Во время этой конференции они объяснили, как поисковые системы работают с этими сайтами, и, в частности, как можно позиционировать себя с этой технологией.
Во-первых, несмотря на сложность и несовместимость с движками, популярность JavaScript-фреймворков продолжает расти. Эти предопределенные функции имеют много преимуществ:

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

Но как насчет SEO?

Как работают инфраструктуры JavaScripts.

В отличие от традиционного сайта, который следует модели взаимодействия клиент-сервер, приложение, основанное на JavaScript (Ajax и другие веб-приложения), следует модели «рендеринга на стороне клиента», а именно:

Первый запрос загружает макет страницы, CSS и JavaScript. Часто некоторые или весь контент не загружается. Затем JavaScript отправляет второй запрос на сервер, который отвечает в JSON, чтобы наконец сгенерировать соответствующий HTML.

Рендеринг на стороне клиента (под Ajax)

Фреймворки JavaScript позволяют создавать веб-приложения, доступные через одну веб-страницу, это называется SPA (одностраничное приложение), например, для Twitter, которое представляет собой мобильное приложение и рабочий стол.

Однако эта модель не совместима с SEO, поскольку роботы отправляют сигналы, связанные с несколькими страницами.

Версия архитектуры SSR поддерживает сторону сервера представления, то есть пользователь получает полную страницу в своем браузере, HTML-код, безусловно, генерируется в Javascript, но сервером, а не браузером.

Архитектура SSR (рендеринг на стороне сервера)

Сегодня на стороне клиента 4 решения конкурируют с BackBone, Knockout.JS, Ember.JS и AngularJS, которые ведет Google.

угловой JS является самым популярным фреймворком JS.

Эта модель развития поднимает несколько проблем.

Задача № 1 :

Чтобы сканировать полный JS-сайт, бот загружает HTML-код и анализирует содержимое в коде.

Содержимое в JS и Ajax игнорируется в большинстве случаев, за исключением Googlebot с его безголовым браузером.

Задача № 2 :

Что индексировать? Содержание меняется регулярно в зависимости от взаимодействия.

Какие сигналы? Как анализировать ссылки и содержание страницы?

К чему прикрепить эти сигналы? Если понятие страницы, связанной с URL-адресом, исчезло, как продолжить использовать текущий алгоритм?

Задача № 3 :

Представление сайта в полной версии AngularJS возможно только в том случае, если JS активирован, в противном случае сайт просто невидим. Для поисковых систем также трудно получить доступ к содержимому этих сайтов, чтобы проиндексировать их, поскольку исходный код отображает только переменные.

Когда JS активирован в браузере.

Когда JS отключен

JS всего тела

Поэтому неудивительно видеть значительное влияние на SEO видимость этих сайтов ...

Падение в видимости

Google и JavaScript

Сегодня мы знаем, что Google интерпретирует JS, который генерирует мета-теги заголовка, мета-описания, робота: тест в поддержку ,

• Google включает файлы CSS и JS для идентификации страницы, удобной для мобильных устройств, или для обнаружения скрытых элементов.
• Google знает, как читать события Onclick,
• Поэтому Google может отслеживать динамически генерируемый контент в JS, чтобы проиндексировать их.

Но думать, что Google умеет читать все неправильно. В случае Ajax, который не требует загрузки событий, движок не обнаруживает никакого сигнала, чтобы узнать, как запустить Ajax.

Чтобы лучше сканировать и индексировать Ajax, Google предложил в 2009 году методику Hashbang (#!). Технически, когда робот встречает URL-адрес с хэш-бангом, он сканирует эту страницу и заменяет хэш-банг на _escaped_fragment_, а затем индексирует страницу в ее первоначальном виде. Но сегодня эта техника устарела, потому что Google утверждает, что может читать контент, сгенерированный в Ajax ...

Метод pushstate, предложенный История IP HTML5 является более надежным решением, поскольку URL-адреса динамической навигации остаются прежними. Он также имеет преимущество, заключающееся в возможности навигации, даже когда пользователь отключает JavaScript, поскольку он включен в HTML5. Конкретно, pushstate () изменяет путь URL-адреса, который отображается в адресной строке пользователя. SEO идеален, движки могут читать эти URL и отличать их друг от друга.

Вы должны знать, что Google также рекомендует использовать Pushstate, чтобы оптимизировать SEO-прокрутку.

Позиционирование сайта с использованием JavaScript Framework

Сканирование и индексация сайта, созданного с помощью JavaScript Framework, возможны, но то, что нас интересует, будет позиционирование наших страниц.

1 / Аудит вашего сайта

Во-первых, если при тесте Fetch as Google не удается сделать страницу, как ожидалось. Есть проблема.

Решение заключается в безголовом браузере: «безголовый» браузер - это программная среда командной строки с API-интерфейсом JavaScript, которая может отображать полную HTML-страницу, используя HTML, CSS и JS точно так же, как браузер. Мы говорим о безголовом, потому что он не имеет GUI (пользовательский интерфейс).

Мы можем смоделировать все, что происходит в браузере, и, следовательно, протестировать коды, сгенерированные Framework JS и Ajax.

Примечание. Этот тип сканирования создает «ложные посещения» в инструментах веб-аналитики (поскольку они выполняют все сценарии без исключения).

Phantom JS и Casper JS - безголовые браузеры, последние из которых отличаются тем, что являются скребками.

Вы также можете проверить с Screaming Frog в " Сканирование JavaScript ».

Screaming Frog - это SEO-ориентированный сканер, недавно у него появился режим безголового браузера на основе PhantomJS. Таким образом, он может сканировать полный угловой сайт.

Проверьте JS, CSS и изображения в конфигурации паука

Настройте представление JS, пользовательский агент и размер экрана

С января 2017 Botify также предлагает такую ​​возможность.

Логотип Botify

2 / Как сделать эти сайты оптимизированными для SEO?

Решение 1. Кодируйте по-другому с помощью стратегии прогрессивного улучшения.

Принцип прогрессивного улучшения заключается в построении сайта в 3 слоя:

• Контент хранится в HTML-коде (контент и функции доступны всем).
• Форматирование определяется внешними каскадными таблицами стилей (CSS).
• Функции, написанные на внешнем скрипте, таком как JavaScript.

Решение 2. Создайте снимки HTML самостоятельно. Этот метод рекомендован Google для Ajax.

Таким образом, код JS выполняется через серверный браузер без заголовка, чтобы сгенерировать HTML, созданный кодом JS.

Этот код «захватывается» перед отправкой, как обычная HTML-страница, в браузер пользователя.

Тем не менее, этот метод лишает интереса «рендеринг на стороне клиента», страница становится статичной.

Зачастую арбитраж должен посылать снимки только ботам поисковых систем.

Решение 3. Используйте сторонний прокси-сервер. Инструменты предварительного рендеринга позволяют легко сканировать наш сайт. Сервер предварительной визуализации позволяет предварительно визуализировать ваши статические страницы, как только инструмент обнаружит, что сканер заходит на ваш сайт, он отобразит окончательную статическую HTML-визуализацию.

Основными сторонними инструментами предварительного заказа являются: PreRender , SEO 4 Ajax (Cocorico!) Brombone ,

Будьте осторожны, эта техника может выглядеть как маскировка, даже если это не так.

Кроме того, серверы представлений используют устаревший метод для обеспечения возможности сканирования Ajax. Знать:

• Либо метод избежания фрагментов с помощью хэш-взрыва (как видно ранее).
• Либо метод оставленных фрагментов с метатегом: <meta name = "фрагмент" content = "!">

Внимание, этот метод в HTML5, использующий метод pushstate (), так же устарел, как и другой. На данный момент этот метод работает даже на разных поисковых системах. Но до каких пор?

JavaScript Framework: следующее поколение

Будущее за фреймворками JavaScript, «изоморфными», способными к гибридному воспроизведению (на стороне сервера и / или клиента).

С ReactJS или HapiJS мы можем сгенерировать HTML перед отправкой в ​​браузер. Становится возможным создавать веб-сайты с JS Framework без каких-либо проблем с SEO.

Однако, плохо используемые, эти JS Frameworks последнего поколения могут создавать те же проблемы, что и те, которые испытывались в первом поколении.

Разработка в JS Framework - это головоломка, которая не является неразрешимой, но требует сильных технических навыков со стороны SEO и разработчиков.

И в любом случае, он зарезервирован для ситуаций, когда SEO-трафик не является стратегическим для сайта:

Могут быть созданы сайты, созданные с помощью этих сканируемых и индексируемых технологий.

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

Похожие

Комментарии