I'm working on a small Angular application, and I'm about midway through with a mind breaking issue. It's common knowledge that SEO spiders/crawlers tend to not use Javascript, hence all META data must be loaded during server load. I'm trying to create a very dynamic base, that I can reuse for future projects.
My application is being built using LAMP, I'm not against Node but I must use PHP/MySQL for this particular project. I have a main configuration document 'config.json', and via the main index page I'm loading it in before HTML rendering to set all important META data. Now, I'm then loading the same configuration file in my Angular application using 'http.get(...)'. I just feel as if there's absolutely no need to load the same file twice.
I can solve this issue by setting the configuration via a script on the main page like so,
<?php
$config_plain = file_get_contents( './app/data/config.json', FILE_USE_INCLUDE_PATH );
$config = json_decode( $config_plain );
// # set config for meta data on load
?>
<!DOCTYPE HTML>
<html ng-app="foobar" ng-controller="dataCtrl">
<head>
<title ng-bind="page.title"><?php echo $config->title; ?></title>
<meta name="description" content="<?php echo $config->meta->description; ?>">
...
<script>
angular.module('foobar', [...])
.controller('dataCtrl', ['$rootScope', function($rootScope) {
$rootScope.config = <?php echo $config_plain; ?>;
$rootScope.page = { };
$rootScope.page.title = $rootScope.config.brand;
// # set config for data binding
}])
.service('page', ['$rootScope', function($rootScope) {
return {
title: function(route) {
$rootScope.page.title = $rootScope.config.brand + ' | ' + route;
// # update page title dynamically
}
};
}]);
</script>
</head>
</html>
Which would alternatively be,
<?php
$config_plain = file_get_contents( './app/data/config.json', FILE_USE_INCLUDE_PATH );
$config = json_decode( $config_plain );
// # set config for meta data on load
?>
<!DOCTYPE HTML>
<html ng-app="foobar" ng-controller="dataCtrl">
<head>
<title ng-bind="page.title"><?php echo $config->title; ?></title>
<meta name="description" content="<?php echo $config->meta->description; ?>">
...
<script>
angular.module('foobar', [...])
.controller('dataCtrl', ['$rootScope', function($rootScope) {
$http.get('/app/data/config.json')
.success(function(response) {
$rootScope.config = response;
$rootScope.page = { };
$rootScope.page.title = $rootScope.config.brand;
// # set config for data binding
});
}])
.service('page', ['$rootScope', function($rootScope) {
return {
title: function(route) {
$rootScope.page.title = $rootScope.config.brand + ' | ' + route;
// # update page title dynamically
}
};
}]);
</script>
</head>
</html>
Though this all kind of seems really messy.
My actual question is, how would I go about SEOing application content dynamically using both angular and php?
