Vue.js и SEO как оптимизировать реактивные сайты для поисковых систем и ботов Javascript


Оглавление (нажмите, чтобы открыть):

JavaScript и SEO

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

К внутренней оптимизации сайта относится и реализация JavaSript скриптов на сайте.

Эксперты Google представили новую информацию по теме использования JavaScript в контексте поисковой оптимизации сайтов под Google.

Актуальность вопроса

Поисковая система Google поддерживает JavaScript технологии и разрабатывает решения в целях улучшения индексации и ранжирования сайтов с элементами JavaScript.

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

Технологии по созданию и развертыванию сайтов с элементами JavaScript развиваются. В интернете появляются приложения, созданные при помощи JavaScript-фреймворков.

При создании проектов используются разные стеки технологий. Часто используются:

  • Angular;
  • Polymer;
  • React.

В поисковой системе Google разрабатываются общие решения для анализа подобных сайтов и создаются рекомендации по созданию search-friendly сайтов с использованием JavaScript.

Тема JavaScript и search-friendly сайтов рассматривалась на конференции Google I/O ’18.

Видео

В своей презентации Deliver search-friendly JavaScript-powered websites на Google I/O 2020 Tom Greenaway и John Mueller поделились подробностями о том, как работает поисковый робот Google, и рассказали о лучших методах создания search-friendly сайтов и веб-приложений.

Еще видео от Google

Выводы

Основные заметки из доклада на конференции:

  • В интернете более 130 триллионов документов;
  • Робот Googlebot больше не сканирует URL-адреса с хэш. Пример hashbang ссылки — indexoid.com/#backlinks;
  • Рендеринг JavaScript-в Google откладывается до тех пор, пока не станут доступны все ресурсы для обработки контента;
  • Рекомендуется настроить систему для обнаружения обращений Googlebot к сайту и отдавать поисковой системе уже сгенерированный контент в формате html;
  • Есть инструменты от Google для динамического рендеринга контента, такие как Puppeteer и Rendertron. Ссылка на Google Puppeteer — github.com/GoogleChrome/puppeteer. Ссылка на Google Rendertron — github.com/GoogleChrome/rendertron;
  • Робот Google использует Chrome 41 для рендеринга скриптов JavaScript. Эта версия Chrome была выпущена в 2015 году и не поддерживает ES6;
  • Google Search Console позволяет просматривать HTML-код, отрендеренный роботом Google, а также просматривать JavaScript исключения и лог;
  • Если продвигаемый сайт использует так называемую ленивую загрузку изображений, добавьте тег noscript вокруг тега изображения, чтобы убедиться, что робот Google сканирует изображения;
  • Google не индексирует изображения, на которые поставлены ссылки из CSS;
  • Робот Googlebot сканирует и рендерит страницы без сохранения состояния, то есть не поддерживает service workers, local storage и сохранение сессий, куки, Cache API, Web SQL и прочее;
  • Google планирует улучшения по процессу сканирование-рендеринг-индексирование. Робот Google будет использовать более современную версию Chrome для рендеринга документов сайтов.

Как сайты попадают в поисковую выдачу

Процесс попадания сайтов в поисковую выдачу состоит из множества этапов. Этапы:

  • Сбор списка ссылок для индексации;
  • Обработка списка специальным планировщиком;
  • Краулинг страниц;
  • Рендеринг страниц;
  • Индексация страниц;
  • Попадание в базу индекса поисковой системы;
  • Попадание в результаты органической выдачи поисковой системы.

Весь процесс в виде инфографики представлен далее.

Этап краулинга документов сайта

На этапе краулинга поисковая система выполняет ряд действий. При краулинге выполняется следующий набор задач:

  • Анализ директив robots;
  • Анализ тегов rel=canonical на предмет определения основной страницы;
  • Анализ страниц на дубликаты;
  • Удаление хвоста hashbang ссылок.

Хеш ссылкой называется ссылка с добавлением в хвосте символов после знака #.

  • indexoid.com/#backlinks;
  • wixfy.com/#wix-seo.

Обычно идентификаторы фрагментов после знака # в URL-адресах обозначают разные местоположения информации на одной и той же странице. Поисковые системы, такие как Google и Yandex, считают, что подобные ссылки ссылаются на одну страницу сайта.

С применением новых JavaScript технологий через идентификаторы фрагментов после знака # стала доступна загрузка контента. Поисковая система Google не исполняет подобный код и не видит контент на сайте, подгружаемый подобным образом.

На этапе краулинга происходит обработка тегов rel=canonical. Значение в теге rel=canonical может указывать на внешний ресурс.

Эксперименты по анализу передачи статического веса с использованием rel=canonical не проводились.

Эксперимент провести очень просто. Процесс:

  • Найти дроп с авторитетным ссылочным профилем. Для поиска можно использовать бесплатный сервис от MegaIndex. Ссылка на сервис — Удаленные домены;
  • Поставить rel=canonical на внешний ресурс;
  • Провести анализ влияния на позиции в органической выдаче поисковой системы.

Этап индексации документов сайта

На этапе индексации происходит обработка множества данных. Анализируется следующие:

  • Содержание документа и интегрированного контента. Под интегрированным контентом подразумевается загрузка контента с внешних источников;
  • Анализ кодов ответа;
  • Обработка данных по ссылкам.

Поисковая система индексирует не все ссылки. Рассмотрим примеры.

Подобная ссылка подлежит индексации — smmnews.com. Код ссылки:

Не подлежит индексации:

Не подлежит индексации:

Этап рендеринг документов сайта

