จริงๆ แล้วมันเป็นประสบการณ์ 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