18 июля 2013 в 13:21

HTML5/AngularJS/Nginx приложение с правильным с google-индексированием перевод tutorial

Большинство web-приложений и web-фреймворков используют архитектуру, не позволяющую разделить ui и backend разработку. Тем самым нет возможности разделить команду на узкоспециализированных frontend и backend разработчиков. Вне зависимости от предпочтений разработчика ему приходится иметь понимание как о слое представления, так и о слое логики. Если ui-разработчик знает только о том, как запустить сервер, и о модели данных — это огромная удача. В плохих случаях ui-разработчику необходимо провести полную сборку проекта чтобы увидеть изменения строчки в javascript файле, или знать о языке jsp файлов чтобы поменять стиль элемента. Формирование и передача на сервер обработанных html файлов так-же пагубно влияет на производительность сервера и сети.

non-ajax



В наше время современных браузеров с поддержкой HTML5, WebSocket и Full Ajax приложений больше нет необходимости забивать backend-сервера чем-то отличным от бизнес логики. Вся ui-разработка может вестись на nginx сервере с заглушками api сервисов. А фреймворки для авто-генерации документации помогут и ui, и backend разработчикам снизить затраты на коммуникацию. Передача одних лишь json данных также существенно снизит нагрузку на сервера. Ведь сжатый javascript код ui-клиента можно держать в кеше приложения.

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

Для правильной индексации приложения на angularjs нам понадобятся следующие вещи:

  • sitemap.xml
  • html5Mode
  • nginx
  • old fashion backend server


image

HTML5 mode

Html5 mode превращает angularjs routes из вида example.com/#!/home в вид example.com/home (все href ссылки должны также указывать на url без hashbang). Чтобы включить html5mode нужно выполнить:

$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');

я оставляю ! для совместимости с браузерами, не поддерживающими javascript

Теперь необходимо чтобы наш nginx сервер отправлял запросы с example.com/home на главный index.html файл приложения. Для этого укажем в конфиге следующую директиву:

location / {
        expires -1;
        add_header Pragma "no-cache";
        add_header Cache-Control "no-store, no-cache, must-revalidate, post-check=0, pre-check=0";
        root /var/web;
        try_files $uri $uri/ /index.html =404;
    }


Строка try_files $uri $uri/ /index.html =404; означает что теперь все несуществующие url будут переадресованы на index.html файл, сохранив при этом url в адресной строке браузера.
Это решение уже является рабочим (а также совместимым с старым hashbang форматом ссылок) и если ваше приложение не должно индексироваться поисковыми системами то можно закончить.

SEO

Теперь поможем поисковику обработать наше приложение правильно. Для этого мы подготовим подсказки для бота и сгенерируем snapshot страниц. Для начала расскажем ему о том, какие страницы нужно индексировать с помощью sitemap.xml файла. Простейший вариант файла состоит из ссылок на страницы и даты их последнего обновления (более подробный формат есть на сайте www.sitemaps.org):

<urlset xmlns='http://www.sitemaps.org/schemas/sitemap/0.9'>
  <url>
    <loc>http://senior-java-developer.com/java/basics</loc>
    <lastmod>2013-07-12</lastmod>
  </url>
  <url>
    <loc>http://senior-java-developer.com/</loc>
    <lastmod>2013-07-12</lastmod>
  </url>
</urlset>


Отлично, поисковик будет запрашивать ссылки нашего сайта и получать контент index.html т.к. никакой обработки javascript в поисковые боты не встроено. Расскажем боту что за технической страницей `index.html` спрятан реальный контент. Для этого в заголовок страницы добавим:

<meta name="fragment" content="!" />


Это даст боту возможность сделать следующий шаг. Увидев fragmet=! бот запросит страницу еще раз, но добавит в конец url параметр ?_escaped_fragment_=. Подскажем nginx что запросы с данным параметром нужно отправлять в другое место:

if ($args ~ "_escaped_fragment_=(.*)") {
	rewrite ^ /snapshot${uri};
}		
location /snapshot {
    proxy_pass http://api;
    proxy_connect_timeout  60s;
}


Вот и все, теперь все запросы от бота будут отправлены к api backend серверу.

Real url Bot url Backend url
example.com example.com/?_escaped_fragment_= localhost:8080/snapshot/
example.com/home example.com/home?_escaped_fragment_= localhost:8080/snapshot/home


Для формирования снапшота я использую thymeleaf. Т.к. и thymeleaf, и angularjs используют html5 атрибуты можно использовать единый файл шаблона, однако я предпочитаю не смешивать их.

Строчка из html view выглядела бы примерно так:

<div ng-bind="text" th:text="${text}"></div>
Автор оригинала: Alexey Kutuzov
Алексей Кутузов @fls_welvet
карма
13,0
рейтинг 0,0
Самое читаемое Разработка

Комментарии (7)

  • +1
    Стоит отметить что при выключенном HTML5 mode указывать meta fragment не надо.
    • 0
      Да, я описывал только для режима html5 т.к. считаю что пора уже в некоммерческих проектах перестать задумываться о поддержке < 5.

      Для привычной hashbang навигации необходимо:
      — использовать #! а не #
      — в sitemap указывать ссылки с hashbang

      Ссылки будут преобразованы из example.com/#!/home в example.com/?_escaped_fragment_=/home
  • +1
    А почему не генерите снапшоты серверным вебкитом?
  • +4
    Просто оставлю это здесь:
    github.com/steeve/angular-seo
    • +2
      Подход базируется на PhantomJS
  • 0
    Спасибо за статью, очень вовремя. В карму плюс добавить не хватает, поэтому просто огромное человеческое спасибо.
  • 0
    А что должно возвращаться по адресу localhost:8080/snapshot/home? Можно где-то серверный пример посмотреть.
    Получается дублирование файлов шаблонов, один шаблон для js, другой допустим для php, так что ли?

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