Технический SEO для Angular JS и других сайтов JavaScript

1. Цель веба в Javascript - улучшить пользовательский опыт.
2. Могут ли поисковые системы / Google сканировать Javascript?
3. Что говорят тесты на ползание?
4. Что говорит Google
5. Каркасы для веб-сайтов в JavaScript
6. Эффективность отслеживания и заблокированные ресурсы
7. Основы ползания JavaScript
8. Какой процесс выполняет Googlebot Javascript?
9. Безголовые браузеры (браузеры без заголовка)
10. Вышеуказанный процесс также является способом аудита сети в Javascript.
11. Важность отслеживания событий (и решения проблем SEO с Angular JS)
12. Анализ событий загрузки для SEO
13. Анализ пользовательских событий для SEO
14. Сеть в JavaScript не должна плохо позиционироваться в SEO

Переход к сканированию и индексации Javascript, несомненно, является одной из самых больших проблем, с которыми технический SEO столкнулся в последние годы, но правда в том, что об этом не так много говорят, и я, например, Я взял на себя обязательство создать некоторый контент о нем. Обычно, когда SEO впервые сталкивается с сайтом в Angular JS, первое, что он испытывает, - это растерянность, которая позже уступает место холодному поту, который спускается по его лбу и превращается в панику.

Представьте себе, что автомобиль гудит со скоростью 300 км / час (или 0,8 секунды нагрузки), поднимает капот и видите, что внутри ничего нет.

Если вы пришли сюда через поиск ... Добро пожаловать в новый кошмар, спасибо Google

Эта статья может быть немного трудной для тех, кто не знаком с работой и логикой Javascript, но я был не очень знаком не так давно, поэтому единственное, что я хочу здесь, это установить структуру, из которой В нескольких статьях я буду разрабатывать все технические аспекты, которые необходимо учитывать.

Цель веба в Javascript - улучшить пользовательский опыт.

В конце концов, то, что мы собираемся достичь с помощью веб-сайта в Angular JS (или другого фреймворка), это иметь нагрузку и опыт использования Интернета, брутальные, на 100% адаптированные для мобильного опыта. Мы должны поощрять программистов к запуску проекта с соответствующей документацией и рекомендациями, чтобы была возможность выполнить переход на Angular JS эффективным способом, не теряя при этом трафик. Тем не менее, у нас есть сложная часть; получить сеть, запрограммированную с поведением, которое исторически поисковая система не могла решить, ранки хорошо.

Могут ли поисковые системы / Google сканировать Javascript?

Я знаю это, да .

Однако это очень опасно, любой дизайнер или программист, который читает этот ответ, рекомендуется делать это без предварительного понимания нюансов ... Google сообщил, что он способен сканировать и индексировать код Javascript, однако дверь остается открытой, говоря, что у нее есть некоторые исключения и ограничения. В конце концов, сканер Google не так обучен сканированию Javascript, как HTML. Весьма вероятно, что есть много фрагментов сети, которые вообще не работают. Поэтому мы должны провести для каждого из различных экранов в Интернете технический аудит SEO для веб-сайтов в Javascript или Angular (извините за mazacote, но вот ссылка на новую статью вкратце)

Важно помнить, что остальные боты crawleo, как Baidu, Bing или социальные боты, в основном не сканируют Javascript. И из тех, кто это делает, никто не сравнится с Google по своим возможностям.

Что говорят тесты на ползание?

Заигрывая с Google, мы можем найти много статьи, которые показывают блестящие результаты в гусеничных тестах. Если мы прочтем любую из этих статей, у нас может возникнуть ложное чувство уверенности в том, что «все будет хорошо» . Лично я бы никогда не принял ни один из этих тестов как категорическую демонстрацию способности Google эффективно интерпретировать содержимое Javascript. Google индексирует контент, обслуживаемый через Javascript, но иногда нет, и я до сих пор не нашел сообщений, посвященных тому, почему Google не индексирует что-то , кроме конкретных вещей на форуме веб-мастеров.

Весьма вероятно, что наш веб-сайт не работает точно так же, как веб-сайты, используемые для тестов, поэтому я рекомендовал бы сначала внести изменения в набор экранов, прежде чем запускать его по всей сети, для этого минимизировать риски.

Что говорит Google