Если на сайте используется тяжелый код JavaScript, то добавление страницы в индекс поисковой системы не будет происходить быстро.

Рендеринг страницы будет отсрочен до момента появления у Googlebot ресурсов для обработки контента.

По причине ограниченности технических ресурсов Google, индексация документов с тяжелыми javascript файлами происходит с отсрочкой.

Решение задачи по быстрой индексации заключается в использовании технологий пререндеринга от Google.


Google Dynamic Renderig и Hybrid Rendering

Есть инструменты от Google Dynamic Renderig для динамического рендеринга контента, такие как Puppeteer и Rendertron.

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

При необходимости подобные технологии можно использовать для формирования результата только для поисковой системы, пользователям сервер может отдавать результаты с javascript кодом.

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

Использование подобной технологии рекомендуется для разных сайтов.

  • Новостные сайты, на которых часто контент появляется;
  • Сайты с тяжелым javascript кодом;
  • Сайты с интегрированными блоками с внешних ресурсов.

Под интегрированными блоками с внешних ресурсов подразумеваются сайты с загружаемыми с внешних сайтов данными. Для примера:

  • Онлайн чаты. Примеры подобной системы — Intercom;
  • Видео с YouTube;
  • Счетчики социальных сигналов.

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

Как определить, что к сайту обращается именно робот Googlebot? При обращении к сайту робот от Google использует специальный идентификатор.

Идентификатор робота Googlebot, сканирующего десктопную версию сайта:

Идентификатор робота Googlebot, сканирующего мобильную версию сайта:

Результата рендеринга сайта поисковой системой можно посмотреть используя инструменты Google.

Для рендеринга десктопной версии можно использовать Google Search Console.

Для рендеринга мобильной версии можно использовать Google Mobile-Friendly Test.

Поисковая оптимизация Lazy Loading для изображений

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

При использовании Lazy Loading загрузка изображений происходит на этапе вывода изображения на экран.

Поисковая система не видит подобные изображения.

Для поисковой оптимизации подобного участка кода рекомендуется использовать специальную разметку.

Есть два решения. Список решений:

  • Тег noscript;
  • Разметка для изображений по стандарту Schema.

Пример разметки:

Решением индексации изображений является и использование специальной разметки для изображений по стандарту image от Schema.org.

Пример разметки для файла logo.png на сайте indexoid.

Поисковая оптимизация вкладок

Поисковая оптимизация требуется также при использовании кода JavaScript в других решениях по верстке документов сайта. Примеры решений:

  • Навигация и использование табов, вкладок;
  • Кликните для загрузки контента;
  • Подгрузка при скроллинге;
  • Тапните, чтобы посмотреть.

Есть разные решения по поисковой оптимизации для подобных элементов верстки сайта.

  • Использование предзагрузки контента на странице с применением кода CSS;
  • Создание отдельной страницы с уникальным адресом страницы.

При поисковой оптимизации элементов сайта на JavaScript:

  • Используйте лучшие практики описанные выше;
  • Протестируйте рендеринг на всех типовых страницах сайта;
  • Если надо, используйте Dynamic Rendering. Протестируйте изменения на практике, после внедрения улучшений.

Какие решения используете Вы?

Индексация сайта на vue.js

Здравствуйте. Вопрос, возможно, глупый, но меня, как новичка, это очень интересует. Предположим, я использую vuejs для интернет магазина. Товар выводится с помощью JS, фильтрация идет с помощью vue. Я так понимаю, что тогда будет проблема с индексацией сайта. Так как робот не сможет нормально проиндексировать то, что появляется после загрузки страницы. Как в таком случае быть? Может я неправильно понимаю логику применения vue и подобных framework?

1 ответ 1

Современные поисковые движки хорошо заточены под индексирование более менее-статического контента. Поэтому с индексированием Single Page Applications, которые вообще целиком js-динамика у них трудности. И это проблема. Как для поисковиков так и для разработчиков.

Со стороны разработчиков самым распространенным подходом является так называемый SSR — server side rendering. Это когда каркас приложения (значительная часть html-разметки) генерируется на сервере, потом отдается на клиент, соответственно поисковик может ее нормально проиндексировать. И на клиенте этот каркас обычно «оживляется» всякими дополнительными обработчиками и прочей динамикой в зависимости от действий юзера.

При этом кусочек серверной части приложения ответственной за рендеринг написан с использованием обычно примерно того же что и клиентской части. React там или vuejs. Поддержка SSR есть в большинстве современных js-фреймворков.

Конкретно у vue.js есть мануал на русском языке про SSR. Там много написано про SSR в общем, не только конкретно про vue.

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

Что нужно знать для работы с JavaScript в SEO: необходимый минимум

Автор: Серж Стефогло (Serge Stefoglo) – консультант по digital-маркетингу в агентстве Distilled

Если ваша работа связана с SEO, то вы наверняка всё чаще и чаще слышите о JavaScript и о сложностях с его сканированием и индексированием. Тем не менее, Google работает над этими проблемами, а многие сайты используют JS для загрузки важного контента. Поэтому мы должны быть готовы обсудить этот вопрос с клиентами, чтобы наша работа была эффективной.

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

Чтобы быть эффективными консультантами, когда речь заходить о JavaScript и SEO, вы должны уметь ответить на следующие три вопроса:


  • Полагается ли домен/страница на JavaScript, выполняемый на стороне клиента, для загрузки/изменения содержимого страницы или ссылок?
  • Если да, то видит ли Googlebot контент, который загружается через JavaScript, должным образом?
  • Если нет, то каким будет идеальное решение?

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

