Создание статических страниц SEO для веб-сайта AngularJS + Spring MVC

У меня есть проект с использованием Spring MVC + AngularJS. Все данные динамические. В этом приложении есть большая база данных о местах.

В целях SEO необходимо создать статическую страницу для каждого местоположения и поместить их в удобные для SEO URL-адреса (например, / localhost / path1 / path2 / here-is-very-friendly-name).

Как лучше всего это сделать?

Должен ли я просто сгенерировать страницы отдельно и поместить их в какую-то отдельную папку из основного приложения (если это так, как лучше всего это сделать?), Или я могу использовать для этого Spring / Angular?

(для дополнительной информации) каждый объект местоположения содержит _1 _, _ 2_, latitude, longtitude, address, district, city, country.


person user1935987    schedule 22.06.2016    source источник
comment
Вы должны назначить награду за этот вопрос. Это довольно интересно.   -  person Demeter Dimitri    schedule 22.06.2016


Ответы (4)


На самом деле это мой опыт работы с Angular / SEO.
Вы должны внести много изменений !!


1) Удаление # из URL

app.config(['$locationProvider', function ($locationProvider) {

    $locationProvider.html5Mode({
        enabled: true,
        requireBase: false
    });

}]);

2) Проверьте свою маршрутизацию MVC

До сих пор, возможно, у вас был один HomeController для возврата index.cshtml и загрузки вашего приложения Angular.
После удаления # из маршрутизации Angular вы должны установить MapRoute для всех ваших маршрутов.
Потому что в этой ситуации вы впервые пытаетесь для посещения таких маршрутов, как www.site.com/any_route Angular. Приложение еще не загружено, поэтому оно пытается получить страницу из MVC Routing. Но после этого $routeProvider выполняет свои обязанности.


3) Используйте переменные MVC для метатегов

Для лучшей индексации и дружбы со сканерами и ботами мы должны использовать переменные MVC для инициализации метатегов веб-сайтов.
Если вы установите заголовок страницы с помощью привязок Angular, например <title>{{title}}</title>, всякий раз, когда вы захотите поделиться своей страницей через социальные сети, вы увидите {{title}} потому что социальные сети не могут отображать сайты.

<title>@ViewBag.title</title>
<meta name="Description" content="@ViewBag.description">
<meta name="Keywords" content="@ViewBag.keywords">
<meta property="og:title" content="@ViewBag.title" />
<meta property="og:description" content="@ViewBag.description" />

4) Заменить привязку Angular для метатегов

Наше приложение - это SPA, поэтому после загрузки Angular мы выходим из игровой площадки MVC. Мы должны заменить переменные Angular на переменные MVC.

angular.element('title').remove();
angular.element('meta[name="Description"]').remove();
angular.element('meta[name="Keywords"]').remove();
angular.element('meta[property="og:title"]').remove();
angular.element('meta[property="og:description"]').remove();

var description = angular.element('<meta name="Description" content="{{meta.description}}">');
angular.element('head').prepend(description);    

var keyword = angular.element('<meta name="Keywords" content="{{meta.keywords}}">');
angular.element('head').prepend(keyword);    

var titleOg = angular.element('<meta property="og:title" content="{{meta.title}}" />');
angular.element('head').prepend(titleOg);    

var descriptionOg = angular.element('<meta property="og:description" content="{{meta.description}}" />');
angular.element('head').prepend(descriptionOg);

var title = angular.element('<title ng-bind="meta.title"></title>');
angular.element('head').prepend(title);  

$rootScope.$applyAsync(function () {
    $compile(title)($rootScope);
    $compile(description)($rootScope);
    $compile(keyword)($rootScope);
    $compile(titleOg)($rootScope);
    $compile(descriptionOg)($rootScope);
});

5) используйте JSON-lD для динамического содержания

Если вы знакомы с SCHEMA.org, вам лучше использовать JSON-LD вместо других, потому что боты поисковых систем могут ловить и анализировать <script type="application/ld+json"></script>s которые вставляются динамически после загрузки страницы.
Вы должны проверить Schema Dictionary, чтобы найти тип, который ближе всего к вашей структуре данных.
Например, это моя компания json-ld:

