Вступление

Прочитав название, вы, возможно, задали себе вопрос: Sacrebleu! Вы все еще используете AngularJS? хм.. 🤔

Эта статья идет против течения, делясь с вами устаревшим контентом через умирающий фреймворк #AngularJS . Несколько лет назад я использовал много AngularJS, и теперь я хочу поделиться разработкой моего первого веб-проекта и решением, которое я обнаружил, когда делал приложение AngularJS удобным для SEO.

AngularJS был создан для того, чтобы сделать ваш сайт лучше, предоставляя лучший пользовательский интерфейс. Вы хотели сделать свое приложение быстрее и думали, что SPA будет потрясающим. Вы были правы, но не полностью…

содержание

1. Некоторый контекст
2. Проблемы
3. Доступные решения
4. Мое решение SSR

Некоторый контекст

В свое время я был младшим разработчиком, открывающим для себя веб-программирование, и хотел помочь организации девочек с помпонами, которой управляли мои друзья. Мои цели состояли в том, чтобы:

• Создайте (потрясающий) веб-сайт с нуля
• Продвигайте их в Интернете
• Учиться, учиться, учиться и учиться

Я слышал о 3 новых клиентских фреймворках для создания SPA (одностраничного приложения): ember, Backbone.js , и AngularJS. Будучи новичком, я не обращал внимания на СПА, как я себе говорил ” Фреймворк, созданный Google, должен быть оптимизирован для SEO ” 😑 Я выбрал AngularJS в качестве интерфейса, PHP в качестве внутреннего API с базой данных MySQL и дизайном CSS ручной работы 👨🏻 🎨 . После нескольких месяцев чтения документации, тестирования, проектирования и программирования в свободное время веб-сайт был создан: необычная домашняя страница с презентацией, страница команды, страница блога со статьями и страница контактов. Для менеджера Pom Pom была доступна панель администратора для редактирования общедоступных страниц (она работает как CMS). Через несколько месяцев я опубликовал этот сайт. После выполнения базового руководства по SEO и создания robots.txt и sitemap.xml , на веб-сайт была ссылка в Google. 🎉

Я был так горд, обнаружив свой первый веб-сайт в списке поиска Google… но были ссылки только на один из 4 URL-адресов. В этот момент началось новое приключение: как сделать спа-сайт AngularJS оптимизированным для поисковой системы?

Проблемы

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

{{websiteName}}

вместо:

Title of my website

Кроме того, HTML-тег head не был заполнен правильными метаданными на разных страницах. Невозможно было правильно проиндексировать страницы, что привело к плохому органическому поиску.

До 2009 года Google индексировал только чистый HTML, не включая динамический контент Javascript. Веб-сайты могут быть оштрафованы за SEO, потому что Google посчитал визуализацию содержимого javascript “маскировкой”, и это противоречило рекомендациям веб-мастеров. Однако с 2015 года Google анонсировала возможность понимания динамических страниц:

Сегодня, пока вы не блокируете роботу Googlebot сканирование ваших файлов JavaScript или CSS, мы, как правило, можем отображать и понимать ваши веб-страницы, как современные браузеры.

Другие игроки, такие как Bing, не смогли отобразить javascript. Чтобы внести ясность, вам все равно нужно было сделать свой основной контент доступным через ответ сервера, чтобы гарантировать, что поисковые системы его проиндексируют.

Доступные решения

Во-первых, включите API режима html5 в вашем приложении angular но для этого требуется конфигурация на стороне сервера для перезаписи URL-адреса (в нашем случае .htaccess). Этого было недостаточно, чтобы создать сайт, удобный для SEO. Ниже приведен список доступных решений на тот момент:

• Перепишите кодовую базу до последней версии Angular (2), поскольку она поддерживает рендеринг на стороне сервера с помощью универсального модуля. Я уже потратил много времени на этот проект.
• Одной из альтернатив, позволяющей избежать дублирования, было проанализировать сайт с помощью браузера, выполняющего javascript, такого как PhantomJS, для предварительной визуализации и сохранения результата на сервере и, наконец, отправки его сканерам. Это означает, что при каждом изменении мне приходилось предварительно загружать страницу и отправлять ее на рабочий сервер? Ммм… это было не очень захватывающе 🤔
• Используйте платформу или сервис предварительного рендеринга для обхода веб-сайта, запустите javascript, создайте из него кэш и отправьте его веб-сканерам. Звучит как хорошая идея, но это не бесплатно.

Мое решение SSR

Во-первых, включение API AngularJS html5mode полезно для удаления хэш-бана и получения обычного URL-адреса. Во-вторых, вот мой трюк:

Превратите основной HTML-шаблон AngularJS в PHP-файл.

Я был в состоянии:

• Отредактируйте шаблон PHP и заполните теги метаданных в соответствии с запрошенным URL-адресом (название, описание и т. Д.).
• Добавьте некоторые структурированные данные , используемые сканерами Google для отображения подробных результатов.
• Будучи дружественным к SEO благодаря рендерингу на стороне сервера, вот пример index.php

Затем, в зависимости от пути, я устанавливал метаданные:

if (in_array("contact", $chunks) == true) {
    $title = "Contact";
    $description = "Contact us to have more informations !";
    $img = "/contact.jpg";
    $alt = "contact picture";
} else if (in_array("team", $chunks) == true) {
    $title = "Team";
    $description = "Some description...";
    $img = "/team.jpg";
    $alt = "Some alt...";
}
// More else if

Затем я вставил переменные PHP в HTML:

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

Кроме того, я смог распечатать структурированные данные на index.php , например, блог breadcrumb:

    ';

    return $front;
}

echo display_breadcrumb($article_name);

?>

Это было не самое лучшее решение (и не самое красивое) появиться на странице поиска, но оно выполняло свою работу. 🤷 Мужской знак Это приводит к адскому обслуживанию, когда мне приходилось вносить важные изменения в контент, мне приходилось каждый раз менять содержимое рендеринга…

Вывод

Создание веб-сайта с нуля самостоятельно очень полезно во многих аспектах: на стороне сервера, API, на стороне клиента, SEO, безопасность, дизайн и многое другое. Я посоветую вам сделать то же самое 😉 Я потратил так много энергии на этот проект, и иногда я действительно думал сдаться, потому что в начале мне было так трудно. Это также был проект, которым я занимался в свободное время, и за него мне не платили. Рассказывая вам эту историю, я делаю шаг назад и возрождаю тот опыт, тот выбор, который я сделал, и я многому научился из этого.

В настоящее время множество замечательных фреймворков облегчают нашу жизнь, таких как Next, Next, Hugo и многое другое! AngularJS вступил в долгосрочный период поддержки и я посоветовал вам перейти на последнюю версию Angular или других фреймворков.

Я перенес оригинальный веб-сайт Pom Pom girl в современный стек: Next + Vuetify + Экспресс-API. Проверьте это: cheerydolls.fr .

Если вы хотите узнать больше о поисковой оптимизации, я недавно прочитал полную и интересную шпаргалку по dev.to .

Оставьте лайк/комментарий, чтобы поддержать мою статью, или следуйте за мной, чтобы получать уведомления о моих следующих статьях. 🔥

Спасибо за чтение!

Ссылки в 2016 году

https://geoffkenyon.com/angularjs-seo-crawling/ https://geoffkenyon.com/angularjs-seo-crawling/ https://stackoverflow.com/questions/41957366/angularjs-seo-once-and-for-all https://www.verticalmeasures.com/blog/search-optimization/overcoming-angular-seo-issues-associated-with-angularjs-framework/

Оригинал: “https://dev.to/steeve/angularjs-undefined-ssr-seo-46lm”