ฉันเห็นปัญหาสองประการเกี่ยวกับแอปพลิเคชัน AngularJS เกี่ยวกับเครื่องมือค้นหาและ SEO:

1) เกิดอะไรขึ้นกับแท็กที่กำหนดเอง เครื่องมือค้นหาละเว้นเนื้อหาทั้งหมดภายในแท็กเหล่านั้นหรือไม่ นั่นคือสมมติว่าฉันมี

<custom>
  <h1>Hey, this title is important</h1>
</custom>

จะ<h1>ได้รับการจัดทำดัชนีแม้จะอยู่ในแท็กที่กำหนดเองหรือไม่

2) มีวิธีหลีกเลี่ยงเครื่องมือค้นหาของการจัดทำดัชนี {{}} ผูกมัดอย่างแท้จริงหรือไม่? กล่าวคือ

<h2>{{title}}</h2>

ฉันรู้ว่าฉันสามารถทำอะไรบางอย่างเช่น

<h2 ng-bind="title"></h2>

แต่ถ้าฉันต้องการให้ซอฟต์แวร์รวบรวมข้อมูล "เห็น" ชื่อจริง การเรนเดอร์ฝั่งเซิร์ฟเวอร์เป็นทางออกเดียวหรือไม่?

อัปเดตพฤษภาคม 2014

ขณะนี้โปรแกรมรวบรวมข้อมูลของ Google ดำเนินการจาวาสคริปต์ - คุณสามารถใช้Google เครื่องมือของผู้ดูแลเว็บเพื่อทำความเข้าใจวิธีการแสดงผลเว็บไซต์ของคุณโดย Google

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

หากนี่คือตัวเลือกที่ฉันแนะนำให้อ่านบทความนี้เกี่ยวกับวิธีการทำ SEO สำหรับ Angular ด้วยการแสดงผลฝั่งเซิร์ฟเวอร์

ฉันไม่แน่ใจว่าตัวรวบรวมข้อมูลทำอะไรเมื่อพบแท็กที่กำหนดเอง

ใช้ PushState และคำบุพบท

วิธีปัจจุบัน (2015) ในการทำเช่นนี้คือการใช้วิธี JavaScript pushState

PushState เปลี่ยน URL ในแถบเบราว์เซอร์บนสุดโดยไม่ต้องโหลดหน้าซ้ำ สมมติว่าคุณมีหน้าที่มีแท็บ แท็บซ่อนและแสดงเนื้อหาและเนื้อหาถูกแทรกแบบไดนามิกโดยใช้ AJAX หรือเพียงแค่ตั้งค่าการแสดงผล: none และ display: block เพื่อซ่อนและแสดงเนื้อหาของแท็บที่ถูกต้อง

เมื่อคลิกแท็บแล้วให้ใช้ pushState เพื่ออัปเดต URL ในแถบที่อยู่ เมื่อมีการแสดงผลหน้าให้ใช้ค่าในแถบที่อยู่เพื่อกำหนดแท็บที่จะแสดง การกำหนดเส้นทางเชิงมุมจะทำสิ่งนี้ให้คุณโดยอัตโนมัติ

Precomposition

มีสองวิธีในการกดแอป PushState หน้าเดียว (SPA)

1. ผ่าน PushState ที่ผู้ใช้คลิกลิงก์ PushState และเนื้อหานั้น AJAXed
2. โดยกดปุ่ม URL โดยตรง

การเข้าชมครั้งแรกบนไซต์จะเกี่ยวข้องกับการกดปุ่ม URL โดยตรง Hit ที่ตามมาจะเป็นเพียง AJAX ในเนื้อหาในขณะที่ PushState อัพเดต URL

ซอฟต์แวร์รวบรวมข้อมูลรวบรวมลิงค์จากหน้าเว็บจากนั้นเพิ่มลงในคิวเพื่อประมวลผลในภายหลัง ซึ่งหมายความว่าสำหรับโปรแกรมรวบรวมข้อมูลทุกการโจมตีบนเซิร์ฟเวอร์เป็นการโจมตีโดยตรงพวกเขาไม่ได้นำทางผ่าน Pushstate

คำบุพบทรวมชุดเพย์โหลดเริ่มต้นไว้ในการตอบกลับครั้งแรกจากเซิร์ฟเวอร์ซึ่งอาจเป็นวัตถุ JSON สิ่งนี้ทำให้ Search Engine แสดงผลหน้าเว็บโดยไม่ต้องเรียกใช้ AJAX

