Воскресенье, 21 Июнь 2015

Передача PaPaYa №39

Новости

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

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

Витамины в спортивном питании
20 июня 2018 г. Что такое витамины ? Витамины – это вещества, которые производятся из витаминсодержащего сырья (как растительного, так и животного происхождения), а также вещества, созданные искусственно

Симптомы авитаминоза, причины и лечение


Витамины для стройности


Как сберечь витамины в ягодах?
Каждый знает, что ягоды являются природным источником витаминов – дары природы содержат богатую гамму полезных элементов. Как сберечь витамины в ягодах? Сайт mir-yagod.ru даст ряд ценных рекомендаций.

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

Витамины для ногтей — чтобы ручки выглядели красиво!
Ухоженные руки – эти визитная карточка каждого человека, но, к сожалению, не всегда наши ручки выглядят идеально: морозы, несбалансированное питание и лень дают о себе знать. Но если за кожей мы еще хоть

Витамины для роста детям
Еще нужно учитывать и такой момент: если родители имеют средние показатели роста (160 – 175 см), то ожидать в семье будущего баскетболиста вряд ли разумно. Показатель роста ребенка заложен генетически

Какие витамины жизненно необходимы - Центр Космоэнергетики и Рэйки ИСИДА
Давно известно, что без витаминов нормальная жизнедеятельность человеческого организма невозможна. Какие же витамины и в каких количествах человеку необходимо получать ежедневно? Витамин А (аксерофтол,

Новости партнеров

Кризис трехлетнего возраста: бороться или мириться...

Ваш малыш, еще вчера такой послушный и покладистый, вдруг начинает вести себя необычно.Подробнее (http://www.prostobaby.com.ua/zdorove/psihologiya/stati/krizis_trehletnego_vozrasta_borotsya_ili_miritsya)

Боремся с лактостазом: памятка кормящей маме...

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

Дородовое воспитание: ждем и обучаем

Дородовое воспитание: ждем и обучаем...

Во время беременности будущего малыша можно не только любить, ждать, общаться с ним и всячески оберегать – его, как бы...

SEO: индексирование приложения JavaScript

  1. Как работает Angular Universal (теория)
  2. Как настроить Angular Universal (практика)
  3. Это действительно работает?
  4. Sitemap.xml сканирование
  5. Сканирование с поддержкой JS
  6. Недостатки
  7. развертывание
  8. Пользовательский опыт
  9. Что делать, если вы не используете Angular?
  10. ReactJS
  11. Vue.js
  12. Предварительно обрабатывать-шпа-плагин
  13. Prerender.io
  14. Твоя очередь

Одной из наиболее важных задач SEO в настоящее время является Индексирование приложений JavaScript поисковыми системами.

С тех пор, как Google объявил об устаревании индексации по схеме « Ajax-crawling » (= на основе фрагментов, специфичных для URL), было проведено много экспериментов, чтобы определить реальные возможности индексации наиболее важной поисковой системы.

Вот например очень интересный Сравнение JavaScript-фреймворков :

Вот например очень интересный   Сравнение JavaScript-фреймворков   :

Google утверждает, что регулярно интерпретирует JavaScript, но есть некоторые ограничения :

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

Большинство приложений не соответствуют этим правилам, поэтому они частично или не проиндексированы. Некоторые используют обходные решения, такие как prerender.io (см. Ниже).

Лучшее решение - обеспечить рендеринг на стороне сервера.

TL; DR: ВЫ ДОЛЖНЫ ИСПОЛЬЗОВАТЬ СТОРОНУ СЕРВЕРА .

Здесь мы представляем эффективное решение для приложений Angular 4: Угловой универсальный ,

Как работает Angular Universal (теория)

Angular Universal раньше была надстройкой Angular 2, и теперь она интегрирована в ядро ​​Angular 4. Это позволяет генерировать на стороне сервера то, что приложение должно было сделать на стороне клиента. После доставки в браузер эта предварительно отрендеренная версия повторно обрабатывается приложением JS, и все, что будет дальше, будет выполняться на стороне клиента.

Требуется развернуть NodeJS на вашем сервере (но планируется реализация PHP и Python).

Примечание: Angular 4 не очень отличается от Angular 2, он просто назван так из-за семантического версионирования. Если вы используете Angular 2, вам следует перейти на Angular 4.

Как настроить Angular Universal (практика)

Как и следовало ожидать, о практике можно многое рассказать, поэтому мы написали об этом отдельную статью: Как настроить Angular Universal ,

Это действительно работает?

Стандартное сканирование

Чтобы проверить возможности Angular Universal , мы сканировали наш сайт с помощью Screaming Frog SEO Spider . Поскольку мы хотим проверить, как сайт ведет себя без JavaScript , мы сначала запустили инструмент с параметром «Только текст»:

Это примерно эквивалентно базовой команде curl :

curl https://your-url.com

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

Время отклика очень хорошее (HTML доставляется менее чем за 500 мс). Сначала отметим, что инструмент правильно собирает все ссылки на страницах и сканирует весь сайт. Он собирает теги TITLE , H1 или META Description, и все содержимое HTML соответствует тому, что было бы в запущенном клиентском приложении. Следовательно, стандартное соотношение текста и слов на странице может быть вычислено так же, как если бы это был обычный веб-сайт.

У поисковых систем не возникнет проблем при индексации нашего сайта.

Sitemap.xml сканирование

В обычном приложении JS одним из обходных путей является предоставление файла sitemap.xml, чтобы поисковые системы индексировали все страницы.

Он работает также с Angular Universal , но это необязательно, так как все ссылки обнаруживаются на созданных страницах.

Сканирование с поддержкой JS

Наш второй тест включит JavaScript:

Как и ожидалось, сканирование теперь намного медленнее (поскольку инструмент пытается выполнить весь код JS). Мы часто получаем некоторое время ожидания, и ссылки на страницы не сканируются должным образом.

Кажется, что тег TITLE обрабатывается, но некоторые части страниц игнорируются. Все еще будут некоторые ошибки относительно индексации нашего сайта.

Недостатки

Документация

Это все еще молодая технология, она плохо документирована. Отсутствие документации может повлиять на проект.

развертывание

Angular Universal потребует сервера NodeJS на производстве. Это может быть обработано, конечно, но это все еще дополнительное ограничение.

Пользовательский опыт

Вы можете включить Universal только для роботов или для всех посетителей.

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

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

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

Что делать, если вы не используете Angular?

Другие основные платформы имеют эквивалентные решения, а когда их нет, вы все равно можете использовать prerender.io ).

ReactJS

  • Наиболее известное серверное решение рендеринга для React - Next.js , Его очень легко настроить, но все же рекомендуется установить его в начале, а не завершить проект. Next.js предлагает компонент Link для управления маршрутами. Это также заменит конфигурацию Webpack для генерации пакета.
  • В существующем приложении, использующем определенную конфигурацию sass и webpack, включая пользовательские загрузчики и т. Д., Может быть проще использовать Express и адаптировать конфигурацию. В этом случае вы можете использовать реагировать renderToString , И вам придется адаптировать реагирующий маршрутизатор (если используется).

В любом случае вам следует быть осторожным с Redux и убедиться, что он может предоставлять данные на стороне сервера.

Vue.js

Vue.js предлагает несколько решений рендеринга на стороне сервера:

  • Nuxt.js , что является эквивалентом Next.js для VueJS. nuxt / стартер Шаблон позволяет загрузить проект, способный генерировать все страницы в статической версии. Эти файлы могут затем обслуживаться Nginx напрямую.
  • Vue SSR более сложный Это довольно близко к Angular Universal. Вам придется адаптироваться к контексту выполнения, чтобы создать точную службу SSR. Только перед созданием и созданными хуками жизненного цикла доступны на стороне сервера.
    Он обеспечивает горячую перезагрузку (поэтому вам не нужно каждый раз перезагружать сервер Node), что очень удобно.

Предварительно обрабатывать-шпа-плагин

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

Prerender.io

Prerender.io - это общее решение для создания статической версии любого приложения JavaScript.

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

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

Рекомендуем запустить его за прокси Nginx (есть "официальная" конфигурация nginx и мы сделали немного приспособления ).

Твоя очередь

Вы это настроили? Вы хотите оставить отзыв? Вы сталкиваетесь с проблемами? СВЯЗАТЬСЯ С НАМИ если вам нужна помощь или заказать SEO АУДИТ !