SEO-ориентированный AngularJS с HTML5 pushState (), переписать и двенадцатью строками кода
При переносе приложения электронной коммерции ( piqchocolates.com ) от Grails и Tomcat до стека AngularJS, Java EE (JAX-RS) и JBoss WildFly, я должен был убедиться, что новая платформа имеет паритет функций во всех областях, которые ценны для нашего бизнеса. Поисковая оптимизация (SEO) очень важна для нас, потому что мы в основном продаем наш бизнес в Интернете. Короче говоря, нам нужны оптимизированные для поисковых систем URL-адреса и глубокие ссылки; эта статья покажет вам, как реализовать оба.
Проблемы с SEO
Мое первоначальное исследование выявило проблемы с SEO AngularJS фрагменты и URL-адреса (#!). А именно, веб-сканеры не знают, как правильно переходить по ссылкам, когда приложения используют эту схему URL.
Обходы были громоздкими, поэтому пришло время обратиться к HTML5 «pushState» новая функция браузера, позволяющая изменять URL-адрес без отправки полных запросов страниц обратно на сервер; PushState безболезненно включить в приложении AngularJS.
Настроить клиент
var app = angular.module ('app', ['ngRoute']); // Включить html push-состояние app.config (function ($ locationProvider) {$ locationProvider.html5Mode ({enabled: true, requireBase: true});}); и <! doctype html> <html class = "no-js" lang = "en"> <head> <base href = "/"> <! - это важно -> </ head> <body> < script src = "libs / angular / angular.js"> </ script> <script src = "scripts / app.js"> </ script> </ body> </ html>Код выше гарантирует, что во время навигации СПА через ссылки и кнопки адресная строка браузера обновляется соответственно, чтобы представить новое состояние в приложении.
С точки зрения ценности для бизнеса, более важной особенностью является сохранение состояния при обновлении страницы. Это где SEO входит в картину, и с этим, перезапись ,
Настроить сервер
Чтобы использовать Rewrite в приложении JAX-RS и AngularJS, просто включите эту зависимость в зависимости `pom.xml` вашего проекта.
<dependency> <groupId> org.ocpsoft.rewrite </ groupId> <artifactId> rewrite-servlet </ artifactId> <версия> 2.0.12.Final </ version> <! - или последняя версия -> </ зависимость >Как только вы это сделали. Просто создайте конфигурацию перезаписи, подобную следующей; это перенаправляет все запросы (которые не сопоставлены с существующими каталогами или сервлетами) в `/ index.html`. (Предполагается, что `/ index.html` является точкой доступа к вашему Angular-приложению.
@RewriteConfiguration открытый класс PushStateConfigurationProvider extends HttpConfigurationProvider {@Override public Configuration getConfiguration (окончательный контекст ServletContext) {возвращение ConfigurationBuilder.begin () .addRule () .when (Direction.isInbound (). И (Path.matches ("/ {path}" )) .andNot (Resource.exists ("/ {path}")) .andNot (ServletMapping.includes ("/ {path}"))) .perform ((Log.message (Level.INFO, "Пересылка в индекс. html from {path} "). and (Forward.to (" / index.html ")))) .where (" path "). соответствия (". * "); } @Override public int priority () {/ * Это обеспечивает порядок, если у вас несколько конфигураций * / return 10; }}Итоговая настройка представляет собой две строки кода в AngularJS, еще десять строк кода для конфигурации перезаписи URL, позволяет нам хранить всю конфигурацию в одном месте и даже включает в себя значимую и легко настраиваемую запись в журнал.
Что наиболее важно, поскольку сайт теперь является дружественным для веб-сканеров, наше приложение теперь поддерживает поисковую оптимизацию. Кроме того, если это еще не все, эта конфигурация невероятно проста и удобочитаема. Не должно быть проблем с пониманием того, что это делает, когда я возвращаюсь к этому коду для нашего следующего обновления. Перепишите FTW!
Заключение
Я надеюсь, что это полезно для вас, и это подтверждает, что Java и JavaScript - это комбинация, с которой нужно считаться.О Пик Шоколад
Пик Шоколад предоставляет персонализированные и нестандартные формы конфет для подарков, сувениров, мероприятий.