มีหลักฐานบางอย่างที่ชี้ให้เห็นว่า Google อาจไม่ดำเนินการตามคำขอ AJAX เพิ่มเติมเกี่ยวกับเรื่องนี้ที่นี่:

https://web.archive.org/web/20160318211223/http://www.analog-ni.co/precomposing-a-spa-may-become-the-holy-grail-to-seo

เครื่องมือค้นหาสามารถอ่านและใช้งาน JavaScript

Google สามารถแยกวิเคราะห์ JavaScript ได้ในขณะนี้เป็นสาเหตุที่พวกเขาได้พัฒนา Chrome ตั้งแต่แรกเพื่อทำหน้าที่เป็นเบราว์เซอร์ที่ไม่มีส่วนหัวที่สมบูรณ์สำหรับ Google spider หากลิงก์มีแอตทริบิวต์ href ที่ถูกต้องสามารถสร้างดัชนี URL ใหม่ได้ ไม่มีอะไรให้ทำอีกแล้ว

หากการคลิกลิงก์เพิ่มเติมจะทริกเกอร์การโทร pushState ผู้ใช้สามารถสำรวจไซต์ผ่านทาง PushState

การสนับสนุนเครื่องมือค้นหาสำหรับ URL PushState

ปัจจุบัน PushState รองรับโดย Google และ Bing

Google

ที่นี่ Matt Cutts ตอบสนองต่อคำถามของ Paul Irish เกี่ยวกับ PushState สำหรับ SEO:

http://youtu.be/yiAF9VdvRPw

นี่คือ Google ประกาศสนับสนุน JavaScript แบบเต็มรูปแบบสำหรับแมงมุม:

http://googlewebmastercentral.blogspot.de/2014/05/understanding-web-pages-better.html

ผลที่สุดคือ Google รองรับ PushState และจะจัดทำดัชนี PushState URL

ดูการดึงข้อมูลเครื่องมือผู้ดูแลเว็บของ Google เช่น Googlebot คุณจะเห็น JavaScript ของคุณ (รวมถึง Angular) ถูกใช้งาน

Bing

นี่คือการประกาศการสนับสนุนของ Bing สำหรับ URL PushState ที่สวยลงวันที่มีนาคม 2013:

http://blogs.bing.com/webmaster/2013/03/21/search-engine-optimization-best-practices-for-ajax-urls/

อย่าใช้ HashBangs #!

URL ของ Hashbang นั้นเป็นจุดเปลี่ยนที่น่าเกลียดซึ่งผู้พัฒนาต้องการให้มีการแสดงผลเว็บไซต์ในรูปแบบที่แสดงล่วงหน้าในสถานที่พิเศษ มันยังใช้ได้ แต่คุณไม่จำเป็นต้องใช้มัน

Hashbang URL มีลักษณะดังนี้:

domain.com/#!path/to/resource

นี่จะถูกจับคู่กับเมตาแท็กเช่นนี้:

<meta name="fragment" content="!">

Google จะไม่จัดทำดัชนีพวกเขาในรูปแบบนี้ แต่จะดึงรุ่นคงที่ของเว็บไซต์จาก _escaped_fragments_ URL และดัชนีนั้น

Pushstate URL ดูเหมือน URL ทั่วไป:

domain.com/path/to/resource

ข้อแตกต่างคือ Angular จัดการกับคุณโดยการดักจับการเปลี่ยนแปลงของ document.location ที่เกี่ยวข้องกับ JavaScript

หากคุณต้องการใช้ PushState URL (และคุณอาจทำได้) นำ URL สไตล์แฮชเก่าและเมตาแท็กทั้งหมดออกและเปิดใช้งานโหมด HTML5 ในบล็อกการกำหนดค่าของคุณ

ทดสอบเว็บไซต์ของคุณ

ตอนนี้เครื่องมือ Google Webmaster ประกอบด้วยเครื่องมือที่จะช่วยให้คุณสามารถดึง URL เป็น google และแสดง JavaScript เมื่อ Google แสดงผล

https://www.google.com/webmasters/tools/googlebot-fetch

การสร้าง URL PushState ในเชิงมุม

หากต้องการสร้าง URL จริงใน Angular แทนที่จะเป็น # นำหน้าให้ตั้งค่าโหมด HTML5 ในวัตถุ $ locationProvider ของคุณ

