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

Question

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

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

最好的制作方法是什么？

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

(更多信息) 每个位置的对象包含id、name、latitude、longtitude、address、地区、城市、国家/地区。

Answer 1

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

---

1) 删除 #来自网址

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 路由获取页面。但在那之后$routeProvider履行职责。

---

3) 为元标记使用 MVC 变量

为了更好地索引并与爬虫和机器人成为 friend ，我们必须使用 MVC 变量来初始化网站元标记。
如果你通过像 <title>{{title}}</title> 这样的 Angular 绑定(bind)来设置你的页面标题每当你想通过社交网络分享你的页面时，你都会看到 {{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 绑定(bind)

我们的应用程序是 SPA，所以在加载 Angular 之后我们就离开了 MVC Playground 。 我们必须用 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>在页面加载后动态插入的。
你必须检查 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>