CODEWITHSUNDEEP
javascripthtmlangularjsfacebookfacebook-graph-api
Saqib Ali
Saqib Ali

Reputation: 12625

How to dynamically set and Angular JS page's meta og tags for Facebook sharing?

This question is closely related to this one I asked a couple of days ago.

I am building an angularJS web-application. I am currently trying to use the ngMeta module to allow the web-app to produce dynamic entries for page title and for meta tags so that' Facebook will know to display an image, a title and description whenever a user posts a link from my web-app. I'm using Facebook's public-facing debugger to help me troubleshoot this.

But it is not working for me. Here is the state I'm using for my web-app's Splash Page:

  $stateProvider.state('splash', {
          url: '/',
          templateUrl: 'html/splash.html',
          controller: 'SplashCtrl',
          data: {meta: {'title': 'XXXXXXXXXXXX',
                        'description': 'YYYYYYYYYYYY'}}});

Here is my controller:

myApp.controller('SplashCtrl', function($scope, ngMeta) {
    var self = this;
    console.log('self = ', self);

    ngMeta.setTag('description', 'DDDDDDDD');

Here is my index.html

Here is my template file, splash.html which is referenced in the state declaration:

<div ng-controller="SplashCtrl as splashCtrl">
    HELLO WORLD
</div>

Look what Facebook's debugger reports when I scrape this Splash Page (FYI, my private info has been scrubbed): enter image description here

Why isn't the description I'm setting in SplashCtrl ('DDDDDDDD') showing up in Facebook's scraper? How can I fix it so it does?

BTW, I have successfully initialized ngMeta using the run() block. I know it's working because when I load this page, the <title>{{ngMeta.title}}</title> from index.html correctly shows up as AAAAA.

So ngMeta.setTitle() is definitely working. Then how do I set and access the other properties like description, image, etc?

Upvotes: 1

Views: 2387

Answers (1)

Amadou Beye
Amadou Beye

Reputation: 2828

All your meta tags are binding well, you can see it by inspecting your page

screenshot of your website.

I think this facebook tools is reading the source code of your page instead of the initialised angular app(as if you do CTRL + U in chrome to see your source code, you will see that datas are not templating)

This does not matter for sharing content from your angular application. Facebook will take care to read the binding value instead of the scope variable

However if you want no scope variable from your source code, This answer could be a solution

Upvotes: 2

Related Questions