$locationProvider.html5Mode(true);

ฝั่งเซิร์ฟเวอร์

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

แผนผังเว็บไซต์

แอปของคุณอาจใช้รูปแบบการนำทางที่ผิดปกติเช่นเลื่อนหรือเลื่อน เพื่อให้แน่ใจว่า Google สามารถขับเคลื่อนแอปของคุณได้ฉันอาจขอแนะนำให้สร้างแผนผังไซต์ซึ่งเป็นรายการง่ายๆของ URL ทั้งหมดที่แอปของคุณตอบกลับ คุณสามารถวางสิ่งนี้ไว้ที่ตำแหน่งเริ่มต้น (/ sitemap หรือ /sitemap.xml) หรือบอก Google เกี่ยวกับสิ่งนี้โดยใช้เครื่องมือเว็บมาสเตอร์

เป็นความคิดที่ดีที่จะมีแผนผังเว็บไซต์อยู่ดี

รองรับเบราว์เซอร์

Pushstate ทำงานได้ใน IE10 ในเบราว์เซอร์รุ่นเก่า Angular จะย้อนกลับไปที่ URL สไตล์แฮชโดยอัตโนมัติ

หน้าตัวอย่าง

เนื้อหาต่อไปนี้แสดงผลโดยใช้ URL ของรัฐที่มีคำนำหน้า:

http://html5.gingerhost.com/london

สามารถตรวจสอบได้ที่ลิงค์นี้เนื้อหาถูกจัดทำดัชนีและปรากฏใน Google

การแสดงรหัสสถานะ 404 และ 301 ส่วนหัว

เนื่องจากเครื่องมือค้นหาจะโจมตีเซิร์ฟเวอร์ของคุณทุกคำขอคุณสามารถให้รหัสสถานะส่วนหัวจากเซิร์ฟเวอร์ของคุณและคาดหวังให้ Google เห็นพวกเขา

มาทำความเข้าใจเกี่ยวกับ AngularJS และ SEO กัน

Google, Yahoo, Bing และเครื่องมือค้นหาอื่น ๆ รวบรวมข้อมูลเว็บในรูปแบบดั้งเดิมโดยใช้ซอฟต์แวร์รวบรวมข้อมูลแบบดั้งเดิม พวกเขาใช้โรบอตที่รวบรวมข้อมูล HTML บนหน้าเว็บรวบรวมข้อมูลไปพร้อมกัน พวกเขาเก็บคำที่น่าสนใจและมองหาลิงค์อื่น ๆ ไปยังหน้าอื่น ๆ (ลิงก์เหล่านี้จำนวนของพวกเขาและจำนวนของพวกเขามาเล่นกับ SEO)

เหตุใดเครื่องมือค้นหาจึงไม่จัดการกับไซต์ javascript

คำตอบนั้นเกี่ยวกับข้อเท็จจริงที่ว่ากลไกการค้นหาทำงานผ่านเบราว์เซอร์ที่ไม่มีส่วนหัวและส่วนใหญ่มักไม่มีเอ็นจิ้นการแสดงผลจาวาสคริปต์ในการแสดงผลจาวาสคริปต์ของหน้าเว็บ วิธีนี้ใช้ได้กับหน้าส่วนใหญ่เนื่องจากหน้าคงที่ส่วนใหญ่ไม่สนใจการแสดงผลหน้า JavaScript เนื่องจากเนื้อหาของพวกเขาพร้อมใช้งานแล้ว

สิ่งที่สามารถทำได้เกี่ยวกับมัน?

โชคดีที่โปรแกรมรวบรวมข้อมูลของเว็บไซต์ที่มีขนาดใหญ่ได้เริ่มต้นที่จะใช้กลไกที่ช่วยให้เราเพื่อให้เว็บไซต์ของ JavaScript เราสามารถรวบรวมข้อมูลได้ แต่เราต้องดำเนินการเปลี่ยนแปลงไปยังเว็บไซต์ของเรา

ถ้าเราเปลี่ยนของเราhashPrefixที่จะ#!แทนที่จะ#แล้วเครื่องมือค้นหาที่ทันสมัยจะเปลี่ยนขอให้ใช้แทน_escaped_fragment_ #!(ด้วยโหมด HTML5 คือที่ที่เรามีลิงค์โดยไม่มีคำนำหน้าแฮชเราสามารถใช้คุณสมบัติเดียวกันนี้ได้โดยดูที่User Agentส่วนหัวในแบ็กเอนด์ของเรา)