Далее в статье мы будем использовать в качестве примера целевую страницу Sitecore. На ней мы продемонстрируем, как отвечать на обозначенные выше вопросы.

1. Полагается ли домен/страница на client-side JavaScript для загрузки/изменения содержимого страницы или ссылок?

Первый шаг в диагностике любой проблемы касательно JavaScript – это проверка того, использует ли домен JS для загрузки важного контента, который может влиять на SEO (on-page контент или ссылки). В идеале это нужно делать каждый раз, когда вы начинаете работать с новым клиентом (во время первичного технического аудита) или когда ваш клиент проводит редизайн/запускает новые функции на сайте.

Мастер Йода рекомендует:  Касперский зачистил ботнет c помощью самого ботнета в Интернет

Как это сделать?

  • Спросите клиента

Лучше всего сразу связаться с разработчиками сайта и спросить у них.

  1. Используем ли мы client-side JavaScript для загрузки важного контента?
  2. Если да, то могли бы вы составить список того, где и какой контент загружается через JS?
  • Проверьте вручную

Даже на крупных коммерческих сайтах с миллионами страниц обычно есть несколько шаблонов важных страниц. По моему опыту, такая проверка занимает максимум час. Для этого я использую плагин Chrome Web Developers – отключаю JavaScript и вручную проверяю важные шаблоны сайта (главную страницу, страницы категорий и товаров, статей).

На примере выше, отключив JavaScript и перезагрузив страницу, мы увидели пустой экран.

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

В конце этого этапа мы должны знать, полагается ли данный домен на JavaScript для загрузки on-page контента и ссылок. Если ответ «Да», то нам также нужно знать, где это происходит (на главной странице, на страницах категорий или в конкретных модулях).

  • Используйте автоматическое сканирование

Вы также можете просканировать сайт с помощью специального инструмента (например, Screaming Frog или Sitebulb) с выключенным рендерингом JavaScript, а затем провести проверку с включенным JavaScript и сравнить различия во внутренних ссылках и on-page элементах.

Например, при сканировании с выключенным рендерингом JS не отображаются теги Title. Тогда нужно посмотреть, появляются ли они с включенным JS.

На скриншоте ниже мы видим, что при отключенном JavaScript не загружается контент страницы:

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

2. Если да, то видит ли Googlebot контент, который загружается через JavaScript, должным образом?

Если ваш клиент использует JavaScript в определённых разделах сайта, то вам нужно проверить, как Google видит эти страницы.

Как это сделать?

  • Используйте инструмент проверки оптимизации для мобильных устройств

На данный момент это самый быстрый и точный способ проверить, что Google видит на сайте. Мой коллега недавно провёл детальное сравнение инструментов Сканер Google для сайтов, Googlebot и Проверка оптимизации для мобильных. Как показал анализ, Googlebot и Mobile Friendly Tool возвращали одни и те же результаты.

В инструменте проверки оптимизации для мобильных достаточно ввести нужный URL. После того, как проверка будет завершена, нужно нажать на исходный код в правой части окна. Затем в этом коде можно искать любой on-page контент (теги Title, канонические теги и т.д.). Если он есть, то с высокой вероятностью Google его также видит.

  • Поиск видимого контента вGoogle

Ещё один быстрый способ проверить, проиндексировал ли Googlebot контент на странице – это выбрать видимый текст и выполнить поиск этого контента с использованием оператора site: и кавычек в Google.

В нашем примере этот текст выглядит так:

«Whether you are in marketing, business development, or IT, you feel a sense of urgency. Or maybe opportunity?».

Когда мы выполняем поиск по этой фразе, для этой конкретной страницы, то ничего не получаем. Это значит, что Google не проиндексировал этот контент.

  • Автоматическое сканирование

На сегодняшний день большинство инструментов в этой области способны сканировать JavaScript. Например, в Screaming Frog можно перейти в Сonfiguration > Spider > Rendering, затем выбрать JavaScript из выпадающего меню и нажать Save. В DeepCrawl и SiteBulb также есть эта функция.

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

Пример

Поиск ответа на этот вопрос я обычно начинаю с проверки домена в Google Mobile Friendly Test. Затем копирую исходный код и ищу важные on-page элементы (теги Title, H1 и т.п.). Также полезно использовать такие инструменты, как diff checker, чтобы сравнить обработанный HTML с исходным (в Screaming Frog это сравнение можно провести в режиме side-by-side).

Вот что показал инструмент проверки оптимизации для мобильных устройств по странице Sitecore:

После нескольких поисков стало понятно, что важные on-page элементы отсутствуют.

Мы также провели второй тест и убедились в том, что Google не проиндексировал содержимое тега body, найденного на этой странице.


Давайте посмотрим, что можно рекомендовать клиенту в данном случае.

3. Если нет, то каким будет идеальное решение?

Теперь мы знаем, что домен использует JavaScript для загрузки важного контента и знаем, что Googlebot не видит этот контент. Последний шаг – это рекомендовать оптимальное решение этой проблемы клиенту. Ключевое слово здесь – рекомендовать, а не внедрить. Наша задача – обозначить проблему клиенту, объяснить, почему это важно (а также описать возможные последствия) и рассказать, каким может быть решение. Однако определить идеальное решение в конкретном случае – в данном стеке технологий, при наличии этих ресурсов – это задача разработчика.

Какие решения можно предложить?

  • Реализовать рендеринг на стороне сервера

