Предупреждение: Angular JS убивает ваши усилия по SEO

1. Что такое Angular?
3. Одностраничные приложения
4. Директивы
5. Шаг 1: Используйте сторонние решения
6. Тест локально
7. Проверьте ваше промежуточное ПО
8. Для тех, кто использует push-состояние html5 (рекомендуется):
9. Шаг 2: сделайте снимок сами
10. Шаг 3: объединить PHP с AngularJS
11. Внутри modifier.php
12. Резюме

Помните 90-е? Google только начинал, смартфонов и приложений еще не было, было ограниченное количество языков и платформ кодирования, и жизнь, казалось, была проще. У разработчиков был приличный объем работы, который иногда включал разочаровывающие или изнурительные сизифовские части, так что по мере развития технологий в приложениях для смартфонов появлялись новые платформы - все они стремились максимально упростить процесс разработки.

Основная проблема в этом заключается в том, что мир разработки и мир онлайн-маркетинга, в частности, SEO, не смогли синхронизироваться, поэтому мы являемся свидетелями запуска новых и передовых платформ разработки, которые в основном основаны на JavaScript. Это означает, что Google может неправильно отображать или индексировать эти страницы. Вот отличный пост показывая, как Google может индексировать JS. Но, к сожалению, в конце концов, с точки зрения Angular, большинство онлайн-маркетологов и разработчиков оказываются в ситуации, когда сайт только частично отображается и индексируется, или вообще не знает, не зная почему.

Этот пост предназначен для объединения двух вышеупомянутых миров, когда речь заходит о продвижении англоязычного веб-сайта. Он предназначен для того, чтобы дать профессиональным маркетологам более глубокое понимание платформы Angular, которую можно использовать при встрече с клиентом, который управляет сайтом Angular. Вы узнаете, как Angular влияет на сайт в целом, его преимущества и недостатки, его ожидаемые проблемы со сканированием и как все можно преодолеть, чтобы оптимизировать сайт. Все это, даже не призывая клиента сменить платформу.

Тем не менее, этот пост также предназначен для разработчиков, которые могут не знать о SEO. Вы знаете, как это работает, вы можете работать с профессионалом SEO и не знать много о SEO, кроме общих вещей, таких как важность тегов , оптимизация кода и тому подобное. Когда дело доходит до более сложных вопросов, вы не всегда понимаете, почему команда SEO настаивает на размещении определенного тега или почему профессионалы SEO подчеркивают важность одних вещей над другими, когда вы можете тайно чувствовать, что это так или иначе бессмысленно.

В этом посте я постараюсь изложить основы Angular для маркетологов: почему это необходимо, его плюсы и минусы и шаги, необходимые для того, чтобы вывести его на правильный путь. Самое главное, я постараюсь предоставить инструменты, которые помогут маркетологам лучше и эффективнее общаться с разработчиками сайтов, чтобы они могли наконец понять, что именно требуется на другом конце - и вы можете быть уверены Ваши потребности поняты. Затем я попытаюсь объяснить процесс индексации Google для разработчиков, и проблемы, которые мы, маркетологи, иногда имеем с Angular.

Чтобы уточнить, этот пост ни в коем случае не предназначен для продажи Angular. Несмотря на свои многочисленные преимущества, это все еще очень проблематичная платформа, которая не обладает преимуществами, специфичными для SEO. Цель этой статьи, скорее, предоставить вам правильные инструменты для работы с данным веб-сайтом Angular и привести сайт на основе Angular к максимальной производительности, которую он может достичь с точки зрения SEO. Если вы находитесь на распутье, решая, какой язык и платформу выбрать для нового веб-сайта, я настоятельно рекомендую взвесить другие варианты, прежде чем выбирать Angular для клиентской части.

Наконец, слово предостережения. Часть этой статьи, которая адресована разработчикам, может быть слишком продвинутой и трудной для понимания маркетологами, и наоборот. Если вы не выполните 100%, это совершенно нормально, если вы полностью понимаете ту часть, которая предназначена для вас.

Что такое Angular?

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

Angular собрал все возможные инструменты фреймворка и связал их вместе, но вместо того, чтобы просто создать пакет, Angular гарантирует, что инструменты действительно работают вместе. Это инфраструктура следующего поколения, которая обеспечивает надежный способ реализации парадигмы Module-View-Controller.

Традиционные фреймворки требуют разделения MVC (Model View Controller) на его компоненты, а затем создания кода для их рекомбинации. Angular подходит к этому с противоположной стороны: просто разложите ваше приложение на модули MVC и вставьте их в Angular, который сделает всю работу за вас. Он не только будет управлять модулями, но также предоставит канал, который позволяет им общаться. Этот подход также предотвращает написание ярлыков чрезмерно усердным программистом, который просто мешает.

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

