Facebook share not receiving og:meta tags

[SdShadab]

The angular site: http://ec2-52-77-225-241.ap-southeast-1.compute.amazonaws.com/article/poor-left-behind-at-climate-talks is using (successfully) this directive and the tags are being updated. However when I try sharing it (the post share is currently using the feed method) I get the default meta tags.

Even facebook debugger is not showing the current tags..

Also, the facebook sharing on Disqus is not working as it is using Facebook share dialogue.

Could someone shed some light on what's happening?

[jvandemo]

@SdShadab — From what I can see the meta elements are replaced correctly.

What button are you clicking to share the post? Can you maybe post a screenshot or exact instructions? Thanks!

[SdShadab]

Hi @jvandemo Please look at the screenshots attached. http://ec2-52-77-225-241.ap-southeast-1.compute.amazonaws.com/article/govt-to-spend-tk-119332cr-to-upgrade-coxs-bazar-airport

I am talking about sharing via Disqus share.

As you can see, its showing the old meta tags and not the updated ones.

[jvandemo]

@SdShadab — Here the Twitter share button renders the correct title. I can't check the Facebook one because I don't have a Facebook account.

I suspect that if anything goes wrong, it may have to do with detecting the title before angular-meta-update had a change to update it.

I can see from the Disqus documentation that you pass in the title manually using this.page.title: https://help.disqus.com/customer/portal/articles/472098-javascript-configuration-variables

So in your case that may be the solution to make sure the correct title is used in the share actions.

I don't feel it has anything to do with this library directly.

Does that make sense? Thanks!

[SdShadab]

Really appreciate your inputs. However, specifying the title doesn't work. Also, it's like Facebook doesn't read the meta tags on this Angular page.

You could try using the Favebook debugger and see for yourself.

On Thursday, 21 January 2016, Jurgen Van de Moere notifications@github.com wrote:

@SdShadab https://github.com/SdShadab — Here the Twitter share button renders the correct title. I can't check the Facebook one because I don't have a Facebook account.

I suspect that if anything goes wrong, it may have to do with detecting the title before angular-meta-update had a change to update it.

I can see from the Disqus documentation that you pass in the title manually using this.page.title: https://help.disqus.com/customer/portal/articles/472098-javascript-configuration-variables

So in your case that may be the solution to make sure the correct title is used in the share actions.

I don't feel it has anything to do with this library directly.

Does that make sense? Thanks!

— Reply to this email directly or view it on GitHub https://github.com/jvandemo/angular-update-meta/issues/13#issuecomment-173618040 .

[image: WebAble Digital] http://t.senalquatro.com/e1t/c/5/f18dQhb0S7lC8dDMPbW2n0x6l2B9nMJW7t5XZs5wLXV0VRbJjl1p7ZwjW64zBkx56dLvhf44mxXY02?t=http%3A%2F%2Fwww.webable.digital%2F&si=5979286194880512&pi=71526f92-a617-4bf2-e926-867ea04ebdb9

SYED SHADAB MAHBUB / Director, Technology Ph: +88-01687-247861

---

---

Website: webable.digital http://t.senalquatro.com/e1t/c/5/f18dQhb0S7lC8dDMPbW2n0x6l2B9nMJW7t5XZs5wLXV0VRbJjl1p7ZwjW64zBkx56dLvhf44mxXY02?t=http%3A%2F%2Fwww.webable.digital%2F&si=5979286194880512&pi=71526f92-a617-4bf2-e926-867ea04ebdb9

Social Media: Facebook http://t.senalquatro.com/e1t/c/5/f18dQhb0S7lC8dDMPbW2n0x6l2B9nMJW7t5XZs5wLXV0VRbJjl1p7ZwjW64zBkx56dLvhf44mxXY02?t=https%3A%2F%2Fwww.facebook.com%2FWebAble&si=5979286194880512&pi=71526f92-a617-4bf2-e926-867ea04ebdb9 | Twitter http://t.senalquatro.com/e1t/c/5/f18dQhb0S7lC8dDMPbW2n0x6l2B9nMJW7t5XZs5wLXV0VRbJjl1p7ZwjW64zBkx56dLvhf44mxXY02?t=https%3A%2F%2Ftwitter.com%2Fwebabledigital&si=5979286194880512&pi=71526f92-a617-4bf2-e926-867ea04ebdb9 | LinkedIn http://t.senalquatro.com/e1t/c/5/f18dQhb0S7lC8dDMPbW2n0x6l2B9nMJW7t5XZs5wLXV0VRbJjl1p7ZwjW64zBkx56dLvhf44mxXY02?t=https%3A%2F%2Fwww.linkedin.com%2Fcompany%2F3544530%3Ftrk%3Dtyah%26trkInfo%3DtarId%253A1417008551254%252Ctas%253AWebable%252Cidx%253A2-1-2l&si=5979286194880512&pi=71526f92-a617-4bf2-e926-867ea04ebdb9 | SlideShare http://t.senalquatro.com/e1t/c/5/f18dQhb0S7lC8dDMPbW2n0x6l2B9nMJW7t5XZs5wLXV0VRbJjl1p7ZwjW64zBkx56dLvhf44mxXY02?t=http%3A%2F%2Fwww.slideshare.net%2FWebAble&si=5979286194880512&pi=71526f92-a617-4bf2-e926-867ea04ebdb9

