Menu icon Foundation
SEO for angular and prerender (APPS)

Has anyone had success with using prerender.io for apps?

I am having a hard time getting individual pages to post meta data when sharing URLs for sites. Also I would like the SEO game to be sound tight, so that each one of my pages get indexed.

Any help at all would be much appreciated.

prerender

Has anyone had success with using prerender.io for apps?

I am having a hard time getting individual pages to post meta data when sharing URLs for sites. Also I would like the SEO game to be sound tight, so that each one of my pages get indexed.

Any help at all would be much appreciated.

Zoran over 4 years ago

Hi Philip -

I've had success with using Prerender with a Foundation for Apps application.

Are you using Prerender's online service, or are you hosting the Prerender server yourself? What type of server setup do you have?

I'm going to take some liberty and make a few assumptions to start things off - feel free to respond with any more info you have so we can get down to a more specific answer.

Assuming you're using Prerender's online service, which handles failure monitoring and automatic restarts, you shouldn't have to worry much about whether or not your pages get prerendered. If you are hosting the Prerender server yourself, you should definitely have some sort of montoring service checking that it stays up and ready to serve crawler requests (I use Monit).

I will also assume that you have no issues having your pages rendered to HTML, but are having issues
rendering dynamic meta data depending on what page of the app you're on.

How I Handled Meta Data on a Per-Page Basis

Let's say we have a blogging site, with three different topics within it: Tech, Travel, Fitness, and we want different metadata content for each category.

You can create an angular factory to call with a controller when necessary:

MyApp.factory('MetaTag', function() {
  // default meta tag content for App
  var content = {description: "This is my app.",
                 keywords: "example, app, some, other, keywords"};

  return {
    content: function() {
      return content;
    },
    tech: function() {
      content = {description: "This is some description specific for pages under Tech category.",
                 keywords: "keyword1, keyword2, keyword3"};
    },
    travel: function() {
      content = {description: "This is another description for pages under Travel category.",
                 keywords: "keyword4, keyword5, keyword6"}
    },
    fitness: function() {
      content = {description: "Yet another description for pages under Fitness category.",
                 keywords: "keyword7, keyword8, keyword9"};
    }
  }
})

Then you can build a controller to handle assigning the metadata to the scope, to use within view templates:

MyApp.controller('PageHeadController', ['$scope', 'MetaTag', function ($scope, MetaTag) {
  $scope.metaTag = MetaTag;
}]);

You can then embed the controller within the head of your index file or wherever you have your page layout:

<html lang="en" ng-app="MyApp" ng-controller="PageHeadController">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/">
    <meta name="fragment" content="!">

    <meta name="description" content={{metaTag.content().description}} />
    <meta name="keywords" content={{metaTag.content().keywords}} />
    <title>MyApp Blog Site</title>
  </head>

  <body>
    ...
  </body>
</html>

Now all that's left to do is call your factory and it's appropriate function in any controllers which handle Travel related pages.

MyApp.controller('TravelCategoryController', ['$scope', 'MetaTag'], function ($scope, MetaTag) {
  MetaTag.travel();
  ...
})

This will set the scope to the Travel description/keyword metadata set, which will then be displayed within the head page of your Travel pages. This same method can be easily used to generate dynamic page titles.

If you have the following set up, and test the prerendered version of the Travel page, your meta data should show up correctly.

General Tips for doing well in SEO:
  • Make sure your link tags are being rendered as <a href="..."> if you're using the ui-router which comes with F4A.
  • Your page titles and meta tags should be descriptive of the content your site is offering
  • Your pages shouldn't have absurd load times (it lowers your ranking)
  • Page structures are important (having H tags where appropriate, having a sitemap, not having blank anchor tags, etc.)

This was certainly a gunshot approach at an answer, so if I missed anything, or if I totally missed the mark, let me know and we can figure it out :) Hope this helps!

Best wishes -
Zoran

Philip over 4 years ago

Zoran,

This is great, thanks for the response. I'll let you know how it goes!

It would be awesome if it was in one controller. Could you combine this with {{ current }} to make it so you don't have to make so many controllers?

Philip over 4 years ago

Also,

I'm not getting how it becomes page specific... wouldn't you have to change the controller for each page? You can't do that with only one index.html

alvataylor almost 2 years ago

Haha, It would be awesome if it was in one controller: clicker heroes

Iliyan Ivanov about 1 year ago

If you have migrated to angular 6 you can use Angular Universal

galken 12 months ago

great post thanks color switch online

olidev 16 days ago

I have never used prerender.io before, in fact, i have never head of this tool before. However, I have experience with working on a one pager site. The main factors in SPA SEO are the rendering type and dynamic meta tags. Server side rendering and pre rendering the search engine friendly because bots can crawl these types of sites easily. For dynamically loading content you need dynamic meta tags, since meta tags are one of the most important ranking factors. Dynamic meta tags can be done in react and angular, not sure about other frameworks though. Both of these frameworks are compatible with Foundation.