Пока все хорошо - верно? Проблема начинается, когда разработчики начинают использовать Angular и для клиентской стороны. Использование Angular для клиентской части может привести к тому, что Google не будет индексировать ваши страницы, поэтому с точки зрения SEO это делает сайт бесполезным. Мы должны помочь ботам Google в процессе сканирования и индексирования, в противном случае видимость сайта резко упадет.

Маркетологи хорошо знают эту проблему, но разработчики не всегда понимают, как работает этот процесс, поэтому я кратко объясню. Боты Google отображают HTML. Любой не HTML-код на сайте не будет отображаться Google, что означает, что он не будет отправлять нужное нам сообщение в Google и его постоянно совершенствующийся алгоритм. С годами в алгоритм добавлялось все больше и больше тегов, которые помогают Google расшифровывать такую ​​информацию, как целевая аудитория сайта (страна, язык, валюта, часовой пояс), версия, которую мы предпочитаем показывать, и многое другое. Когда вы просматриваете сайт, вам нужно осознать тот факт, что сайт отображает и реагирует так, как вы планировали, с точки зрения разработки, ни в коем случае не означает, что он функционирует так, как этого хотели бы Google и профессионал в области SEO. Помогите специалисту по SEO, убедившись, что указанные им компоненты важны и закодированы так, чтобы это было понятно для Google.

Мобильные приложения

Очевидно, что если вы только что написали основное приложение с использованием Angular, вы также захотите использовать ngCordova для своего мобильного приложения. Предоставляя более 63 расширений AngularJS помимо API-интерфейсов Apache, ngCordova ускорит разработку вашего приложения и сделает его намного более эффективным. Вы получаете оболочки AngluarJS для всех тех плагинов, которые необходимы для фотосъемки, сканирования штрих-кода и множества других задач, доступных всего лишь несколькими строками кода.

Одностраничные приложения

Чем быстрее становится сеть, тем больше одностраничных приложений мы обязательно увидим; В конце концов, зачем заставлять пользователя ждать загрузки дополнительных страниц при каждом нажатии кнопки? И это верно не только для мобильных приложений, но и для обычных ПК. С Angular вы можете создавать эти страницы, не думая дважды.

При использовании Angular для создания внутренней системы две проблемы могут быть немедленно устранены:

1. Более короткий период разработки
2. SEO не имеет значения

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

Тем не менее, все еще остается вопрос об Angular и SEO, поскольку боты отображаются не в JavaScript, а в HTML. Ответ на этот вопрос довольно прост: просмотры страниц Angular JS в чистом HTML; Контроллеры JavaScript предназначены для простой обработки бизнеса. Кроме того, AngularJS не только работает на Goggle, но и активно внедряется в собственные продукты.

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

Вот несколько важных типов тегов, с которыми вы должны ознакомиться:

Директивы

1. ng-app: директива, которая определяет приложение AngularJS и связывает его с HTML
2. ng-model: директива, которая связывает значения данных приложения AngularJS с элементами управления вводом HTML
3. ng-bind: директива, связывающая данные приложения AngularJS с тегами HTML.

Режимы работы

Примечание: я знаю, что трудно понять код из изображений, поэтому я подготовил файл со всеми кодами Вот ,

Шаг 1: Используйте сторонние решения

Поисковые системы не отображают JS. Это требует правильной интеграции, поэтому поисковые системы будут принимать соответствующий исходный код HTML при сканировании. Существует несколько инструментов для создания снимков HTML, которые легко интегрируются путем внедрения кода в файл конфигурации сервера.

Prerender.io - пример ngnix.conf:
Шаг 1:

Тест локально

После установки промежуточного программного обеспечения проведите локальное тестирование, загрузив сервер Prerender с открытым исходным кодом:

Порт по умолчанию - 3000. Вам нужно изменить порт сервера на 1337 с экспортом, если это необходимо.

Теперь сервер Prerender должен быть запущен, и вы сможете получить доступ к следующему URL-адресу и увидеть домашнюю страницу Google: http: // localhost: 3000 / https: //www.google.com/

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

Проверьте ваше промежуточное ПО

Установите для вашего промежуточного программного обеспечения PrerenderServiceUrl, чтобы он указывал на http: // localhost: 3000 / (вместо размещенной службы Prerender).

Для тех, кто использует push-состояние html5 (рекомендуется):

Добавьте следующий метатег к <head> ваших страниц:

<meta name = ”фрагмент” содержание = ”!”>

Если URL выглядят так:

http://www.example.com/user/1

Затем попробуйте получить доступ к URL-адресам следующим образом:

http://www.example.com/user/1?_escaped_fragment_=

Для дополнительной информации посетите Prerender.io

Если ваше промежуточное ПО настроено правильно, вы должны увидеть свою страницу! Вы поймете, что это правильно, если вы посмотрите исходный код своей страницы и увидите HTML, а не только JavaScript.