---

---

Check out 'WebAbulous' articles on marketing in Bangladesh http://t.senalquatro.com/e1t/c/5/f18dQhb0S7lC8dDMPbW2n0x6l2B9nMJW7t5XZs5wLXV0VRbJjl1p7ZwjW64zBkx56dLvhf44mxXY02?t=http%3A%2F%2Fwebable.digital%2Fbable%2F&si=5979286194880512&pi=71526f92-a617-4bf2-e926-867ea04ebdb9

[PhantomxJoker]

I have this issue too, when I copy my app url, Facebook gets the original meta (inside index.html)

[tutley]

I'm currently trying to decide whether to use this or to simply create statically generated versions of the assets on my site that make sense to share and have the server-side template generate this stuff. So this issue is important to me as well. I'd also like to be able to use this same methodology for <link..... elements as well, to support Oembed.

I guess the issue here is: does facebook curl the page, or crawl it? If it crawls it, it seems like it should be working unless the formatting of the tag is wrong somehow. If it curls the page, it will always get the defaults, and this module won't work. Of course this depends on the implementation of SEO on your site, and whether or not it is actually serving the cached pages to the requester.

[jvandemo]

According to this StackOverflow post the Facebook Scraper does not run JavaScript.

Does anyone know if this information is still accurate?

[burakkilic]

+1

[tutley]

So, what I have found is two things: 1) Facebook isn't crawling javascript 2) Facebook may not even be crawling, but might just be using something like curl

I went ahead and just made a permalink (server-generated) version of my sharable content. The reason I say the above is that I tested out several things, including using update-meta along with phantom.js-generated cache pages when serving crawler requests. Nothing worked. So if someone smarter than me can get cached pages to trigger whenever it sees requests from other servers rather than other users, that will fix the issue.

That being said, this doesn't appear to be an issue with update-meta, which I'm still using and which works nicely.

[jvandemo]

@tutley — Thank you for the update!

I have labeled this issue with "help wanted".

I think you are right in that it may have something to do with the Facebook crawler, but I am not familiar with its exact internals.

Hopefully someone who knows more about the crawler can jump in and help. Would be great to learn why it happens and if/how we may be able to tackle the problem.

Thanks again for all your help (others too)!

[urbgimtam]

Facebook cannot parse javascript.

For that you may use a rendering service like Prerender.io (they have a free tier, up to 250 pages), They parse and cache your page, and when Facebook (or other non-js aware crawlers) request the page it will serve the cached (rendered) version. When a user clicks on it, is redirected to the regular working page.

If you have a nodejs server to spare, you can even install their open source service.

Hope it helps.

[jvandemo]

@urbgimtam — Thank you for your input. This library works well with prerender.io so it appears that may be the only way (for now) to make sure Facebook uses the correct values.

I will close this issue for now. Should anyone have any other question or remark, please don't hesitate to re-open it. Thanks!

[romelgomez]

What about Youtube, It seems to use an hybrid approach, “is like an ajax app or single-page application (spa) and the same time is classic app where the page is rendered in the server”, when you request some video, you get a processed page, all meta tags has the video related data, but when you change to other video, the meta tags are not updated. So seems to be in this way you can avoid this directive, prerender, seo4ajax, brombone, etc. So what do you all think?

[romelgomez]

Well, I already confirmed this, but not all, this directive is very useful, i use to update the title, the hybrid approach that have youtube, is really good, and the best is you can avoid prerender, seo4ajax, brombone, etc. And basically just you need to process the meta tags index.html, i use http://handlebarsjs.com/ for this.

Demo: http://londres.herokuapp.com/view-publication/-KBkoNzVRx1es5pTfCb7/subaru-impreza-wrx-sti.html

[jvandemo]

@romelgomez — Thank you for your feedback, much appreciated!

[romelgomez]

@jvandemo Thanks, I like to help, here i extend the explanation with example code: https://github.com/romelgomez/single-page-application-seo

[jvandemo]

@romelgomez — Super, thank you for sharing 👍