为AngularJS + Spring MVC网站生成静态SEO页面

Question

我有一个使用Spring MVC + AngularJS的项目.所有数据都是动态的.在这个应用程序中有一些大的位置数据库.

出于搜索引擎优化的目的,需要为每个位置生成一个静态页面并将它们放在SEO友好的URL上(例如/ localhost/path1/path2/here-is-very-friendly-name)

制作它的最佳方法是什么？

我应该单独生成一个页面并将它们放在主应用程序的某个单独的文件夹中(如果是,最好的方法是什么？),或者我可以使用Spring/Angular吗？

(附加信息) 的每个位置的对象包括id,name,latitude,longtitude,address,district,city,country.

Answer 1

实际上这是我的Angular/SEO体验.
你必须做出很多改变!

1)#从网址中删除

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

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

}]);

2)检查您的MVC路由

直到现在,也许你有一个HomeController用于返回index.cshtml和启动你的Angular App.从Angular路由中
删除后#,您必须MapRoute为所有路由设置.
因为在这种情况下你第一次尝试访问www.site.com/any_routeAngular App这样的路线还没有加载,所以它试图从MVC路由获取页面.但在那之后$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)替换元标记的角度绑定

我们的应用程序是SPA,所以在加载Angular之后我们就离开了MVC游乐场.我们必须用MVC变量替换Angular变量.

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": "info@adm-co.net",
        "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>

Answer 2

您是否尝试过 SEO.js ( http://getseojs.com/ ) 和 prerender.io ( https://prerender.io/ )等工具。你尝试过那些吗？