为AngularJS + Spring MVC网站生成静态SEO页面 [英] Generate static SEO pages for AngularJS + Spring MVC website

问题描述

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

I have a project using Spring MVC + AngularJS. All the data is dynamic. Have some big database of locations in this app.

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

For SEO purposes, need to generate a static page for each location and put them on SEO-friendly URLs (ex. /localhost/path1/path2/here-is-very-friendly-name)

最好的方法是什么？

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

Should i just generate a pages separately and put them to some separate folder from the main app (if it is, whats the best way to make it?), or i can use Spring/Angular for that?

（有关其他信息）
每个位置的对象包含 id ， name ， latitude ， longtitude ， 地址，地区，城市， country 。

(for additional info) each location's object contains id,name, latitude, longtitude, address, district, city, country.

推荐答案

实际上这是我的Angular / SEO体验。

你必须做出很多改变!!

Actually it's my Angular/SEO experience.
You have to made lots of changes!!

1）删除＃来自网址

1) Removing # from url

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

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

}]);

---

2）查看您的MVC路由

到目前为止，您可能有一个HomeController用于返回 index.cshtml 并启动您的Angular App。

从Angular路由中删除＃后，您必须为所有路由设置 MapRoute 。

因为在这种情况下你第一次尝试访问 www.site.com/any_route 这样的路线尚未加载Angular App所以它试图从MVC路由获取页面。但在那之后 $ routeProvider 履行职责。

Till now maybe you had one HomeController for returning index.cshtml and booting up your Angular App.
After removing # from Angular routing, you have to set MapRoute for all of your routes.
Because in this situation the first time you try to visit routes like www.site.com/any_route Angular App not loaded yet so it tries to get page from MVC Routing. But after that $routeProvider do its duties.

3）对元标记使用MVC变量

为了更好地编制索引并成为爬虫和机器人的朋友，我们必须使用MVC变量来初始化网站元标记。

如果您通过Angular绑定设置页面标题，例如< title> {{title}}< / title> 每当您想通过社交网络分享您的网页时，您会看到 {{title}} 因为社交网络无法呈现网站。

For better indexing and being friend with crawlers and bots we have to use MVC variables for initializing website meta tags.
If you set your page title by Angular bindings like <title>{{title}}</title> whenever you want to share your page through social networks you will see {{title}} because social networks can't render sites.

<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）替换meta的Angular绑定标签

我们的应用程序是SPA，因此在加载Angular后我们不在MVC游乐场。
我们必须用MVC变量替换Angular变量。

Our app is SPA, so after loading Angular we are out of MVC playground. We have to replace Angular variables with MVC variables.

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

---

5) use JSON-lD for dynamic contents

如果您熟悉 SCHEMA.org 您最好使用 JSON-LD 而不是其他人，因为搜索引擎机器人可以捕获并分析< script type =application / ld + json>< / script> 在页面加载后动态插入的内容。

你必须检查< a href =http://schema.org/docs/full.html\"rel =noreferrer> 架构词典 查找最多的类型更接近您的数据结构。

例如，它是我的公司json-ld：

If you are familiar with SCHEMA.org you better to use JSON-LD instead of others, because search engines bots can catch and analyse <script type="application/ld+json"></script>s that inserted dynamically after page loaded.
You have to check Schema Dictionary to find the type that is most closer to your data structure.
For example it's my company 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": "[e-mail]",
        "logo": {
            "@type": "ImageObject",
            "url": "http://khoonamon.com/images/ADM_Logo.png",
            "caption": "لوگو داده کاوان امیرکبیر",
            "width": "2480px",
            "height": "1459px"
        },
        "telephone": "[phone]",
        "address": "تهران، خیابان آیت ا... کاشانی، نبش خیابان عقیل، پلاک 380، طبقه دوم",
        "contactPoint" : [{
            "@type" : "ContactPoint",
            "telephone" : "[phone]",
            "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>

这篇关于为AngularJS + Spring MVC网站生成静态SEO页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！