Главной причиной, почему Google сталкивается с проблемами при просмотре страницы Sitecore, состоит в том, что эта страница просит пользователя (нас, Googlebot) выполнить загрузку JavaScript на странице. Другими словами, Sitecore использует рендеринг на стороне клиента.

Нам же нужно снять нагрузку с Googlebot и перенести её на серверы Sitecore, чтобы рендеринг JavaScript осуществлялся на стороне сервера. В результате Googlebot сможет сканировать уже обработанный HTML.

В этом сценарии после перехода на страницу Googlebot будет сразу видеть HTML и весь контент.

  • Использовать гибридный подход

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

Подробнее об изоморфном JavaScript можно прочитать в материале от команды Airbnb.

  • Отказаться от схемы сканированияAJAX

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

Выводы

Если сильно упростить, то вот что вам нужно для работы с JavaScript в 2020 году:

    Знать когда и где домен клиента использует client-s >

JavaScript: что это, влияние на SEO, как оптимизировать JS-сайт

JavaScript – это мультипарадигменный язык программирования, предназначенный для создания максимально удобного для пользователей визуального оформления сайтов. Он создает анимации и упрощает взаимодействие пользователя с системой. Посетитель ресурса может открывать страницы и совершать различные действия без изменения URL-адреса документа и его перезагрузки.

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

JavaScript может выступать как внешний скрипт, или же располагаться в HTML-документе внутри тегов

JavaScript & SEO: как улучшить индексацию

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

Главный вопрос, который относится к JavaScript: могут ли поисковые системы «видеть» контент? Если нет, что тогда следует исправить?

Что такое JavaScript?

У современной веб-страницы есть три главных компонента:

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

JavaScript помещается либо в HTML-документа в тегах

Vue.js и SEO: как оптимизировать реактивные сайты для поисковых систем и ботов Javascript

Все большую популярность набирают сайты в которых контент формируется полностью средствами JavaScript. Поисковые системы за последние годы сильно преуспели в сканировании подобных сайтов. Однако задача SEO оптимизатора сделать сайт максимально доступным для поисковых систем.

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

Ну что, давайте разберемся, в чем проблема?

Проблема №1

Первая проблема в том, что структура одностраничных сайтов с прокруткой на JS чаще всего построена на внутренних якорях и содержат в URL символ ‘#’.

пример URL

Хотя поисковая система индексирует подобные URL, часто подобные ссылки расцениваются как ссылка на фрагмент контента страницы. В этом случае страница не будет добавлена в индекс поисковой системы.

Проблема №2

При отключении JavaScript контент не отображается на странице. Как к примеру, на этом сайте:

React.js: SEO архитектура для мультимедийного контента

В области современного контента для веб существует небольшая проблемка – не всегда новые технологии и фреймвоки совместимы с SEO. Разработчики из Builtvisible создали прототип промежуточного слоя в React.js, который позволяет создавать и публиковать подобный контент, который впоследствии будет доступен в поиске. Ниже они описывают свой путь и к чему пришли.

Если вы работаете с Angular/React или любым другим JS-фреймворком, ориентированным на создание мультимедийного контента, то наша разработка поможет вам избежать множества трудностей. Однако стоит учесть, что данная статья больше направлена на разработчиков, которым требуется создавать JS-приложения, дружественные в поисковыми системами.

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

Обрисуем проблему

Как вы знаете, мы ведем множество исследований и разработок, направленных на то, чтобы понять, каким образом развитие технологий влияет на поисковые системы и их использование в веб. Например, каким образом можно реализовать SEO-оптимизацию в проектах, основанных на Javascript, на React.js, а также в проектах, в которых задействуются Google AMP (Accelerated Mobile Pages) или Instant Articles от Facebook. В рамках этой деятельности недавно мне пришлось работать над идеей упрощения процесса создания контента в формате длинных статей за счет применения как стандартизации, так и кастомных компонентов.

Все чаще разработчики предпочитают создавать интерфейсы для различных систем исключительно на Javascript. Их аргумент вполне уместен: таким образом мы получаем больше возможностей и гибкости, сокращение времязатрат на разработку, а также – в комплекте с React Native – простота в создании внешних интерфейсов для веб-проектов и приложений. Однако нельзя не отметить и недостатки: несмотря на то, что Google все лучше и лучше справляется с рендером Javascript-проектов, ее механизмы все еще очень далеки от идеала.


Мы пришли к следующей мысли: а что если мы сможем предоставить такой источник данных, который будет содержать в себе всю информацию о том, что должно пройти рендеринг, без учета HTML, а система уже сама поймет, каким именно должен быть конечный результат?

Тогда у пользователей будет возможность использовать HTML или Markdown, но в то же время, когда им понадобится внедрить галерею изображений или видеоролик, он могут просто вызвать их при помощи интерфейса. То же касается и вывода в приложениях: в них изначально должны быть заложены инструкции для поисковых систем по рендеру JS, и тогда пользователям больше не придется беспокоиться за это.

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

Вдохновение пионерами

То, о чем мы здесь говорим, не так уж и сильно отличается по задумке от Ghost. Если вы не знакомы с этим проектом, то это блоггинг-платформа на базе Javascript, разработанная при помощи Node.js. Однако чего эта платформа делать не позволяет, так это добавлять произвольные модули контента. Вместо этого, она просто дает нам возможность публиковать контент в формате Markdown, а админ-панель платформы сильно напоминает WordPress, да и любую другую блоггинг-платформу. С другой стороны, недавно я наткнулся на CMS Newsroom, которая отвлекает нас от привычного концепта страницы, и позволяет предлагать контент в виде блоков. Когда журналист создает или редактирует какой-то фрагмент, он может просто добавлять новые блоки, которые, в свою очередь, могут быть изображением, текстом или даже видео.

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

