Статьи

Приложение для сканирования HTML5 / AngularJS / Nginx

Июль 2, 2018

Полный Аякс

Многие веб-приложения Java и веб-платформы Java используют архитектуру, которая не допускает отдельного пользовательского интерфейса и внутренней разработки. Таким образом, невозможно разделить вашу команду узкоспециализированных разработчиков и разработчиков на пользовательский интерфейс и команду. Независимо от предпочтений разработчика, он должен понимать, как работает презентация и бизнес-логика. Хорошо, если разработчик пользовательского интерфейса знает не только модели данных (которые соединяют шаблоны приложений и контроллеры), но и то, как запустить сервер. В особо тяжелых случаях разработчику пользовательского интерфейса потребуется пересоздать целое приложение при изменении нескольких строк JavaScript или язык файлов JSP, когда он хочет исправить CSS. Также он будет писать и передавать HTML-файлы на сервер, влияя на производительность сервера и сети.

В настоящее время современным браузерам (с HTML5, WebSocket и т. Д.) Больше не нужно оценивать внутренний сервер чем-то отличным от бизнес-логики. Теперь разработку пользовательского интерфейса можно выполнять на простом сервере Nginx с API-заглушками вместо реального внутреннего сервера. Фреймворки для автоматической генерации документации (например,  JSONDoc ) также помогают UI и внутренним разработчикам снизить расходы на связь. Передача чистых данных JSON также значительно снижает нагрузку на внутренние серверы. В конце концов, сжатый код JavaScript клиента UI можно сохранить в кеше браузера (уменьшая нагрузку на сеть и Nginx).

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

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

  • sitemap.xml
  • Angular в режиме HTML5
  • Nginx
  • Старомодный внутренний сервер

HTML5

Режим HTML5 превращает маршруты AngularJS как example.com/#!/Home в маршруты типа example.com/home ( href атрибут также должен быть объявлен без хеш-бенга).

Активируйте html5Mode в AngularJS:

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

Хэш-банг совместим с браузерами, которые не поддерживают URL-адреса HTML5.

Теперь нам нужно заставить наш сервер 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-адреса в адресной строке браузера. Это решение уже работает (и также совместимо со ссылками на хэш-банг старого формата), и если ваше приложение не должно быть проиндексировано поисковыми системами, вы можете остановиться здесь.

SEO

Теперь мы поможем поисковым системам правильно обработать наше приложение. Для этого мы подготовим подсказки для поисковых роботов и сгенерируем снимки страниц. Для начала расскажем боту, как вы хотите проиндексировать страницу 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. Для этого добавьте на 
<head> страницу:
 

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

Это даст боту возможность сделать следующий шаг. Видящий 
fragmet=! бот снова запросит страницу, но добавит
?_escaped_fragment_= параметр в конец URL. Nginx перенаправит этот запрос с параметрами в другое место:
 

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

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

Реальный URL Бот URL Бэкэнд URL

example.com

example.com/?_escaped_fragment_=

localhost:8080/snapshot/

example.com/home

example.com/home?_escaped_fragment_=

localhost:8080/snapshot/home

Для создания снимка я использую представления AngularJS и структуру  представления Thymeleaf . Поскольку Thymeleaf и AngularJS поддерживают атрибуты тегов HTML5, вы даже можете использовать один файл шаблона, но я предпочитаю не смешивать их. Строка HTML будет выглядеть так:. <div ng-bind="text" th:utext="${text}"></div>Один файл, круто!

Готово. Теперь поисковый бот будет запрашивать необходимые ссылки и правильно их индексировать. На данный момент «Получить как бот» в инструментах Google и Bing для веб-мастеров не поддерживается  fragmet=!, поэтому вы не можете сразу проверить, все ли у вас настроено правильно, и вам следует подождать, пока в ваше приложение придет бот.

37
Share: