На самом деле это мой опыт работы с 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. Приложение еще не загружено, поэтому оно пытается получить страницу из MVC Routing. Но после этого $routeProvider
выполняет свои обязанности.
3) Используйте переменные MVC для метатегов
Для лучшей индексации и дружбы со сканерами и ботами мы должны использовать переменные MVC для инициализации метатегов веб-сайтов.
Если вы установите заголовок страницы с помощью привязок Angular, например <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) Заменить привязку Angular для метатегов
Наше приложение - это SPA, поэтому после загрузки Angular мы выходим из игровой площадки MVC. Мы должны заменить переменные Angular на переменные 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