Что если объединить несколько идей в один концепт?

Например, во что-то, полностью основанное на Javascript, что позволяет компоновать контент при помощи модулей? Именно это мы и попытались сделать.

Выбор технологий

Касательно набора инструментов для front-end, я лучше всего знаком с React, так что именно с его помощью разрабатывался наш проект. Также, учитывая наше желание сделать все максимально просто, демо-приложение будет основываться на одном лишь файле с JSON. Ну как же заставить наше промежуточное ПО работать?

Основные принципы

Самый базовый элемент любого веб-сайта – это структура данных, которая дает начало его архитектуре. В результате можно сказать, что самой базовой единицей данных будет URL, и поэтому мы решили, что первым уровнем в JSON-объекте будет ярлык записи. Это позволило нам получить очень простой способ вывода корректных данных для любой страницы – нужно лишь получить объект, привязанный к определенному ключу. Такой концепт также довольно просто применять в более масштабных проектах.

Далее было принято решение, что самыми базовыми единицами, которые нам на данном этапе потребуются, будут свойства объекта: заголовок, описание и массив с компонентами, релевантными к заданному URL. Массив несет в себе набор объектов, каждый из которых содержит имя компонента, который будет использоваться, а также его свойства.

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

Результат здесь достаточно очевиден, но чтобы рассеять всевозможные сомнения, давайте взглянем на реализацию чего-то, что задействует в работе именно нужным нам компонент:

Примечание: ES6, так как присутствует Babel. Также обратите внимание на то, что все свойства объекта имеют названия свойств компонентов React. Это нужно для облегчения восприятия.

Сейчас мы можем создать просто миниатюрную фабрику, способную рендерить любой заданный компонент с учетом предоставленных данных, а затем создавать нужные итерации по ходу списка компонентов и выводить контент на страницу. Можно вызвать и сгенерировать что угодно, от видео на YouTube до произвольного компонента. И, учитывая принцип работы React, запускаться будет то, что вам потребуется запустить.

Весь этот процесс выглядит примерно следующим образом:

Обращаем внимание на оптимизацию приложения под поисковики

Конечно же, нам хочется, чтобы наши приложения дружили с поисковиками. К счастью, благодаря React, мы можем взять целый объект и осуществить рендер на стороне сервера при помощи запроса renderToString. Для других фреймворков мы можем использовать что-нибудь вроде Prerender.io.

Обращаем внимание на оптимизацию компонентов

Ввиду природы современного front-end на базе JS, у вас зачастую могут появляться компоненты, которые не могут рендерить весь свой контент. К примеру, у нас есть решение для реализации вкладок, основанное на устаревшей версии jQuery, которое на протяжении всего времени удерживает весь контент в одном месте, а затем показывает или скрывает его при помощи CSS, раскрывая лишь необходимый фрагмент контента. Такой подход в принципе похож на то, что позволяет React, но только в последнем случае необходимые элементы создаются и уничтожаются.

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

Обращаем внимание на данные

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

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

Чтобы посмотреть демо этой задумки в действии, ознакомьтесь с проектом Fly me to the Moon. Если вам интересно увидеть страницу, в которой компоненты используются как единожды, так и повторно, то именно этот проект будет для вас наглядным примером.

Как JavaScript и Ajax помогают в SEO

Многие сеошники вообще не сильно хорошо относятся к javascript и ajax. Ну, возможно, для профессионалов, работающих в Яндексе или Google, как раз и не секрет, как поисковая система относится к ссылкам javascript ajax. Но, во всяком случае, большинство сеошников не любят эту связку, потому что непонятно, как на самом деле поисковики отнесутся к ссылкам, которые формируются js.

Но мне известно, что все эти манипуляции с ява позволяют существенно снизить нагрузки на сервер. Конечно, для тех, кто освоил самостоятельно javascript, многие вопросы теперь сняты. Но, опять же повторюсь, что это только те, кто «волокет» в этом. Ладно, не буду философствовать. Давайте о фактах

Смотрите, использование javascript – это плюс в том, что предоставляется не сразу весь контент, а только по требованию. А еще преимущество заключается в том, что при желании можно запретить индексировать отдельные элементы, которые с точки зрения SEO, не должны быть видны поисковым роботам. Но пользователям они должны быть видны.

Кроме того, эти элементы должны быть видны и с точки зрения монетизации сайта. Ну, и еще один момент, который нужно учесть при использовании javascript ajax. Дело в том, что с помощью этой связки мы сможем сделать наш ресурс максимально привлекательным для поисковиков, и максимально Непривлекательным для спамеров, которые любят проставлять халявные ссылки. Идем дальше.

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

Короче, расскажу вам одну историю. Мне как-то заладили спамить несколько статей. Правда, это не то, чтобы даже спамить. Нет, оставляли осмысленные, большие комменты. Но меня насторожило, почему это вдруг проявился интерес к старым постам. Вот ни дать ни взять нужно в массовом порядке комментировать пару статей. Хм… думаю, что за дела такие? В общем, все выяснилось, когда я заглянул в поисковую выдачу. Те статьи, которые спамили комментами, занимали высокие места в поисковой выдаче по конкурентным запросам. Поэтому конкурентами был найден интересный способ подорвать мое положение в серпе – «размыть» ключевую ценность моей статьи путем добавления «воды», т.е. комментариев.