Vevo.com является примером компании, которая использовала сервисы BromBone для создания снимка для поисковых систем на своем новом сайте. Кроме того, взгляните на lyft.com, который приобрел услуги Prerender.io. Такие инструменты полезны, они работают, и они отлично подходят для стартапов, которые стремятся сэкономить время и трудовые ресурсы при максимально быстром выводе продукта на рынок.

Шаг 2: сделайте снимок сами

Вы можете сделать это самостоятельно. Сторонние поставщики обычно реализуют следующую процедуру:

• Используйте инфраструктуру node.js.

• Установите службу Phantomjs, которая прослушивает сервер (порт: 8080/8443).

(вы можете увидеть результат в файле test.html)

• Введите код в файл конфигурации сервера, задача которого состоит в том, чтобы проверить, сканировал ли бот страницы, и если это так, служба Phantomjs отвечает за создание снимка HTML.

Важно помнить, что все это происходит на лету, что может создать проблемы с эксплуатацией, обслуживанием и стабильностью системы для команды разработчиков из-за Phantomjs, который - поскольку он не слушает - не создает снимок. Таким образом, это решение рекомендуется только для крупных, богатых контентом сайтов или компаний с подходящими рабочими ресурсами, такими как CNN, Bloomberg и т. Д.

Шаг 3: объединить PHP с AngularJS

Еще один творческий вариант вы можете найти на сайте Alvexo. Этот подход направлен на то, чтобы сэкономить время, затрачиваемое на эксплуатацию и обслуживание, необходимое для nodejs и Python.js. Это также идеальное решение для компаний, которые не перешли на mongo db и nodejs.

• Разделите содержимое тела и верхний / нижний колонтитулы, используя index.php, определяя на сервере каждую страницу как ссылку на index.php.

• Определите index.php как модификатор . На этой странице Angular отвечает за интерпретацию понятного URL, который появляется на каждой странице. Он рисует интерпретацию для каждого Дружественного URL, а также какую страницу отображать из базы данных.

Внутри modifier.php

• Создавайте страницы PHP по ответу PHP . Оболочка страниц и контента, которые важны для поисковых систем, создаются php по запросу пользователя. В этом случае метаописания, заголовки и т. Д. Для Angular отвечают за контент, не используемый для сканирования поисковыми системами (не для целей SEO). Например, в формах этот контент генерируется на лету, и в результате поисковые системы не могут их прочитать.

Из-за проблем с поисковыми системами мы определили, что все, что выше и ниже ng-view, жестко запрограммировано php из базы данных. Важно отметить, что меню, верхний и нижний колонтитулы на таких сайтах должны отображаться во время реализации страницы, а не после, просто потому, что поисковые системы немедленно запрашивают эту информацию.

Обратите внимание: из-за того, что JS не на 100% «читабелен» для ботов Google, использование сторонних инструментов не будет работать 100% времени, и в некоторых случаях вам нужно быть более изощренным (как пример Alvexo) ). Давайте посмотрим, что может случиться иногда с помощью Prerender:

beepmeapp.com является хорошим примером использования Prerender как есть, что приводит к отсутствию заголовка и описания, которые не могут быть правильно отображены в Google Snapshot. Как вы можете видеть ниже, заголовок страницы - это тэг alt логотипа (это первое, что Google видит на странице), а описание - это, по сути, группа фраз в верхней части страницы, оба признака того, что Google не вижу ни названия, ни описания.

Google не может прочитать заголовок или описание:

Но потом я узнал, что к концу написания этого поста они исправили проблему, и теперь Google может прочитать заголовок и описание, как вы можете видеть ниже:

Вот как теперь выглядит HTML-код:

И вот как Google читает это:

Резюме

Я искренне надеюсь, что этот пост помог преодолеть некоторые пробелы между маркетологами и разработчиками. При всех значительных преимуществах Angular это ставит более одной существенной задачи. Поэтому, если вы еще не открыли новый веб-сайт и изучаете языки программирования, вы можете серьезно пересмотреть вопрос об использовании Angular. Если вы используете Angular в качестве выбранного языка, важно использовать один из методов, подробно описанных в этом посте, чтобы обеспечить оптимальный доступ к вашему веб-сайту для Google. Для дальнейшего чтения я предлагаю свой гид по Продвинутые методы на странице это значительно улучшит параметры вашего сайта.

Наша отрасль учит нас, что существует бесчисленное множество креативных способов решения одной и той же проблемы - если вы ее нашли, поделитесь ею в комментариях!

Проверка кодов и процессов и помощь с этим постом разработчик Ошри Амсалем.

Кредиты изображений

Популярное изображение: alphaspirit / Shutterstock.com
Фото в посте: iunewind / Shutterstock.com
Все скриншоты Бен Орен. Снято в октябре 2015 года.

Похожие

Комментарии