En fait, c'est mon expérience d'Angular/SEO.
Vous devez faire beaucoup de changements !
1) Enlever # à partir de l'url
app.config(['$locationProvider', function ($locationProvider) {
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}]);
2) Révisez votre routage MVC
Jusqu'à présent, vous aviez peut-être un HomeController pour renvoyer les données. index.cshtml et de démarrer votre application Angular.
Après avoir retiré # à partir du routage Angular, vous devez définir MapRoute pour tous vos itinéraires.
Parce que dans cette situation, la première fois que vous essayez de visiter des itinéraires tels que www.site.com/any_route L'application Angular n'étant pas encore chargée, elle tente de récupérer la page à partir du routage MVC. Mais après cela $routeProvider s'acquitter de ses fonctions.
3) Utiliser les variables MVC pour les balises méta
Pour une meilleure indexation et pour être amis avec les crawlers et les bots, nous devons utiliser les variables MVC pour initialiser les balises méta du site web.
Si vous définissez le titre de votre page par des liens Angular comme <title>{{title}}</title> lorsque vous voulez partager votre page via les réseaux sociaux, vous verrez {{title}} parce que les réseaux sociaux ne peuvent pas rendre les 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) Remplacer le binding Angular pour les meta tags
Notre application est une SPA, donc après avoir chargé Angular, nous sommes sortis du terrain de jeu MVC. Nous devons remplacer les variables Angular par des variables 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) utiliser JSON-lD pour les contenus dynamiques
Si vous êtes familier avec SCHEMA.org il est préférable d'utiliser JSON-LD plutôt que d'autres, car les robots des moteurs de recherche peuvent attraper et analyser <script type="application/ld+json"></script> qui sont insérés dynamiquement après le chargement de la page.
Vous devez vérifier Schema Dictionary pour trouver le type qui est le plus proche de votre structure de données.
Par exemple, c'est mon entreprise 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": "info@adm-co.net",
"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>
