My website is a single page application that pulls data from a MySQL database, which my client is able to update on their own with HTML forms with input fields. I'd like to be able to make it so that my client can dynamically add og:meta tags so that any page that they generate can be easily shared to Facebook.
So essentially, the user stores the og:meta info in MySQL, and then the appropriate php page pulls this data and allocates it correctly.
Here's what the dynamic meta tags look like in the head of index.html:
<!--prerender.io & Facebook-->
<meta name="fragment" content="!">
<meta property="og:url" content="{{ seo.metaUrl }}">
<meta property="og:title" content="{{ seo.metaTitle }}">
<meta property="og:description" content="{{ seo.metaDescription }}">
<meta property="og:image" content="{{ seo.metaImage }}">
Here's my main controller:
(function () {
angular
.module('app')
.controller('mainController', Controller);
function Controller($scope) {
$scope.seo = {
metaUrl : '', metaTitle : '', metaImage : '', metaDescription : ''
};
$scope.$parent.seo = {
//how can I make this part dynamic? Use variables somehow?
metaUrl : 'http://example.com',
metaTitle : 'Example | Home',
metaImage : 'http://example.com/pics/example.png',
metaDescription : 'Example | Example | Example'
};
}
}
)();
- Is adding variables within
$scope.$parent.seo = {}
possible? - If it's possible, would I be pulling MySQL data on the php page and using
ng-controller
or something like that to load it in to these variables?