กล่าวคือแทนที่จะขอจากเบราว์เซอร์ปกติที่มีลักษณะดังนี้:

http://www.ng-newsletter.com/#!/signup/page

เครื่องมือค้นหาจะค้นหาหน้าด้วย:

http://www.ng-newsletter.com/?_escaped_fragment_=/signup/page

เราสามารถตั้งค่าคำนำหน้าแฮชของแอพเชิงมุมของเราโดยใช้วิธีการในตัวจากngRoute:

angular.module('myApp', [])
.config(['$location', function($location) {
  $location.hashPrefix('!');
}]);

และถ้าเราใช้html5Modeเราจะต้องใช้สิ่งนี้โดยใช้เมตาแท็ก:

<meta name="fragment" content="!">

เตือนเราสามารถตั้งค่าhtml5Mode()ด้วย$locationบริการ:

angular.module('myApp', [])
.config(['$location', 
function($location) {
  $location.html5Mode(true);
}]);

การจัดการเครื่องมือค้นหา

เรามีโอกาสมากมายที่จะพิจารณาว่าเราจะจัดการกับการนำเสนอเนื้อหาไปยังเครื่องมือค้นหาในรูปแบบ HTML แบบคงที่ได้อย่างไร เราสามารถโฮสต์แบ็คเอนด์ของเราเองเราสามารถใช้บริการเพื่อโฮสต์แบ็คเอนด์สำหรับเราเราสามารถใช้พร็อกซีเพื่อส่งเนื้อหา ฯลฯ มาดูตัวเลือกต่างๆ:

ตัวเองเป็นเจ้าภาพ

เราสามารถเขียนบริการเพื่อจัดการกับการรวบรวมข้อมูลเว็บไซต์ของเราเองโดยใช้เบราว์เซอร์ที่ไม่มีส่วนหัวเช่น phantomjs หรือ zombiejs ถ่ายภาพหน้าเว็บที่มีข้อมูลที่แสดงผลและจัดเก็บเป็น HTML เมื่อใดก็ตามที่เราเห็นสตริงข้อความค้นหา?_escaped_fragment_ในคำขอค้นหาเราสามารถส่งสแนปชอต HTML แบบคงที่ที่เราได้รับจากหน้าแทนที่จะเป็นหน้าที่แสดงผลล่วงหน้าผ่าน JS เท่านั้น สิ่งนี้ต้องการให้เรามีแบ็กเอนด์ที่ส่งหน้าเว็บของเราด้วยตรรกะแบบมีเงื่อนไขตรงกลาง เราสามารถใช้บางอย่างเช่นแบ็กเอนด์ของ prerender.ioเป็นจุดเริ่มต้นในการทำงานด้วยตัวเอง แน่นอนว่าเรายังต้องจัดการกับพร็อกซีและการจัดการตัวอย่าง แต่เป็นการเริ่มต้นที่ดี

ด้วยบริการชำระเงิน

วิธีที่ง่ายที่สุดและเร็วที่สุดในการรับเนื้อหาลงในเสิร์ชเอ็นจิ้นคือการใช้บริการBrombone , seo.js , seo4ajaxและprerender.ioเป็นตัวอย่างที่ดีของสิ่งเหล่านี้ซึ่งจะโฮสต์การแสดงเนื้อหาข้างต้นสำหรับคุณ นี่เป็นตัวเลือกที่ดีสำหรับเวลาที่เราไม่ต้องการจัดการกับการเรียกใช้เซิร์ฟเวอร์ / พร็อกซี นอกจากนี้มันยังเร็วมาก

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ Angular และ SEO เราเขียนบทช่วยสอนอย่างกว้างขวางที่http://www.ng-newsletter.com/posts/serious-angular-seo.html และเราให้รายละเอียดเพิ่มเติมในหนังสือของเรา: หนังสือทั้งหมดใน AngularJS ตรวจสอบออกที่ng-book.com

คุณควรตรวจสอบการสอนเกี่ยวกับการสร้างเว็บไซต์ AngularJS ที่เป็นมิตรกับ SEO ในปีบล็อกหมู่ เขาแนะนำคุณผ่านขั้นตอนทั้งหมดที่อธิบายไว้ในเอกสารของ Angular http://www.yearofmoo.com/2012/11/angularjs-and-seo.html

