SEO With Angular and ASP.NET MVC (not SPA)

Question

I have an hybrid architecture using ASP.NET MVC and AngularJS.

I use ASP.NET MVC for routing so I have not a single page application.

I inject my C# ViewModel into angular controller using init() method like this in my ASP View :

@model AddictLive.Core.ViewModel.Mobile.ViewModels.MovieViewModel
@using Newtonsoft.Json

<div ng-controller="MovieController" ng-init="init(@Html.Raw(JsonConvert.SerializeObject(Model)))">
     ...
</div> 

To get my ViewModel in my Angular controller I use :

$scope.init = function (movieViewModel) {
    $scope.property1= movieViewModel.property1;
    $scope.property2= movieViewModel.property2;
};

In this context I met an SEO problematic because pages content's are loaded dynamically by Angular even if my ViewModel is load server side.

When google bot scan my page all variables are always here ({{variable}} or ng-repeat="movie in movies").

All solutions I have found on the web are based on the hashtag #! for single page application but my website it not a single page application.

I have found a solution for {{variable}} like this using :

<span ng-bind="variable">@Model.myVariable</span>

but I have problem for ng-repeat and ng-include because I can't use razor @Model.

I have read that all content under an hidden div is not a good practice for google seo so it is not an option too.

Does anyone know a solution to my problem?

Thanks

Answer 1

I have no direct solution for you but an advice. I learned that it iis hardly possible to create sites that are good for users and search engines. Topics like ajax and on-demand-loading are for users and bad for search engines and also the other way around. eg so many pages have texts for search engine only that are so boring for users.

I recommend to make separate landing pages with nice urls. At the top of the landing page you do something to increase your conversion, eg play a search button or whatever and below you place content for search engines. Then make your user-pages invisble for google with:

<meta name="robots" content="nofollow,noindex" />

Create two different pages: One for your user and one for the search engine. This guarantees that you do not have to do any compromises.