Если мы зайдем в блог Google и прочитаем любой пост о сканировании javascript, они скажут нам, что бот Google полностью выложился. Он не лжет нам, но отказ от ответственности не в том, что они выделяют их жирным шрифтом (это очень хорошо).

В итоге: Google говорит, что «они обычно способны отображать и понимать весь контент в Javascript, и что вы поощряете их делать прыжок»

Если мы перевернем это ... «Обычно» означает, что они не могут понять или воспроизвести весь контент, который зависит от Javascript .

Каркасы для веб-сайтов в JavaScript

Обычно SEO рассматривается в Javascript, комментируя фреймворки, которые работают лучше всего ... Вот как любая дискуссия сравнивает WordPress с Drupal или любой другой CMS: какая из них дольше? Какой из них нравится Google больше всего?

Вопросы, которые мы должны задать себе, чтобы решить для одного или другого, такие же, как мы должны задать себе, когда мы собираемся выбрать CMS:

• С кем легче работать?
• Какие функции уже оптимизированы?

Однако все Javascript Framework могут быть оптимизированы для SEO, как CMS. В случае CMS важно то, что появляется в HTML, а не то, какой плагин вы для него использовали; с точки зрения индексации и эффективности crawleo в JavaScript Frameworks, важно то, какой контент отображается в событии load и какие у нас есть возможности . (позже мы прокомментируем)

Эффективность отслеживания и заблокированные ресурсы

Анализировать (анализировать) контент, для которого требуется браузер без графического интерфейса и который также выполняет и использует Javascript, требуется больше ресурсов, чем для поиска HTML-кода; от больше времени зарядки до процессора, или даже потребления электроэнергии на самом деле. Поэтому сканирование страниц, смонтированных в Javascript (например, с помощью Screaming Frog), отнимет у нас больше времени, и это повлияет на индексирование. По сути, поисковые системы полагаются на более традиционные методы отслеживания для поддержки JIT, основных и других крупномасштабных функций, что позволяет более или менее гибко перемещаться по этому типу сети.

Веб-сайты в Angular JS или Javascript в целом отлично подходят для скорости загрузки, UX и в целом для пользователя, однако нам следует уяснить, что если мы ищем быструю индексацию, глубокое сканирование или иметь дело с проблемами эффективности (дублированное содержимое, параметры ...), Javascript не будет нашим лучшим другом. Тем не менее, мы можем положиться на инструменты предварительного рендеринга, как prerender.io «облегчить» эти проблемы.

Основы ползания JavaScript

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

Какой процесс выполняет Googlebot Javascript?

Это упрощенно и, как правило, то, что происходит, когда браузер (или Googlebot Javascript) делает запрос к контенту, отображаемому с помощью Javascript:

1. Первоначальный запрос: навигатор (и Javascript Googlebot) выполняет GET для HTML и связанных с ним файлов.
2. Рендеринг DOM: браузер (и Googlebot Javascript) начинают рендеринг DOM ( Объектная модель документа ); DOM - это имя, данное браузером (поисковым ботом) содержимому страницы, а затем интерпретировать его и превратить в нечто визуальное.
3. Загрузка DOM: при работе на странице браузер (или поисковый бот) инициирует события, одним из которых является DOMContentLoaded. Это событие означает, что исходный HTML-документ был загружен и проанализирован. По сути, браузер разрешил и загрузил все, и он готов к загрузке Javascript на странице.
4. Javascript выполняет изменения: после выполнения DOMContentLoaded Javascript может вносить изменения в страницу; начать добавление, удаление или изменение содержимого в исходном HTML. Вы можете сравнить сделанные вами изменения, сравнив содержимое, которое появляется, если вы используете функцию «увидеть исходный код» и «проверить элемент» (с правой кнопкой мыши).
5. Событие загрузки: событие загрузки активируется браузером, когда ресурс Javascript и его зависимые ресурсы закончили загрузку. Это самое важное событие, оно будет «готово, оно у вас на экране»
6. События после загрузки и пользовательские события . Страница может продолжать вносить изменения посредством действий пользователя (onClick) или активированного содержимого в дальнейшем. Эти изменения происходят после события загрузки.

Безголовые браузеры (браузеры без заголовка)

Безголовый браузер - это веб-браузер без графического интерфейса пользователя (он работает в памяти). Другими словами, это браузер, часть программного обеспечения, которая обращается к веб-страницам, но никому не показывает их. Понимать веб-страницы как обычный браузер и может взаимодействовать с ними таким же образом.

