Issue
I don't have a direct access to the code itself right now, But I've got some client whose website was developed in angularjs, and all the code gives an output on the DOM (I can see the pages with all the elements and everything is loaded just fine), but when I tried to make a crawling test via Google - it looked like the website wasn't scanned yet, even though it's been already a month.. and then I saw something weird - that when I 'view source' the pages themselves, all I get is this piece of code -
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="ahrefs-site-verification" content="xxxyyy">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#1976d2">
<link rel="stylesheet" href="styles.32f34f185b7564580e93.css"></head>
<body>
<app-root></app-root>
<noscript>Please enable JavaScript to continue using this application.</noscript>
<script type="text/javascript" src="runtime.34e0ced836cdde276d53.js"></script><script type="text/javascript" src="polyfills.700c13e3feb6da6eca5f.js"></script><script type="text/javascript" src="main.e89588fe3aa7c32000ef.js"></script></body>
<script src="https://wchat.freshchat.com/js/widget.js" async=""></script>
</html>
I guess the problem is happening in these lines -
<app-root></app-root>
<noscript>Please enable JavaScript to continue using this application.</noscript>
Do you have at least any speculation why this might happen?
Solution
Since you're dealing with a SPA, SEO is not that straightforward. Google crawls your index.html which contains the app-root of your Angular app and my experience is that it will not execute the JS which contains your SPA routes. Your only options for optimizing SEO in SPA's is prerendering your routes, through an external service like Prerender.io or create your own prerender or use a Server Side Rendering technology for your SPA.
Since you are using Angular you should take a look at Angular Universal.
edit: if you don't want the complete hassle of prerendering all your routes but just want an acceptable result in Google for your index.html at least set a proper title tag <title>Proper Title - Wonderful website</title> and the meta description tag <meta name="description" content="Description of max 160 chars">
Answered By - Marnix Harderwijk
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.