<script type="application/ld+json">
    {
        "@context" : "http://schema.org",
        "@type" : "Organization",
        "name" : "داده کاوان امیرکبیر",
        "alternateName" : "ADM | Amirkabir Data Miners",
        "description": "شرکت داده کاوان امیرکبیر | تولید کننده نرم افزارهای تحت وب، از قبیل حسابداری آنلاین 'کاج سیستم' ، سیستم مدیریت پروژه 'تسک من' و ...",
        "url" : "https://adm-co.net",
        "email": "[email protected]",
        "logo": {
            "@type": "ImageObject",
            "url": "http://khoonamon.com/images/ADM_Logo.png",
            "caption": "لوگو داده کاوان امیرکبیر",
            "width": "2480px",
            "height": "1459px"
        },
        "telephone": "+98-21-44002963",
        "address": "تهران، خیابان آیت ا... کاشانی، نبش خیابان عقیل، پلاک 380، طبقه دوم",
        "contactPoint" : [{
            "@type" : "ContactPoint",
            "telephone" : "+98-21-44002963",
            "contactType" : "customer service",
            "contactOption" : "TollFree",
            "areaServed" : "IR",
            "availableLanguage" : "Persian"
        }],
        "sameAs" : [
            "https://google.com/+ADMcoNet-GPlus",
            "https://www.linkedin.com/company/adm-amirkabir-data-miners-?trk=biz-companies-cym",
            "https://instagram.com/AmirkabirDataMiners/",
            "https://www.facebook.com/AmirkabirDataMiners",
            "http://www.pinterest.com/AmirkabirDM/",
            "https://twitter.com/AmirkabirDM",
            "https://www.youtube.com/channel/UCQxP0vZA05Pl9GlyXXQt14A/about"
        ]
    }
</script>
person MeTe-30    schedule 29.06.2016
comment
Привет, спасибо за ответ. Это полезно и информативно для SEO такого рода приложений. Но это не ответ на исходный вопрос. - person user1935987; 29.06.2016
comment
@ user1935987Вы уверены ?? - person MeTe-30; 29.06.2016

Пробовали ли вы такие инструменты, как SEO.js (http://getseojs.com/) и prerender.io (https://prerender.io/). Вы пробовали их?

person Shankar P S    schedule 24.06.2016
comment
да, я знаю об этих инструментах, но это просто обходной путь для самого присутствия страниц, он вообще не отвечает на вопрос. - person user1935987; 25.06.2016

Я сам не пробовал, но PhantomJs, вероятно, будет лучшим вариантом для этого.

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

Из того, что я понял из вашего вопроса, вы еще не использовали эти пути во внешнем интерфейсе в своем приложении angular? Если это так, то я бы сказал, что другой вариант - фактически отобразить их на стороне сервера только с помощью Spring.

Проблема здесь в том, что angular не создан с учетом изоморфизма (рендеринга на стороне клиента и сервера). Любой правильный рендеринг, который вы хотите сделать на стороне сервера, который еще не был построен, лучший вариант - использовать Spring для его рендеринга.

Другой вариант - перейти на Angular2, который изоморфен с помощью angular universal. Если Spring не используется для рендеринга и служит только API для вашего приложения, этот вариант будет работать хорошо.

person Ian Belcher    schedule 30.06.2016

я не делал этого в java, но C #, пожалуйста, сообщите мне, если вы заставите его работать в java:

Я нашел этот фрагмент кода о phantomJs, и:

как сказал наш друг, мы включили режим html5, мы переписываем весь URL-адрес на C #, используя механизм записи, который является новым для IIS, я сохраняю одно конкретное правило для запроса Google, который пришел с определенным параметром запроса (не смог найти его в сети, а не много времени до работы). поэтому я перенаправляю их на эту конкретную страницу, я читаю перенаправленный URL-адрес, передаю его и запускаю на phantomJS и жду результата, чтобы вернуться (нужно знать о запуске процесса и вернуть его консольный результат), затем, мы удалили атрибут ng-app из приложения и передали необработанную страницу поисковому роботу Google (у нас есть два типа кода перенаправления, только один из них работал, наконец, до этого времени, один постоянный, а другой временный). страница для вас такая грубая, но Google смотрит только на вашу схему и структуру, так что с ней все можно найти.

Я давно не знаком с Java, поэтому я не могу его реализовать, весной я получаю мало знаний, поэтому буду признателен, если вы уведомите меня о любом обновлении.

person deadManN    schedule 14.01.2017