single page application can't get current page meta tag for facebook share

Question 1

What jackypan1989 said is true, you will have to use the absolute url. But one other thing that I'm pretty sure happens is that Facebook won't run your JavaScript code, thus the part

<meta property="og:url" content="/post/{{data.permalink}}">

will never get replaced with

<meta property="og:url" content="/post/the-page-that-was-shared">

This problem that you are having could also prevent Google from crawling your page.

We had the same problem, and we used https://prerender.io to get around it. You can use it on your own server, or use one of their free/paid services.

Question 2

You already have a body defined around your ng-view. Then your view has its own body. So you are trying to inject a body inside of a body which isn't going to do what you want.

Notice that your controller does not control the HTML element that contains the Meta tags. It only controls code that it contains (a div within the body in your case).

You can add a controller to the HTML tag or you can use $rootScope.

Lots of answers to this here: How to dynamically change header based on AngularJS partial view?

In your controller that handles the ng-view: app.controller('MainControl', function ($rootScope, $scope, Config) { ... $rootScope.canonical = Config.domain; });

I needed to dynamically set a canonical link, but the principal for metas is the same. In your header: <link rel="canonical" ng-href="{{ canonical }}" />

You'll probably want to use ng-bind for a meta tag.

Question 3

I would add to the previous answers that prerender will solve crawling problems but facebook share is a bit different I think ( feel free to prove me wrong :) ). To avoid annoying {{}} you can define your own meta directive <meta meta-description> and use a template:

app.directive('metaDescription', [ 'metaData', function(metaData){
  return {
    restrict: 'A',
    replace: true,
    template: '<meta name="description" content="{{metaData.pageDesc}}">',
    link: function(scope,element){
      scope.metaData = metaData;


    }
  };
}]);

We are still figuring out SEO/sharing issues with angularJS here but that's what we currently use.

Question 4

In your codes, you should set up your absolute url on attr 'data-href' of fb-share-button.

For example:

<div class='fb-share-button' data-href='https://yourabsoluteurl.com' data-type='button'>
</div>

Question 5

I made it work using express. There may be some gaps in this, so if anyone tries it, feel free to fill in the gaps in the comments and I'll update...

I have both express and react running in two different consoles locally. For some reason, I only needed to run node on the express file in prod. Do whatever you need to to get it running. This will forward the request to the react server.

app.get('*', function(req, res) {
    res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

Then I have a route for the pages that I share that looks something like this.

app.get('/details/:itemId', function(req, res) {
    const fileName = path.join(__dirname, 'build', `${req.params.itemId}.html`);
    var fileContents = fs.readFileSync(path.join(__dirname, 'build', 'index.html'), 'utf8');
    fileContents = fileContents.replace("og tags", "new values");
    fs.writeFileSync(fileName, fileContents);
    res.sendFile(fileName);
});

You probably will want to search for the file and serve that up first if it exists so you aren't having problems with multiple clients writing to the same file at the same time in a high volume environment. Or better yet, do it in memory. Remember, order counts in express, so you really need to reverse the order of these two functions in your express file.