Он прекрасно описывает функциональность Googlebot Javascript. Он служит для представления того, что Googlebot является навигатором, который перемещается без визуального компонента. В конце концов, все сканеры делают то же самое, что и Chrome или Firefox, только вместо того, чтобы генерировать визуальный вывод и разрешать взаимодействие с пользователем, он извлекает код и взаимодействует через команды и строки кода.

Поисковые системы (и в этом случае особенно Googlebot Javascript) используют эту функцию, чтобы копировать поведение браузера и, таким образом, получать результирующий код в событии загрузки.

Процесс, сопровождаемый браузером без головы, будет следующим (упрощенным):

1. Робот Googlebot посещает URL-адрес как браузер
2. В конце события загрузки нажмите правую кнопку и выберите «проверить элемент»
3. Выберите тег HTML, который появляется в верхней части
4. Щелкните правой кнопкой мыши -> Копировать -> Копировать OuterHTML
5. Используйте скопированный HTML-код (отображаемый контент) для извлечения данных.

Ну, последний шаг является важным; Как только робот Google визуализирует контент (проверяя элемент и источник HTML), он использует его, как в традиционном HTML . Добро пожаловать в вашу зону комфорта с вашим HTML и CSS!

Вышеуказанный процесс также является способом аудита сети в Javascript.

Это дает Google две версии страницы: версию до DOM (с исходным HTML-контентом и минимальными связанными ресурсами JS) и post-DOM (событие загрузки). Как правило, Google корректно отображает и интерпретирует предоставленную версию, но нам, возможно, придется объединить сигналы между ними или устранить противоречия.

Когда мы проанализируем снимок экрана, который Google делает с помощью функции Fetch & Render в Search Console, мы увидим визуализированную версию в событии загрузки, используя визуализированный HTML, а не исходный HTML.

Важность отслеживания событий (и решения проблем SEO с Angular JS)

В основном, есть два события, которые мы должны принять во внимание, когда делаем SEO для Javascript:

Анализ событий загрузки для SEO

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

Содержимое, отображаемое после события «Событие загрузки», не будет отображаться в записи или индексироваться на странице. Этот снимок важен для понимания того, как Google индексирует Javascript, обнаруживаемый контент и SEO-оптимизацию.

Здесь я оставляю снимок проекта, в котором мы можем видеть, как произошел инцидент, связанный с этим; основной контент загружается после события загрузки (в событии после загрузки):

Страница, измененная Javascript, может непрерывно изменяться с пост-загрузкой и пользовательскими событиями, чтобы адаптироваться к ответу сеанса; Примером могут служить, например, папка «Входящие» пользователя, твиттеры или динамическое содержимое, которые загружаются в соответствии с предпочтениями пользователя или ранее установленными файлами cookie. Мы должны правильно определить исходный контент, который будет загружен и который мы хотим отправить поисковым системам, и разграничить его в пределах события загрузки.

Мы можем осмотреть это событие с классическим Проверка производительности сети с помощью Chrome Developer Tools (или тот, который вы предпочитаете):

С помощью этого инструмента мы получим временную шкалу загрузки контента, загружаемого браузером (Chrome). Синяя линия указывает на загрузку содержимого DOM (событие DOMContentLoaded), а красная линия указывает на событие загрузки.

Таким образом, содержимое, отображаемое на странице, когда Googlebot Javascript делает захват, - это то, что индексируется. Мы рассмотрим, как не индексируется весь контент, который не загружается до события загрузки, так просто.

С помощью инструмента Получить и сделать (предыдущий снимок, где он показал частоту) вы можете быстро просмотреть контент, индексирующий или нет.

Анализ пользовательских событий для SEO

После события загрузки появляются другие события, которые могут активировать новый контент и вызывать изменения на странице; обычно это задания для пользователей, интерактивная навигация и т. д. Типичное событие onClick: когда пользователь щелкает где-то в Интернете и активирует в браузере событие, которое называется onClick.

Javascript реагирует на эти события и изменяет поведение и содержание страницы на основе этого клика.

Вообще , об этих событиях мы должны учитывать, что весь контент, который зависит от производительности пользователя, не может быть проиндексирован. Этот контент не перестает быть модификацией страницы, и мы должны считать его неканоническим.

