AngularJS SEO с PHP · Луис Мело

Как преемственность моего последнего поста о Комментарии Facebook с AngularJS Представляю вам очень распространенную ситуацию при разработке SPA (одностраничного приложения), SEO .

#Context При разработке SPA, информация, представленная в HTML, должна запрашиваться через AJAX с Javascript. Это имеет большие преимущества, такие как рендеринг на стороне клиента, исключение обновления страницы, удивительная гибкость при манипулировании DOM, веб-компоненты и так далее. Но с этим раем приходит проклятие. На момент написания этой статьи веб-сканеры по-прежнему не могли отображать Javascript (кроме Google, насколько я знаю), и в результате они не могут читать любой контент, который делает ваше веб-приложение удивительным, и если это произойдет, мы столкнемся с некоторыми основные проблемы SEO.

Но почему нет, спросите вы? Хорошо, если вы использовали AngularJS до того, как заметили символ «#», который появляется в URL. Этот символ известен как «идентификатор фрагмента», и первым, когда появился Интернет, было создание якорей для ссылок внутри веб-страницы, но теперь он также используется для предотвращения перезагрузки страницы при работе с веб-страницами на основе AJAX.

Допустим, у вас есть страница профиля пользователя, которой вы хотите поделиться на Facebook, Twitter или другой платформе. Эти сканеры используют метатеги для извлечения необходимых данных для отображения на этих платформах, и, поскольку мы используем AngularJS, наиболее вероятным способом достижения этого является использование синтаксиса выражения {{foo_bar}} . Как я уже говорил, сканеры не могут отображать Javascript, и вот что произойдет, например, в Facebook:

От Переполнение стека

Не бойтесь, есть несколько решений, которые могут помочь вам создать SEO Friendly SPA.

Примечание: эта статья посвящена PHP-решению, поскольку мои проекты хранятся на виртуальном хостинге, и я не могу установить NodeJS или другую специальную технологию, которая не предоставляется хостом.

# Решение Решение заключается в предоставлении статических «снимков» вашего HTML со всем содержимым, готовым к показу. Вот почему на веб-страницах, отображаемых на стороне сервера, такой проблемы нет, поскольку все они предоставляются при каждой загрузке страницы. В этом примере я объясню вам, как этого можно достичь с помощью PHP (взгляните также на Решение PhantomJS для автоматизированного решения, но это не может быть применено в этом примере среды разработки).

Есть несколько шагов, необходимых для решения проблемы:

• Настройте AngularJS на использование дружественных для сканера URL-адресов, чтобы сначала «связаться» с сервером в качестве концентратора;
• Настройте Apache (.htaccess) для перенаправления всех запросов, поступающих от искателей;
• Запросите контент у API и предоставьте заполненный HTML.

### Настройте AngularJS на использование дружественных для сканера URL-адресов. Сейчас AngularJS использует хеш для предоставления контента через Ajax. Чтобы начать отправлять прямые HTTP- запросы на сервер, мы должны активировать режим HTML5 и начать использовать pushState .

Включив режим HTML5 , приложение начнет использовать API истории HTML5 для обеспечения перемещения между страницами с помощью URL-адресов, таких как www.myapp.com/app-page, без перезагрузки страницы.

Не забудьте также разместить тег рядом с заголовком вашей веб-страницы, поскольку базовый URL-адрес используется для разрешения всех относительных URL-адресов во всем приложении независимо от точки входа в приложение, если только вы не настроили $ locationProvider, чтобы не требовать базового пометить, передав объект определения с помощью requireBase: false для $ locationProvider.html5Mode () :

Поэтому теперь мы должны позаботиться о запросах на стороне сервера.

### Настройка Apache Поскольку AngularJS теперь предоставляет «нормальные» URL-адреса (без идентификатора фрагмента), и, следовательно, необходимо подготовить его для ответа.

Прежде чем делать это, имейте в виду, что на вашем веб-сервере должны быть установлены модули mod_rewrite, mod_proxy и mod_proxy_http .

Прежде всего, вам нужно указать, какой будет ваша главная веб-страница для обычного пользователя (без сканера):

Здесь мы создаем набор правил, переписываем правила, которые проверяют, имеет ли запрос место назначения несуществующего файла, каталога (строки 3 и 4), чтобы разрешить доступ к реальным файлам, и проверяют, есть ли запрос URL отличается от «индекса».

Если эти условия не будут выполнены, произойдет перенаправление на index.html, если наш SPA работает. Таким образом, мы гарантируем, что каждый HTTP- запрос будет перенаправлен в SPA, а не в другой файл на сервере, если он не предназначен.

Теперь, когда у нас запущено приложение, мы должны проверить, поступил ли HTTP- запрос от сканера:

В первой строке у нас есть возможность понять, поступил ли запрос от Facebook, Twitter, Pinterest или даже Google. Если это правда, мы можем написать набор правил, которые будут предоставлять информацию из файла PHP в соответствии с запрошенным URL. Во второй строке, используя [P], мы также информируем Apache об использовании модуля mod_proxy, то есть обращаемся к page.php без того, чтобы сканер знал, что произошло перенаправление.

С этой настройкой у нас будет этот файл .htaccess :

Теперь мы можем подготовить наши файлы PHP для получения необходимой информации.

### Обеспечение HTML Предполагая, что вы используете API для получения данных, мы можем использовать его с помощью внутреннего сценария, как это делает AngularJS. Давайте рассмотрим пример страницы профиля:

Мы начнем с определения всех путей, необходимых для выполнения запросов и печати некоторых конкретных данных. После этого через API выполняется запрос необходимых данных и подготавливаются переменные, которые будут использоваться в нашем HTML.

Теперь давайте заполним HTML:

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

# Давайте проверим это, когда все настроено, пришло время посмотреть, действительно ли это решение работает. В Интернете есть инструменты, которые обеспечивают некоторую проверку:

Имейте в виду, что это окончательное решение, и есть другие альтернативы, которые могут вам лучше подойти и автоматизировать этот процесс. Главный недостаток заключается в том, что сканеры все еще не готовы иметь дело с этими технологиями, которые преобразуют Интернет, и на данный момент нам приходится иметь дело с этим. Также посмотрите на другие решения, такие как Prerender.io или же PhantomJS ,

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

Похожие

Комментарии