We recently moved our ASP.NET site to AureliaJS. We were delighted until we found out that because it is JavaScript, then it is presented as an almost empty page for crawlers as you can see in the code below.
Is there any way that we can populate the page with the text that we need to make it SEO friendly and have a main image so that Facebook sharing can detect it using AureliaJS?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles/bundle.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta property="og:title" content="UCR" />
<meta property="og:type" content="website" />
<meta property="og:image" content="" />
<meta property="og:image:width" content="200">
<meta property="og:image:height" content="500">
<!-- <meta property="og:url" content="http://dev.cr/" /> -->
<meta property="og:description" content="" />
<!-- <script>
$(".se-pre-con").fadeOut("slow");
</script> -->
</head>
<body aurelia-app="main" class="uscr-body">
<div class="se-pre-con"><!--<h1 class="uscr-h1-loading">Cargando UCR</h1> --></div>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.baseUrl = 'dist';
System.import('aurelia-bootstrapper').catch(console.error.bind(console));
</script>
</body>
</html>
3
Answers
That is a problem with client frameworks in general. The server needs to deliver the pages for SEO, it´s called server side rendering. One famous module for that is prerender.io: https://prerender.io/
With React/Redux: http://redux.js.org/docs/recipes/ServerRendering.html
A similar question was asked last year, and there are some suggestions there. Most importantly, this answer points to a post by Rob Eisenberg in the associated issue where he says that support for this feature is expected to happen within 2016. So my suggestion is to follow that issue, and if you have someone on your team who’s familiar with one of the external libraries to pre-render your content, do that. Otherwise, you could (manually or via a Gulp task) replicate the SEO-relevant portion of your copy on
index.html
in a hiddendiv
so that the spiders see it but it’s not visible to humans.I wonder if aurelia enhance feature would allow SEO. Problem is it won’t leverage all aurelia capabilities:
http://ilikekillnerds.com/2016/01/enhancing-at-will-using-aurelias-templating-engine-enhance-api/
You can only enhance DOM elements
You cannot enhance an already enhanced element