javascriptangularjsseogoogle-index

Googlebot and AngularJS websites


I have a website developed in AngularJS 1.0.7. I´m getting crazy to start dealing with SEO. I have read many posts that say Google Crawlers are not able to index these Javascript based websites. And some other posts that say Google is indexing this sites without problems some time ago, such as this http://ng-learn.org/2014/05/SEO-Google-crawl-JavaScript/.

The point is in Google Webmaster Tools I see 0 indexed pages and if I run in tracking menu, explore as Google (I don´t know exactly the name in english, I have it in spanish) I get the next code:

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="utf-8">
    <title>{{'YANPY_META_TITLE' | translate}}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="google-site-verification" content="U26PrLYE8BjI3scjdk3oTIUR0qK7FVS7XAFByhxwuP8" />
    <meta name="author" content="Veepo Travel & Technology Services S.L.">
    <meta name="description" content="{{'YANPY_META_DESCRIPTION' | translate}}">
    <meta name="keywords" content="{{'YANPY_META_KEYWORDS' | translate}}">
    <meta property="og:title" content="{{'YANPY_META_TITLE' | translate}}">
    <meta property="og:url" content="http://www.yanpy.com">
    <meta property="og:description" content="{{'YANPY_META_DESCRIPTION' | translate}}">
    <meta property="og:site_name" content="Yanpy">
    <meta property="og:type" content="website">
    <meta property="og:image" content="http://www.yanpy.com/img/logo.png">
    <meta itemprop="name" content="{{'YANPY_META_TITLE' | translate}}">
    <meta itemprop="description" content="{{'YANPY_META_DESCRIPTION' | translate}}">
    <meta itemprop="image" content="http://www.yanpy.com/img/logo.png"> 

    <!-- css -->

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="../assets/js/html5shiv.js"></script>
    <![endif]-->

    <!-- Fav and touch icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
                    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
                                   <link rel="shortcut icon" href="../assets/ico/favicon.png">


    <!-- JS scripts -->

</head>
<body>

    <div ng-view></div>                       

    <!-- FOOTER -->     

As you can see, there are at least a couple of things that don´t look good:

  1. The title, description metatags. As I´m using Angular, I have these texts in locale files, so, they can be translated according to selected language. However, it seems Google is not interpreting this. So, I´m not sending any relevant info in these fields to Google.

  2. The tag. This in where all the partial templates are inserted. So, as the Javascript code is not run, looks like Google is not seeing any of the real content.

Please, let me know if my analysis is right and what can I do to solve these problems.


Solution

  • On your part it looks fine, it's Google's problem. However, you can use a pre-rendering service, such as prerender.io. (It's free up to 250 pages).

    As for the translations, you need to provide a location for each language, such as site.com/en & site.com/cn for Google to understand it's a multilingual site. (take a look here, there are other URL structures that Google understands - scroll down to URL structures)

    It looks like you are using angular-translate, so here's an extensive article on how to make it work: http://fadeit.dk/post/angularjs-seo-for-angular-translate