เมื่อใช้เทคนิคนี้เครื่องมือค้นหาจะเห็น HTML แบบขยายแทนที่จะเป็นแท็กที่กำหนดเอง

สิ่งนี้มีการเปลี่ยนแปลงอย่างมาก

http://searchengineland.com/bing-offers-recommendations-for-seo-friendly-ajax-suggests-html5-pushstate-152946

ถ้าคุณใช้: $ locationProvider.html5Mode (จริง); คุณถูกตั้งค่า

ไม่มีหน้าการแสดงผลอีกต่อไป

สิ่งต่าง ๆ เปลี่ยนแปลงไปเล็กน้อยตั้งแต่ถามคำถามนี้ ขณะนี้มีตัวเลือกให้ Google จัดทำดัชนีไซต์ AngularJS ของคุณ ตัวเลือกที่ง่ายที่สุดที่ฉันพบคือใช้http://prerender.ioบริการฟรีที่จะสร้างหน้า crwalable ให้คุณและให้บริการกับเครื่องมือค้นหา ได้รับการสนับสนุนบนแพลตฟอร์มเว็บฝั่งเซิร์ฟเวอร์เกือบทั้งหมด ฉันเพิ่งเริ่มใช้มันและการสนับสนุนก็ยอดเยี่ยมเช่นกัน

ฉันไม่มีส่วนเกี่ยวข้องใด ๆ กับพวกเขานี่มาจากผู้ใช้ที่มีความสุข

เว็บไซต์ของ Angular ให้บริการเนื้อหาที่เรียบง่ายสำหรับเครื่องมือค้นหา: http://docs.angularjs.org/?_escaped_fragment_=/tutorial/step_09

บอกว่าแอปพลิเคเชิงมุมของคุณจะถูกบริโภค JSON API Node.js / /api/path/to/resourceเอ็กซ์เพรสที่ขับเคลื่อนด้วยเช่น บางทีคุณอาจเปลี่ยนเส้นทางคำขอ?_escaped_fragment_ไปยัง/api/path/to/resource.htmlและใช้การเจรจาต่อรองเนื้อหาเพื่อแสดงเทมเพลต HTML ของเนื้อหาแทนที่จะส่งคืนข้อมูล JSON

สิ่งเดียวคือเส้นทางเชิงมุมของคุณจะต้องตรงกับ 1: 1 กับ REST API ของคุณ

แก้ไข : ฉันตระหนักดีว่านี่มีศักยภาพที่จะทำให้คุณสงบสติอารมณ์ api และฉันไม่แนะนำให้ทำนอกกรณีการใช้งานที่ง่ายมากซึ่งมันอาจจะเป็นแบบธรรมชาติ

แต่คุณสามารถใช้เส้นทางและชุดควบคุมที่แตกต่างกันโดยสิ้นเชิงสำหรับเนื้อหาที่เป็นมิตรกับหุ่นยนต์ของคุณ แต่จากนั้นคุณก็ทำการจำลองเส้นทางและตัวควบคุม AngularJS ทั้งหมดของคุณใน Node / Express

ฉันได้ตัดสินใจสร้างสแนปชอตด้วยเบราว์เซอร์ที่ไม่มีส่วนหัวแม้ว่าฉันจะรู้สึกว่ามันน้อยกว่าอุดมคติ

แนวปฏิบัติที่ดีมีอยู่ที่นี่:

http://scotch.io/tutorials/javascript/angularjs-seo-with-prerender-io?_escaped_fragment_=tag

ณ ตอนนี้ Google ได้เปลี่ยนข้อเสนอการรวบรวมข้อมูล AJAX

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

tl; dr: [Google] ไม่แนะนำข้อเสนอการรวบรวมข้อมูล AJAX [Google] อีกต่อไปในปี 2552

Ajax Spec ที่รวบรวมข้อมูลได้ของ Google ตามที่อ้างอิงในคำตอบอื่น ๆ ที่นี่นั้นเป็นคำตอบ

หากคุณสนใจว่าเครื่องมือค้นหาและบอตโซเชียลอื่น ๆ จัดการกับปัญหาแบบเดียวกันกับฉันได้อย่างไรฉันเขียนสถานะของศิลปะที่นี่: http://blog.ajaxsnapshots.com/2013/11/11/googles-crawlable-ajax-specification.html