Так вот, если у меня один только блог, то я могу держать руку на пульсе событий. Все комменты просто буду модерировать вручную. А что делать, если у меня куча крупных проектов? Тут можно и не углядеть за всеми комментариями. Поэтому здесь использование javascript ajax – лучшее решение. Технически все делается так. Для поисковых ботов с помощью ajax делается видной одна часть контента, которая напичкан нашими ключевиками. А для посетителей сайта мы будем подгружать всю статью с помощьюа ajax, либо посредством события onLoad, или же по клику на кнопку «Читать полностью».

Вот и получается, что немного схитрим, и тем самым не будем махать бисером перед свиньями. То есть, суть в том, чтобы использовать ресурсы сервера только для действительно заинтересованной аудитории, а случайным гостям, или поисковым роботам нужно демонстрировать только важнейшую часть. Кроме того, javascript и ajax позволяют генерировать изменяющееся содержание контента сайта в зависимости от пользователя, или поискового робота. Например, если посетитель ведет себя определенным образом, то мы демонстрируем ему рекламные блоки соответствующего содержания. А если посмотреть на эту информацию со стороны поисковых систем, то для них она будет «шумовой».

Кстати, как блогер, тоже могу сказать, что проблема «шумового» контента – актуальная. Я это о том, что есть много статей, которые тщательно оптимизируешь, проверяешь тошноту страницы, ну и делаешь все другие прибамбасы, помогающие улучшить видимость страницы в результатах поиска по определенному ключевику. А потом приходит штук 15-20 развернутых комментариев, и все. Получается, что наш изначальный оптимизированный текст уже «размыт». Кстати, я не говорю о том, что комменты – это плохо, и что это зло. Нет. Наоборот, иногда в комментах есть какие-то ключевики, и потом, когда анализируешь источники посещаемости, то видишь, что некоторые ключевики «сидят» в топе по запросам, которые присутствуют именно в комментах. То есть, здесь 50/50 – или комменты помогут статье, или наоборот, потянут ее вниз в серпе. В общем, если говорить про конкурентные запросы, которые непросто продвинуть в топ, то я склонен считать, что комменты не помогают странице подняться в топ, а наоборот, тянут ее на дно.

Использование javascript ajax, когда с их помощью реализуется возможность подгружать комментарии, по сути, даже «портит малину» тем, кто хочет получить халявную ссылку со страницы.

Кстати, javascript ajax помогает тогда, когда мы не до конца разбираемся в нюансах SEO. Хотя, я больше чем уверен, что вообще нет таких, кто будет знать все до деталей. В общем, суть в том, что комментарий, может, и будет осмысленным, и мы пропустим его в паблик, но в силу того, что мы не знаем все нюансы seo, могут быть утечки ссылочного ранжирования. В результате чего страница будет занижена в выдаче. То есть, здесь опять же использование javascript и ajax – это просто даже элементарная предосторожность.

Полный текст виден не по умолчанию, а по требованию заинтересованного посетителя за счет JavaScript. Тут хотел бы вспомнить движение DOFOLLOW. Это когда ссылки из комментариев своих блогов делают открытыми для индексации. Вообще не понимаю таких людей, если честно. Это ж какой простор для спамеров открывается. Я просто за то, чтобы комментарии на блогах оставляли не ради ссылки, а просто потому, что человеку есть что сказать, возразить. А если комментируют только ради ссылки, то и текст такого коммента вряд ли будет полезным. Я по своему опыту могу сказать, что если оставлять комментарии для того, чтобы в будущем получать с них трафик, то нужно писать что-то действительно полезное, чтобы потом людям интересно стало, кто же такой умный такой комментарий оставил.

Есть и другой вариант. Наверняка, не открою вам глаза, если скажу, что давно уже наработана практика написания отзывов. Но публикуется не все подряд, а только те отзывы, которые действительно стоящие. То есть, таким же макаром можно реализовать с помощью javascript ajax отображение самых значимых комментариев. То есть, посетителям показываем только основное содержание страницы + несколько стоящих комментариев, которые мы отбираем вручную. А вот тем, кто захочет посмотреть все комментарии, предоставляется подгрузить всю ветку. Это опять же реализуется все через javascript ajax. Я думаю, что при таком раскладе даже у комментаторов, которым нужна ссылка с моего сайта, будет стимул писать нормальные комментарии по делу. То есть, будет очевидно, что комменты «спасибо. отличная статья» не прокатят, зато осмысленные комментарии, релевантные контенту страницы вполне достойны быть показанными в основном содержимом страницы.

На этом все. Кстати, если вы только начинаете осваиваться в сайтостроении, и не знаете, как реализовать разные фишки с помощью JavaScript, то рекомендую обучающий видеокурс Евгения Попова — «Javascript + jQuery для начинающих». Все подробно, просто, но главное – понятно. Сам когда-то начинал с него. Всего доброго!

Влияние javascript на продвижение сайта

Привет, Друзья! В этой статье я расскажу какое оказывает влияние javascript на продвижение сайта. Итак, поехали!

Какое влияние оказывает javascript на продвижение сайта

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

Как работает Javascript


Вот краткое представление о JavaScript для тех, кто с ним совсем не знаком.

Наряду с HTML и CSS JavaScript является одной из трех основных технологий веб-разработки. HTML используется для создания статических страниц (то есть код отображается в браузере как есть и не может меняться в зависимости от действий пользователя), тогда как JavaScript создает динамическую веб-страницу. Программист может использовать JavaScript для изменения значений и свойств тега HTML, когда пользователь кликает кнопку или выбирает значение из раскрывающегося списка. JavaScript размещается на странице вместе с HTML-кодом и работает вместе с ним.

