Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Facebook share not receiving og:meta tags #13

Closed
SdShadab opened this issue Jan 21, 2016 · 17 comments
Closed

Facebook share not receiving og:meta tags #13

SdShadab opened this issue Jan 21, 2016 · 17 comments

Comments

@SdShadab
Copy link

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
Copy link
Owner

@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
Copy link
Author

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.
screenshot from 2016-01-21 21 49 11
screenshot from 2016-01-21 21 48 55

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

@jvandemo
Copy link
Owner

@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
Copy link
Author

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
#13 (comment)
.

[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
Copy link

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

@tutley
Copy link

tutley commented Feb 6, 2016

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
Copy link
Owner

jvandemo commented Feb 8, 2016

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

Does anyone know if this information is still accurate?

@burakkilic
Copy link

+1

@tutley
Copy link

tutley commented Feb 11, 2016

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
Copy link
Owner

@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
Copy link

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
Copy link
Owner

@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
Copy link

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
Copy link

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
Copy link
Owner

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

@romelgomez
Copy link

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

@jvandemo
Copy link
Owner

@romelgomez — Super, thank you for sharing 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

7 participants