Сергей Мелашич "Настройка SEO для одностраничных web-приложений на Angular"
Download as PPTX, PDF0 likes833 views
Документ обсуждает настройку SEO для одностраничных приложений на Angular, уделяя внимание тому, как они работают для пользователей и краулеров. Описаны методы предварительной визуализации контента, а также использование сервисов, таких как prerender.io, и их преимущества. Также рассматриваются изоморфные приложения и возможности Angular Universal для генерации HTML на сервере и оптимизации производительности.
Сергей Мелашич "Настройка SEO для одностраничных web-приложений на Angular"
- 1. Сергей Мелашич Agilie Настройка SEO для одностраничных WEB приложений на Angular
- 2. Сергей Мелашич web разработчик компании Agilie github facebook linkedin gmail SergeyMell Seroga.Mell Sergey Melashych [email protected]
- 3. Постановка проблемы Как одностраничное приложение работает для пользователя? 1. Пользователь заходит на http://domain.com/shop/3/images/8 2. Получает практически пустой index.html со ссылками на JS файлы 3. Браузер подгружает и исполняет JS 4. Роутер обрабатывает роут /shop/3/images/8 и передает управление контроллеру 5. Контроллер загружает необходимые данные 6. Рендерится вьюха
- 4. Постановка проблемы Как одностраничное приложение работает для пользователя?
- 5. Постановка проблемы Как одностраничное приложение работает для краулера? 1. Краулер заходит на http://domain.com/shop/3/images/8 2. Получает index.html со ссылками на JS файлы 3. И на этом все... Ну или почти все
- 6. Что же умеют современные краулеры? GOOGLE BOT 1. Умеет исполнять JavaScript 2. Умеет выполнять AJAX запросы, хотя и с оговорками YANDEX BOT 1. Только начал понимать JavaScript Но ведь есть еще Bing, Baidu, Facebook, Twitter и многие другие…
- 7. Предварительная визуализация Как это работает? 1. Добавляем мета тег <meta name="fragment" content="!"> 2. По тегу краулер понимает, что это одностраничное приложение 3. Краулер перезапрашивает эту страницу по ссылке ../shop/3/images/8?_escaped_fragment_= 4. Ловим такой запрос на сервере и отдаем ему отрендеренный HTML 5. Краулер ассоциирует эту страницу с исходным URL
- 9. Преимущества Prerender.io 1. Открытый исходный код 2. Кэширует ранее запрошенные страницы 3. Умеет кэшировать «на лету» 4. Есть настройки ожидания загрузки страницы
- 10. Что нужно для настройки Prerender.io 1. Добавить <meta name="fragment" content="!"> в заголовок страницы 2. Отловить на сервере запросы с параметром ‘escaped_fragment’
- 11. Что нужно для настройки Prerender.io 3. Отловить на сервере другие запросы от ботов
- 12. Что нужно для настройки Prerender.io 4. Перенаправить эти запросы на prerender
- 14. Делаем сами, используя PhantomJS Поднимаем сервер
- 15. Делаем сами, используя PhantomJS Рендерим страницу
- 16. Делаем сами, используя PhantomJS Оптимизируем 1. Ускоряем загрузку за счет использования кэширования на уровне nginx 2. Генерируем слепки страниц “по расписанию” 3. Отслеживаем окончание рендеринга по “флагу”
- 17. Share buttons
- 18. Share buttons
- 19. Twitter sharing Отладчик репостов Twitter https://cards-dev.twitter.com/validator
- 20. Facebook, Tumblr sharing Отладчик репостов Facebook https://developers.facebook.com/tools/debug/
- 21. Facebook, Tumblr sharing GRAPH API EXPLORER POST https://graph.facebook.com/v2.8? scrape=true&id=sharing_url
- 22. Изоморфные приложения Предпосылки перехода к изоморфизму 1. 14 октября 2015 Google объявил описанный метод предварительной визуализации устаревшим и, хотя он поддерживается до сих пор, нужно быть готовым к его отмене 2. Есть масса других поисковых систем, которые определяют значительную часть трафика, но при это существенно отстают от Google в смысле умения индексировать одностраничные приложения 3. Проблемы с производительностью одностраничных приложений
- 23. Инструменты для создания изморфных приложений
- 24. Что позволяет Angular Universal? 1. Сгенерировать на сервере весь HTML и отдать его клиенту вместе с усеченной версией Angular 2. Предварительно визуализировать запрашиваемые страницы и быстро отдавать их, загружая основное приложение в фоне 3. Умеет запоминать все события, которые вызвал пользователь до момента загрузки Angular и передать их ему впоследствии
- 25. Особенности Angular Universal Синхронизируйте роуты на сервере и клиенте
- 26. Особенности Angular Universal Не трогайте DOM
- 27. Особенности Angular Universal Объектов window, document, navigator на сервере нет
- 28. Особенности Angular Universal Используйте кэширование Приложение запускает запросы XHR дважды - на сервере и еще раз на стороне клиента. Поэтому необходимо использовать кэширование, чтобы выполнить запрос на сервере один раз и кэшировать полученные данные для клиента.
- 29. Благодарю за внимание! Не забудьте разбудить своих соседей github facebook linkedin gmail SergeyMell Seroga.Mell Sergey Melashych [email protected]