ฉันทำงานกับhttps://ajaxsnapshots.comบริษัท ที่ใช้ Ajax Spec ที่รวบรวมข้อมูลได้เป็นบริการข้อมูลในรายงานนั้นอิงตามการสังเกตจากบันทึกของเรา

ฉันได้พบวิธีแก้ปัญหาที่สง่างามที่จะครอบคลุมฐานส่วนใหญ่ของคุณ ฉันเขียนถึงตอนแรกที่นี่และตอบคำถาม StackOverflow อื่นที่คล้ายกันที่นี่ซึ่งอ้างอิง

FYI โซลูชันนี้ยังมีแท็กทางเลือกสำรองในกรณีที่โปรแกรมรวบรวมข้อมูล Javascript ไม่ได้รับ ฉันยังไม่ได้ระบุไว้อย่างชัดเจน แต่ควรบอกว่าคุณควรเปิดใช้งานโหมด HTML5 เพื่อรองรับ URL ที่เหมาะสม

หมายเหตุ: ไฟล์เหล่านี้ไม่ใช่ไฟล์สมบูรณ์เพียงส่วนสำคัญของไฟล์ที่เกี่ยวข้อง หากคุณต้องการความช่วยเหลือในการเขียนต้นแบบสำหรับคำสั่งบริการและอื่น ๆ ที่สามารถพบได้ที่อื่น ต่อไปที่นี่จะไป ...

app.js

นี่คือที่ที่คุณให้ข้อมูลเมตาที่กำหนดเองสำหรับแต่ละเส้นทางของคุณ (ชื่อคำอธิบาย ฯลฯ )

$routeProvider
   .when('/', {
       templateUrl: 'views/homepage.html',
       controller: 'HomepageCtrl',
       metadata: {
           title: 'The Base Page Title',
           description: 'The Base Page Description' }
   })
   .when('/about', {
       templateUrl: 'views/about.html',
       controller: 'AboutCtrl',
       metadata: {
           title: 'The About Page Title',
           description: 'The About Page Description' }
   })

metadata-service.js (บริการ)

ตั้งค่าตัวเลือกข้อมูลเมตาที่กำหนดเองหรือใช้ค่าเริ่มต้นเป็นทางเลือก

var self = this;

// Set custom options or use provided fallback (default) options
self.loadMetadata = function(metadata) {
  self.title = document.title = metadata.title || 'Fallback Title';
  self.description = metadata.description || 'Fallback Description';
  self.url = metadata.url || $location.absUrl();
  self.image = metadata.image || 'fallbackimage.jpg';
  self.ogpType = metadata.ogpType || 'website';
  self.twitterCard = metadata.twitterCard || 'summary_large_image';
  self.twitterSite = metadata.twitterSite || '@fallback_handle';
};

// Route change handler, sets the route's defined metadata
$rootScope.$on('$routeChangeSuccess', function (event, newRoute) {
  self.loadMetadata(newRoute.metadata);
});

metaproperty.js (คำสั่ง)

ทำแพ็กเกจผลลัพธ์บริการข้อมูลเมตาสำหรับมุมมอง

return {
  restrict: 'A',
  scope: {
    metaproperty: '@'
  },
  link: function postLink(scope, element, attrs) {
    scope.default = element.attr('content');
    scope.metadata = metadataService;

    // Watch for metadata changes and set content
    scope.$watch('metadata', function (newVal, oldVal) {
      setContent(newVal);
    }, true);

    // Set the content attribute with new metadataService value or back to the default
    function setContent(metadata) {
      var content = metadata[scope.metaproperty] || scope.default;
      element.attr('content', content);
    }

    setContent(scope.metadata);
  }
};

index.html

สมบูรณ์ด้วยแท็กสำรองทางเลือกที่กล่าวถึงก่อนหน้านี้สำหรับโปรแกรมรวบรวมข้อมูลที่ไม่สามารถรับ Javascript ได้

<head>
  <title>Fallback Title</title>
  <meta name="description" metaproperty="description" content="Fallback Description">

  <!-- Open Graph Protocol Tags -->
  <meta property="og:url" content="fallbackurl.com" metaproperty="url">
  <meta property="og:title" content="Fallback Title" metaproperty="title">
  <meta property="og:description" content="Fallback Description" metaproperty="description">
  <meta property="og:type" content="website" metaproperty="ogpType">
  <meta property="og:image" content="fallbackimage.jpg" metaproperty="image">

  <!-- Twitter Card Tags -->
  <meta name="twitter:card" content="summary_large_image" metaproperty="twitterCard">
  <meta name="twitter:title" content="Fallback Title" metaproperty="title">
  <meta name="twitter:description" content="Fallback Description" metaproperty="description">
  <meta name="twitter:site" content="@fallback_handle" metaproperty="twitterSite">
  <meta name="twitter:image:src" content="fallbackimage.jpg" metaproperty="image">
