Is polymer SEO Friendly ?

[nawras albaghdadi]

I'm new to the polymer . trying to start my new project using it , but when I tried it and used the custom elements I notice that in the HTML when you inspect the page elements you see it has a lot of style tags and scripts tags 

also ,  when viewing the page source the page looks empty , so  

1 ) how the search engine will work with this  ?

2) and the shadow dom won't affect the SEO ?

3) and what about all the style and scripts tags inside the body of the page  , won't affect the search engine?

thanks 

[Thusjanthan Kubendranathan]

Any updates on this subject? I too am also worried about SEO and the affects of shadow DOMs. Thoughts?

Cheers, 

TJ

[Arthur Evans]

Hi TJ,

Single-page apps that use Polymer tend to face the same set of challenges as other SPAs. That is, crawlers (and especially social sharing bots, like Facebook and Twitter) may or may not run JavaScript, so they may not see the right content and meta tags if your app is populating those client-side. Some people use server-side rendering to work around these issues in SPAs, but  shadow DOM isn't really compatible with server-side rendering.

In practice, shadow DOM itself tends to be less of an issue, as long as you include the correct polyfills. Crawlers that run script should see the stuff in the shadow roots (typically, they're not doing "view source", they're looking at the rendered page).

There are a couple of approaches to ensuring that your site is indexable. For content sites like blogs, you might use server-side or build-time templating to inject the content into light DOM and populate the metadata. The Polymer docs site takes this approach. After initial page load, it acts as a SPA, loading page content dynamically when you navigate. But it's kind of hybrid in structure.

Sam Li from the Polymer team recently gave a talk about another approach—using headless chrome to render the app server side. In this case, when the site receives a request from a pre-defined list of bots, it forwards the request to the renderer. It forces the shadow DOM polyfill on, so that the contents can be rendered server side and sent to the client. The Webcomponents.org catalog uses this approach.

SSR for web components overview (Gray Norton)

https://www.youtube.com/watch?v=wYGoJ8R3nnM&index=20&list=PLNYkxOF6rcIDP0PqVaJxqNWwIgvoEPzJi

SSR with headless chrome (Sam Li)

https://www.youtube.com/watch?v=ydThUDlBDfc&index=21&list=PLNYkxOF6rcIDP0PqVaJxqNWwIgvoEPzJi

Sam's headless chrome renderer (Rendertron):

https://github.com/GoogleChrome/rendertron

Hope that helps.

Cheers,

Arthur

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev+unsubscribe@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/d015e74a-9923-402a-a95e-a2a62f7e1cbe%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.