Рендеринг на стороне клиента и на стороне сервера

Есть две концепции, которые нужно упомянуть при разговоре о JavaScript. И очень важно понять различия между ними: рендеринг на стороне сервера и рендеринг на стороне клиента.

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

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

Очевидно, что если бот Google не может обработать и правильно отобразить ваш JavaScript, он не сможет увидеть страницу и контент, который вы бы хотели ему показать. И именно здесь возникает большинство проблем с поисковой оптимизацией JavaScript и SEO-продвижением.

Теперь давайте посмотрим, как можно избежать этих проблем.

Как проверить, что сайт читается правильно

Чтобы бот Google правильно читал ваш сайт, необходимо сосредоточиться на правильном рендеринге ссылок и контента на сайте. Если вы не рендерите ссылки, бот Google будет испытывать трудности с поиском на вашем сайте. И если вы не будете правильно рендерить контент на сайте, бот не сможет увидеть и его.

Вот несколько вариантов, которые могут вам помочь.

1. Команда site:

Прежде всего, команда site: покажет, сколько страниц вашего сайта в настоящее время индексируется Google. Если многие из них еще не указаны в индексе, это может быть признаком проблем с внутренними ссылками (перелинковкой).

Во-вторых, вы можете проверить, проиндексировал ли Google и Яндекс ваш JavaScript-контент.

Для этого нужно найти определенную строку в тексте, которая не представлена в исходном HTML-коде и загружается только после выполнения JavaScript. После этого найдите эту строку в индексе Google, используя команду site:yourdomain.com.

Обратите внимание, что это не работает с командой «cache:», поскольку кэшированные версии страниц содержат только оригинальный, еще не отрендеренный код.

2. Chrome 41

В августе 2020 года в Google обновили «Руководство поиска» и объявили, что используют Chrome 41 для рендеринга. Это коренным образом изменило SEO, ведь теперь стало возможным проверить, как Google фактически отображает страницу, а не гадать и надеяться на лучшее.

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

3. Chrome DevTools

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

Самый быстрый и простой способ проверить, загружаются ли все JavaScript-элементы без каких-либо действий пользователя, — использовать Chrome DevTools:

  1. Откройте ваш сайт в Chrome.
  2. Откройте таблицу элементов в DevTools.
  3. Посмотрите, как отображается ваша страница, просмотрев DOM фактической страницы, созданной браузером, убедитесь, что все важные навигационные и контент-элементы уже присутствуют там.

Я рекомендую проверить это и в Chrome 41. Это обеспечит уверенность в том, что робот Google технически способен увидеть все.

Конечно, вы также можете проверить это в своей текущей версии Chrome и провести некоторые сравнения.

4. Функция Fetch and Render в Google Search Console

Еще один полезный инструмент, который поможет представить, как Google отображает ваш веб-сайт, — функция Fetch and Render в Google Search Console.

Сначала вам нужно скопировать и вставить URL-адрес. Затем нажать Fetch and render и немного подождать. Это позволит вам увидеть, сможет ли робот Google обработать вашу страницу и увидеть связанные статьи, копии или ссылки.

Вы также можете использовать Mobile-Friendly Test от Google, который покажет вам ошибки JavaScript и код отображаемой страницы.

5. Анализ серверных логов

Последнее, к чему вы можете прибегнуть, чтобы проверить, как Google-бот обходит ваш сайт, — это анализ серверных логов. Если внимательно изучить логи, можно проверить, посещал ли робот Google определенные URL-адреса и какие разделы он просканировал или нет.

Существует множество аспектов, которые можно анализировать с помощью серверных логов. Например, вы можете проверить, посещает ли Googlebot ваши старые статьи: если нет, возможно, есть проблемы со ссылками, которые могут быть вызваны проблемами с JS.

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

Серверные логи не покажут, как бот Google видит страницы. Вы сможете проверить только то, были ли страницы просканированы и какие коды ответов были отправлены. Для определения того, были ли какие-то проблемы вызваны JavaScript, потребуется дополнительный анализ.

Кроме того, просмотрев логи, вы можете увидеть, запрашивал ли бот Google критические файлы JavaScript или полностью проигнорировал их.

Возможные проблемы рендеринга сайта

Даже если ваша страница отображается правильно в разделе Fetch and Render в Search Console, это не означает, что вы можете выдохнуть и расслабиться. Есть и другие проблемы, за которыми нужно следить.

Начнем с одной из самых больших проблем, с которыми вам придется иметь дело…

1. Время ожидания

Хотя точное время ожидания не определено, говорят, что Google не может ждать скрипта дольше 5 секунд. Если скрипт загружается более 5 секунд, Google обычно не индексирует контент, который он создает.

Fetch and Render покажет, может ли Google прорендерить страницу, но эта функция ничего не скажет. Важно помнить, что Fetch and Render прощает гораздо больше, чем стандартный робот Google, поэтому вам нужно предпринимать дополнительные шаги, чтобы убедиться, что скрипты, которые вы используете, могут загрузиться менее чем за 5 секунд.

2. Ограничения браузера

Как мы упоминали ранее, Google использует несколько устаревшую версию своего браузера для рендеринга веб-сайтов: трехлетний Chrome 41. И так как технология JavaScript развилась и продолжает развиваться очень быстро, некоторые из ее новейших функций, которые работают в последние версии Chrome, не поддерживаются в Chrome 41.

