AngularJS SEO — раз и навсегда

Я работаю над большим проектом с 15 дочерними сайтами и 13 различными страницами схемы. В настоящее время сайт основан на ui.route для всех страниц, и мои данные установлены по запросу $http angular. После тестов и испытаний в консоли поиска похоже, что Google не видит все мои страницы, кроме домашней страницы, и данные из запроса $http не отображаются. Что я делаю неправильно?

Что я делаю до сих пор:

Установите базовый тег в <head>:

<base href="/" />

Создайте .htaccess:

RewriteEngine On 
Options FollowSymLinks

RewriteBase /

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /#/$1 [L]

Добавить в app.config:

$locationProvider.html5Mode(true);

Пример к моему app.config:

function createState(name) {
    return {
        url: '/' + name + '/:id',
        templateUrl : 'templates/pages/' + name +'.html',
        controller : 'singlePage',
        resolve: {
           pageData: function(getData, $stateParams) {
                var params = $stateParams;
                params.type = this.self.name;
                return getData.getPageData(params.type, params)
           }
        }
    }
}
.state('info', createState('info'))
.state('news', createState('news'))
.state('event', createState('event'))

$urlRouterProvider.otherwise('/');
$locationProvider.html5Mode(true);

person Zeev Katz    schedule 31.01.2017    source источник
comment
Что ж, бот Google может выполнять JavaScript (эта функция была реализована не так давно). Но бот по-прежнему сканирует URL, как и раньше. Он проверяет атрибут href всех ваших a-тегов в HTML-разметке и следит за ними. Если вы используете функцию изменения состояния JavaScript, предоставляемую ui.router, бот никогда не сможет перейти по этим ссылкам. Он также не распознает изменение маршрута URL-адреса HTML5. -› поэтому никакие страницы не будут сканироваться/индексироваться.   -  person lin    schedule 31.01.2017
comment
Я мог бы создать ответ, который предоставит то, что я сказал выше. Я также могу дать вам решение, как сделать другие URL-адреса видимыми для робота-краулера.   -  person lin    schedule 31.01.2017
comment
@lin Я действительно благодарю вас за полный ответ!   -  person Zeev Katz    schedule 31.01.2017


Ответы (2)


Почему сканер Google не отслеживает мои ссылки/изменения состояния, созданные UI Router?

Что ж, бот Google может выполнять JavaScript (эта функция была реализована не так давно). Но бот по-прежнему сканирует URL, как и раньше. Он проверяет атрибут href всех ваших a-тегов в HTML-разметке и следит за ними. Если вы используете функцию изменения состояния JavaScript, предоставляемую ui.router, бот никогда не сможет перейти по этим ссылкам. Он также не распознает изменение маршрута URL-адреса HTML5. -> поэтому никакие страницы не будут сканироваться/индексироваться

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

  • Социальный контент, предоставляемый метатегами. (Совместное использование страницы на facebook при использовании og:image и т. д. не будет работать с привязкой AngularJS E2E)
  • Тег title, используемый с привязкой E2E, не распознается при совместном использовании в социальных сетях.

Как заставить робота-сканера индексировать ваши страницы? Это довольно просто: просто создайте sitemap.xml, включая все ваши URL-адреса, загрузите его на свой веб-сервер и зарегистрируйте с помощью инструментов Google для веб-мастеров. Теперь бот Google просканирует все URL-адреса, указанные вами в sitemap.xml, и, наконец, проиндексирует ваши страницы/URL-адреса! знак равно

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
 <url>
  <loc>http://example.com/</loc>
 </url>
 <url>
  <loc>http://example.com/anotherside/</loc>
 </url>
 <url>
  <loc>http://example.com/search/param1/param2</loc>
 </url>
</urlset> 

Мы сделали это, и это работает очень хорошо. Вы можете создать свой sitemap.xml вручную. Мы сделали еще один шаг вперед и автоматизировали этот процесс. Наши XML и ui.routes создаются на внутренней стороне наших веб-приложений. Итак, у нас есть файл конфигурации JSON, в котором мы настраиваем все наши маршруты. Сценарий создает XML и JavaScript ui.routes автоматически.

Вот результат того, что мы сделали: https://www.google.de/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=site:linslin.org&start=0

Если вы хотите создать красивую страницу, оптимизированную для SEO/социальных сетей, не используйте приложения SPA, такие как AngularJS. Я бы также не предпочел создавать прекомпилятор. Нет смысла создавать SPA-приложение и прекомпилировать его. Перед созданием прекомпилятора вы должны вернуться к истокам, используя PHP, Node.JS, Java и т. д. для создания веб-приложения.

person lin    schedule 31.01.2017
comment
Большое спасибо! у вас есть простой способ автоматического создания карт сайта (с угловым маршрутом)? - person Zeev Katz; 31.01.2017
comment
Мы создали индивидуальный сценарий. Но извините. Мы не будем делиться этим. - person lin; 31.01.2017
comment
Ммм, я не знаю. Вы должны сделать это самостоятельно. - person lin; 31.01.2017
comment
Вы можете использовать botmap.io для создания карты сайта, он поддерживает сайты JavaScript. - person Ebin Manuval; 24.05.2017

Боты Google не компилируют JavaScript, ui-router здесь не будет работать, поэтому, когда боты Google будут сканировать URL-адрес (независимо от того, какой URL-адрес), он всегда будет получать индексную страницу веб-сайта. На стороне сервера определите бота, проверив пользовательский агент, а затем вы можете использовать phantomjs для загрузки углового приложения и компиляции html для бота (это то, что я использовал для своего приложения. на сервере у меня есть node js)

читайте больше на здесь

person vikas    schedule 31.01.2017
comment
Предварительная компиляция вообще не является хорошим решением. Есть много ограничений и проблем с этим. Я бы предпочел создать приложение на основе бэкэнда (PHP, Node, Java и т. д.), прежде чем смешивать приложение SPA с прекомпилятором. - person lin; 31.01.2017
comment
Спасибо за ваш ценный комментарий и ответ. Я должен многому научиться. - person vikas; 31.01.2017
comment
Предварительная компиляция только для бота Google подходит и даже рекомендуется Google в качестве обходного пути. - person chillyistkult; 16.03.2017