Polymer / prpl-server

⚠️Maintenance mode⚠️ An HTTP server for Node designed to serve PRPL apps in production.
Other
425 stars 29 forks source link

proxy bots to SSR service for SEO, Open Graph, etc. #31

Closed abdonrd closed 7 years ago

abdonrd commented 7 years ago

I'm not sure if prpl-server-node should do it, but... What is your opinion about support Open Graph meta tags? To improve share links in social networks (Twitter, Facebook, ...), Slack, etc.

Card validator: https://cards-dev.twitter.com/validator Facebook Sharing Debugger: https://developers.facebook.com/tools/debug/

aomarks commented 7 years ago

Doesn't seem like something you'd need server support for? Couldn't you just annotate your markup before serving?

abdonrd commented 7 years ago

@aomarks yes, we need server support.

I'll share you some references about how @samuelli deal with it in webcomponents.org:

Add Open Graph meta tags: https://github.com/webcomponents/webcomponents.org/issues/381 Dynamically add open graph meta tags: https://github.com/webcomponents/webcomponents.org/pull/915 Add support for Twitter & Slack meta tags: https://github.com/webcomponents/webcomponents.org/pull/916 Add open graph tagson collection & author pages: https://github.com/webcomponents/webcomponents.org/pull/919

aomarks commented 7 years ago

Ah I see, so it sounds like this is in the general category of "bots don't execute javascript", and part of a larger discussion about SEO. It looks like webcomponents.org proxies responses through bot-render.appspot.com when it detects a bot user agent.

One option would be to just use prpl-server as express middleware, and register a custom handler before it that detects bots and does whatever custom server side rendering your app needs.

Maybe there is also a built-in feature that could help with the proxy approach, if that's a common pattern to deal with SEO rendering issues. Maybe you could configure a bots build with a proxy URL?

syu93 commented 7 years ago

Why not using headless-chrome to pre render page when bot user-agent are detected, as this feature is nativelly support by the prpl-server

aomarks commented 7 years ago

@samuelli has written https://github.com/samuelli/bot-render which is a proxy server that does what you are describing. See also this post.

We don't want to build this directly into prpl-server, but we could make it easy to detect bot user agents and proxy requests to a service like bot-render. You could configure it to point at http://bot-render.appspot.com, or to your own instance of bot-render, or similar.

syu93 commented 7 years ago

That's the post I was talking about. Though it'll be great to have it built-in in the server to streamline enabling SEO for people but we could use alternatives as long as we can detect esealy bot user-agent

JosefJezek commented 7 years ago

@justinribeiro @aomarks FYI

https://github.com/justinribeiro/pwa-firebase-functions-botrender

syu93 commented 7 years ago

Well now there a way to integrate properly with headless chrome without requesting a service using https://github.com/GoogleChrome/puppeteer

abdonrd commented 7 years ago

Good job @aomarks & @samuelli! 👏