Сеть в JavaScript не должна плохо позиционироваться в SEO

По своему опыту я бы сказал, что в целом веб-сайт в Angular JS или любой другой платформе, где весь контент хорошо отображается в захвате Google, в целом должен иметь более высокий рейтинг. Конечно, есть «но», но хотя работа с Javascript сопряжена с их трудностями, и Google воспринимает это лучше или хуже, практически все проблемы, связанные с ним, вызваны плохой веб-разработкой, а не из-за ошибки Google.

Очень часто программисты не применяют «традиционные» методы SEO к веб-сайтам, созданным на JavaScript. На самом деле, на собрании пришел программист, чтобы сказать мне «но как вы заметили», когда я сказал ему, что все содержимое страницы находится внутри H1. Вкратце я подготовлю пост, посвященный проверке URL-адресов в Javascript, чтобы вы могли разрешать инциденты такого типа, но пока оставайтесь с тем контентом, который мы получаем в событии загрузки, и должны следовать тем же правилам, что и классический HTML.

Это были бы самые классические ошибки, которые мы можем найти (dalealike прогулки 🙂):

1. Индексируемые URL-адреса: на страницах по-прежнему должен быть уникальный и качественный контент, он не работает PushState , У нас должна быть настоящая страница с 200 статусами и уникальным HTML. Каждая страница или приложение должны генерировать URL-адреса на стороне сервера в каждой категории, статье или продукте.
2. чертово pushState: мы должны использовать pushState для представления изменения в URL. Однако это должен представлять канонический URL, который обслуживает ресурс с сервера. Ошибки с pushState и плохой реализацией контента со стороны сервера могут быстро создать проблемы с дублированным контентом.
3. Ну, я забыл основы: на страницах все еще нужны заголовки, описания, их схемы, мета-роботы, чистые URL-адреса, Alts .... Мы должны будем провести ревизию через «осмотреть предмет», прокомментированный выше.
4. a href и img src: страницам по-прежнему нужны ссылки. Сканирование Google страницы в Javascript по сути одинаково, поэтому мы должны поместить ссылки в атрибуты href, а также в источник изображения. Помещение URL в атрибуты данных вместо классического HTML всегда создает проблемы: если вы не видите href, не покупайте его так хорошо.
5. Несколько версий: при рендеринге JavaScript создаются разные версии (pre-DOM и post-DOM), поэтому мы должны минимизировать различия между ними. Исходный HTML-код должен сохранять теги такими же, как и отображаемый HTML-код (особенно канонические теги или теги rel = next / prev).
6. Ограничения для ботов: многие боты обычно имеют проблемы с JavaScript. Вот почему очень полезно иметь заголовок, мета-теги, социальные теги и т. Д. В исходном HTML.

Короче говоря, действия, которые вы должны выполнить, будут следующими:

1. Убедитесь, что все содержимое, которое мы хотим проиндексировать, отображается в событии загрузки
2. Убедитесь, что нет содержимого, которое зависит от пользовательских событий, которое мы хотим проиндексировать.
3. Страницы нуждаются в индексируемом URL, резервном копировании с сервера.
4. Мы будем проверять визуализированный HTML (через элемент Inspect) и используя традиционные методы SEO.
5. Мы избежим различий между исходным кодом HTML и версиями рендеринга.
6. Мы всегда будем включать мета, заголовок и социальные теги в исходный HTML.

Благодаря этому я должен был решить все ваши сомнения и дать вам подсказки, которые позволят вашим сайтам эффективно ранжироваться в Google. Я надеюсь, что это послужило вам!

Реализации JavaScript имеют свой риск, обычно вы в конечном итоге найдете что-то, что работает не очень хорошо, и вам будет сложно пересматривать и внедрять изменения, пока все не заработает, так что наберитесь терпения! Перенесите HTML-сайт в JS и сохраняйте трафик, не торопитесь, анализируйте, тестируйте, оценивайте и измеряйте!

-

Эта статья не перестает быть смесью опыта и содержания, которые я обнаружил, результатом исследований и аннотаций, которые вместо того, чтобы оставлять их в заметке, потому что я пользуюсь возможностью опубликовать с целью помочь тому, кто может им служить. Вкратце я получу еще один пост о SEO для JavaScript 🙂