</head>

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

หวังว่านี่จะช่วยได้!

ใช้บางอย่างเช่น PreRender ซึ่งจะสร้างหน้าคงที่ในเว็บไซต์ของคุณเพื่อให้เครื่องมือค้นหาสามารถจัดทำดัชนีได้

คุณสามารถดูว่ามีแพลตฟอร์มใดบ้างที่นี่: https://prerender.io/documentation/install-middleware#asp-net

ด้วย Angular Universal คุณสามารถสร้างหน้า Landing Page สำหรับแอพที่ดูเหมือนแอพที่สมบูรณ์แล้วโหลดแอป Angular ของคุณไว้ด้านหลัง
Angular Universal สร้าง HTML แท้หมายถึงไม่มีหน้าจาวาสคริปต์ในฝั่งเซิร์ฟเวอร์และให้บริการแก่ผู้ใช้โดยไม่ล่าช้า ดังนั้นคุณสามารถจัดการกับซอฟต์แวร์รวบรวมข้อมูลบ็อตและผู้ใช้ (ที่มีซีพียูต่ำและความเร็วเครือข่ายอยู่แล้ว) จากนั้นคุณสามารถเปลี่ยนเส้นทางเหล่านั้นด้วยลิงก์ / ปุ่มไปยังแอพเชิงมุมที่แท้จริงของคุณซึ่งโหลดไว้ด้านหลังแล้ว แนะนำวิธีนี้โดยเว็บไซต์อย่างเป็นทางการ - ข้อมูลเพิ่มเติมเกี่ยวกับ SEO และ Angular Universal-

ซอฟต์แวร์รวบรวมข้อมูล (หรือบ็อต) ได้รับการออกแบบมาเพื่อรวบรวมเนื้อหา HTML ของหน้าเว็บ แต่เนื่องจากการดำเนินการ AJAX สำหรับการดึงข้อมูลแบบอะซิงโครนัสนี่เป็นปัญหาเนื่องจากใช้เวลาในการแสดงหน้าเว็บและแสดงเนื้อหาแบบไดนามิก ในทำนองเดียวกันAngularJSใช้โมเดลอะซิงโครนัสซึ่งสร้างปัญหาให้กับซอฟต์แวร์รวบรวมข้อมูลของ Google

นักพัฒนาบางคนสร้างหน้า html พื้นฐานพร้อมข้อมูลจริงและให้บริการหน้าเหล่านี้จากฝั่งเซิร์ฟเวอร์ในขณะที่ทำการรวบรวมข้อมูล เราสามารถแสดงหน้าเดียวกันกับPhantomJSด้านการให้บริการซึ่งมี_escaped_fragment_(เพราะ Google มองหา#!ใน URL ของเว็บไซต์ของเราจากนั้นนำทุกอย่างหลังจาก#!และเพิ่มใน_escaped_fragment_พารามิเตอร์การสืบค้น) สำหรับรายละเอียดเพิ่มเติมโปรดอ่านบล็อกนี้

โปรแกรมรวบรวมข้อมูลไม่จำเป็นต้องมี gui ที่มีสไตล์ที่โดดเด่น แต่พวกเขาต้องการดูเนื้อหาเท่านั้นดังนั้นคุณไม่จำเป็นต้องให้ภาพรวมของหน้าเว็บที่สร้างขึ้นสำหรับมนุษย์

โซลูชันของฉัน: เพื่อให้โปรแกรมรวบรวมข้อมูลเป็นสิ่งที่โปรแกรมรวบรวมข้อมูลต้องการ :

คุณต้องคิดถึงสิ่งที่โปรแกรมรวบรวมข้อมูลต้องการและมอบให้เขาเท่านั้น

เคล็ดลับไม่ยุ่งกับด้านหลัง เพียงเพิ่มมุมมองด้านหน้าเล็ก ๆ ของเซิร์ฟเวอร์โดยใช้ API เดียวกัน