สร้างหน้า SEO แบบคงที่สำหรับเว็บไซต์ AngularJS + Spring MVC

ฉันมีโครงการที่ใช้ Spring MVC + AngularJS ข้อมูลทั้งหมดเป็นแบบไดนามิก มีฐานข้อมูลขนาดใหญ่ของสถานที่ในแอพนี้

เพื่อวัตถุประสงค์ด้าน SEO จำเป็นต้องสร้างเพจแบบคงที่สำหรับแต่ละสถานที่และวางไว้บน URL ที่เป็นมิตรกับ SEO (เช่น /localhost/path1/path2/here-is-very-friendly-name)

วิธีที่ดีที่สุดที่จะทำคืออะไร

ฉันควรสร้างเพจแยกกันและนำไปไว้ในโฟลเดอร์แยกจากแอปหลัก (ถ้าเป็นเช่นนั้น วิธีที่ดีที่สุดในการสร้างมันคืออะไร) หรือฉันสามารถใช้ Spring/Angular เพื่อสิ่งนั้นได้

(สำหรับข้อมูลเพิ่มเติม) ออบเจ็กต์ของแต่ละสถานที่ประกอบด้วย id,name, 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 App ยังไม่ได้โหลด ดังนั้นจึงพยายามรับเพจจาก MVC Routing แต่หลังจากนั้น $routeProvider ก็ทำหน้าที่ของมันซะ


3) ใช้ตัวแปร MVC สำหรับเมตาแท็ก

เพื่อการจัดทำดัชนีที่ดีขึ้นและเป็นเพื่อนกับโปรแกรมรวบรวมข้อมูลและบอท เราต้องใช้ตัวแปร MVC ในการเริ่มต้นเมตาแท็กของเว็บไซต์
หากคุณตั้งชื่อเพจด้วยการผูกเชิงมุม เช่น <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.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 จากนั้นบันทึกเอาต์พุตลงในไฟล์สแตติก

จากสิ่งที่ฉันรวบรวมจากคำถามของคุณ คุณยังไม่ได้ใช้เส้นทางเหล่านี้กับส่วนหน้าในแอปเชิงมุมของคุณเลยหรือ หากเป็นกรณีนี้ ฉันจะบอกว่าตัวเลือกอื่นคือการเรนเดอร์ฝั่งเซิร์ฟเวอร์ผ่าน Spring

ปัญหาที่นี่คือเชิงมุมไม่ได้ถูกสร้างขึ้นโดยคำนึงถึง isomorphism (การเรนเดอร์ฝั่งไคลเอ็นต์และเซิร์ฟเวอร์) การเรนเดอร์ที่เหมาะสมใดๆ ที่คุณต้องการให้ทำบนฝั่งเซิร์ฟเวอร์ที่ยังไม่ได้สร้าง ตัวเลือกที่ดีที่สุดคือใช้ Spring เพื่อเรนเดอร์

อีกทางเลือกหนึ่งกำลังอัปเดตเป็น Angular2 ซึ่งเป็น isomorphic ด้วยความช่วยเหลือของ เชิงมุมสากล หากไม่ได้ใช้ 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