Поэтому лучшим решением является загрузить браузер Chrome 41 (ту самую версию, которую Google использует для веб-рендеринга) и ознакомиться с ним. Проверьте лог консоли, чтобы увидеть, где возникают ошибки, чтобы ваши разработчики исправили их.

3. Контент, требующий пользовательского действия для загрузки

Мы уже говорили об этом, но это действительно стоит повторить: Google-бот не действует как пользователь. Он не нажимает на кнопки, не кликает «читать дальше», не открывает вкладки, не заполняет какие-либо формы… Он только читает и переходит.


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

Это особенно важно в отношении контента с кнопкой «читать дальше» и меню, например, вида «гамбургер».

Как помочь боту Google лучше рендерить сайт

Рендеринг сайтов роботом Google — это не улица с односторонним движением. Есть множество вещей, которые разработчики могут сделать, чтобы облегчить этот процесс, помогая подчеркнуть то, что вы хотите, чтобы Googelbot увидел, и обеспечить себе спокойную жизнь.

Избегайте ссылок OnClick

Поисковые системы не считают onclick=»window.location=» обычными ссылками, а это значит, что в большинстве случаев они не будут ходить по такой навигации. И поисковики точно не будут относиться к ним как к сигналам о внутренней ссылке.

Исключительно важно, чтобы ссылки находились в DOM перед кликом. Вы можете проверить это, открыв «Инструменты разработчиков» в Chrome 41 и проверив, были ли уже загружены важные ссылки без каких-либо дополнительных действий пользователя.

Избегайте # в URL-адресах

Идентификатор фрагмента # не поддерживается и игнорируется роботами Google. Так что вместо использования URL-адреса вида example.com/#url, старайтесь работать с чистыми URL-адресами — example.com/url.

Уникальные URL-адреса для уникального контента

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

Не допускайте ошибок JavaScript

HTML прощает многое, а вот JavaScript — нет.

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

Чтобы проверить код и не допустить ошибок JavaScript, вы снова можете использовать Chrome DevTools и просмотреть вкладку «Консоль», чтобы узнать, какие ошибки возникли и в какой строке кода JavaScript.

Не блокируйте JavaScript в robots.txt

Блокирование JS-файлов — очень старый метод, но он применяется довольно часто. В некоторых CMS он иногда встречается по умолчанию. И хотя его целью является оптимизация бюджета обхода, блокировка JavaScript-файлов (и таблиц CSS) считается очень плохой практикой. Но не принимайте это на веру, вот что сам Google говорит по этой теме:

«Мы рекомендуем убедиться, что робот Google может получить доступ к любому встроенному ресурсу, который вносит значительный вклад в видимый контент вашего сайта или его макет …»

Поэтому не делайте ничего подобного:

Пререндер

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

Пререндер предоставляет готовый HTML-«снимок» вашего сайта. Это означает, что бот Google получает не JavaScript, а чистый HTML. В то же время пользователь, который посещает сайт, получает ту же версию страницы, но насыщенную JavaScript.

Наиболее популярным решением является использование внешних сервисов для пререндера, таких как Prerender.io, который совместим со всеми наиболее важными структурами JS.

Использовать это решение очень просто — вам просто нужно добавить промежуточное программное обеспечение или сниппет на свой веб-сервер.

Заключение

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

Обучение продвижению сайтов

Для тех кто хочет научиться выводить сайты в ТОП 10 поисковых систем Яндекс и Google, я организовал онлайн-уроки по SEO-оптимизации (смотри видео ниже). Все свои интернет-проекты я вывел на посещаемость более 1000 человек в сутки и могу научить этому Вас. Кому интересно обращайтесь!

На этом сегодня всё, всем удачи и до новых встреч!

Анатолий

Вам также может понравиться

SEO оптимизация для начинающих

Как сделать поведенческие факторы (UX) частью SEO

Продвижение бизнеса с помощью SEO

Добавить комментарий Отменить ответ

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Vue — Создаем красивые сайты с поддержкой SEO

Using Vue 2 to Create Beautiful SEO-Ready Websites

В этом курсе вы узнаете как использовать Vuejs для создания современных веб-сайтов, которые являются SEO-Friendly. Давайте начнем! Vue.js входит в число топ трех фреймворков JavaScript, и он становится все более популярным благодаря своей простоте и простоте использования.

Vue — это пожалуй самая простой фреймворк frontend, который разработчик может понять очень легко. По этой причине, это отличный выбор для разрабработки современных веб-сайтов.

В этом курсе я расскажу вам как создать красивый веб-сайт с поддержкой SEO, используя Vue. Вы сможете создавать современные веб-сайты, которые также оптимизированы для SEO с prerendered страницами. Это дает огромные преимущества!

Мы начнем с создания полного макета и прототипа нашего веб-сайта с использованием Adobe XD. Затем мы разработаем его полностью, используя Vue.js и Sass.

После просмотра этого курса вы поймете:

  • Создание веб-макетов и прототипов в Adobe XD
  • Запуск проектов с помощью CLI Vue.js
  • Написание HTML и Sass для соответствия макетам
  • Работа с Vue Router
  • Создание анимации перехода на страницу
  • Создание SEO-Friendly Vue-проекта с плагином Prerender
  • ..и многое другое.

Требования

  • Adobe XD рекомендуется, но не требуется.
  • Понимание HTML и CSS
  • Основное понимание JavaScript

Итак, если вы готовы научиться использовать Vue для создания современных веб-сайтов с поддержкой SEO, давайте начнем!

Мастер Йода рекомендует:  Как быстро создать эффект стилизованного ретро текста
Добавить комментарий