How To Show Page Title On Google With Angular Precomposition?
Solution 1:
Why you don't use something like that?
Solution 2:
Actually superluminary response here has the solution. HTML page head must be sent fully resolved by the server.
So in order for this solution to work I was forced to replicate angular routes in the server side and send the info resolved.
Instead of using a plain html view I changed to .ejs and also changed the header to something like this:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base href="/">
<meta name="robots" content="index,follow">
<script type="text/javascript">
window.title = <%- JSON.stringify(precomposition) %>.title;
</script>
<title ng-bind="title"><%= precomposition.title %></title>
<meta name="description" content="<%= precomposition.description %>">
<!-- More meta information -->
<!-- Scripts & CSS -->
</head>
Now when the website gets a direct hit (initially resolved by the server instead of Angular, always the case for crawlers) I handle the request server side:
//Express route
app.route('/').get(precomposition.render);
//precomposition
exports.render = function (req, res) {
const precomposition = {title: 'tile', description: 'description'};
res.locals.precomposition = precomposition;
res.render('index.ejs');
};
If it's not a direct hit Angular handles the title update (because the other info is not displayed to the user).
It has off course some downsides but Google since October 2015 recommends this approach instead of "_escaped_fragment_ URLs". Also I think it's a lot less resource consuming than the selfhosted pre-render alternatives and cheaper than the paid ones.
Post a Comment for "How To Show Page Title On Google With Angular Precomposition?"