Polymer / shop

The Shop app
https://shop.polymer-project.org/
992 stars 494 forks source link

Whats about SEO? #29

Closed marcelschliesser closed 8 years ago

marcelschliesser commented 8 years ago

http://webcache.googleusercontent.com/search?sourceid=chrome-psyapi2&ion=1&espv=2&ie=UTF-8&q=cache%3Ahttps%3A%2F%2Fshop.polymer-project.org&oq=cache%3Ahttps%3A%2F%2Fshop.polymer-project.org&rlz=1C1RAEH_deDE626DE648&aqs=chrome..69i57j69i58.1255j0j4

I Think it is bad for a Web-Shop.

slifin commented 8 years ago

Polymer looks great but it really does need server side rendering, the holes are too glaring in any JavaScript app that doesn't, it would really help compatibility with browsers, lynx, performance on first load, scraping, accessibility, screen readers etc

Things like Google translate don't work: https://translate.google.co.uk/translate?sl=auto&tl=ar&js=y&prev=_t&hl=en&ie=UTF-8&u=https%3A%2F%2Fshop.polymer-project.org%2F&edit-text=

or the Internet Archive https://web.archive.org/web/20160523112309/http://shop.polymer-project.org/

At the moment the custom tags are like placeholder doms till polymer loads, maybe that could be changed so that content can be put in before via the server, then upgraded when the JavaScript loads, React does this with dom diffing maybe there's a more native way than just attaching ids to everything like react does..

It would need a powerful server side parser to take components and parse their css into encapsulated css, and parse the dependancy graph to get at a big html string and maybe leave the JavaScript out of the components, leave that till the components are upgraded later in page load

ebidel commented 8 years ago

It looks like we could have done a better job of updating <title>, but Google has indexed the entire (dynamic) app without any trouble:

screen shot 2016-05-23 at 2 25 47 pm

and the source doesn't have any of these details. Woot!

screen shot 2016-05-23 at 2 33 29 pm

Other SPA Polymer examples are the Google I/O web app and Polymer's new site. Both of those are indexed.

The important bit is to follow the existing web master guidelines, and include things like canonical links, use <a href>, correct meta data, etc.

it would really help compatibility with browsers, lynx, performance on first load, scraping, accessibility, screen readers etc

I'm not I understand the argument. Compatibility is great thanks to the polyfills. Performance of Shop is great thanks to h2, push, and async HTML Imports + dynamically loaded content.

The added value to accessibility may be to have the aria labels already in the markup at load time. However, I'm not sure that's a great signal to screen readers users. You wouldn't want a component to be interacted with until it's truly ready. I also love that I don't need to remember all the a11y tricks. It's nice to have components do that for me!

frankiefu commented 8 years ago

@blasten To update the page title for SEO, I think we can just update the document.title in _onChangeSection.

abdonrd commented 8 years ago

And what about things like Google Translate or Internet Archive? As @slifin said.

ebidel commented 8 years ago

I ran the Google Translate chrome extension on pp.org:

screen shot 2016-05-24 at 1 28 24 pm

Do other tools like internet archive work on today's existing SPAs? It's important to remember some of these tools were created a long time ago and may need updating.

abdonrd commented 8 years ago

@ebidel I'm not sure if all of them are SPA, but it works:

ebidel commented 8 years ago

@abdonrd those are doc sites. I'd be more curious about apps built using those frameworks.

CaptainCodeman commented 8 years ago

@abdonrd most of the examples you give don't really use the frameworks they are advertising and are more static content than SPAs (ah, @ebidel posted the same while I was typing).

Using the "fetch as google" in webmaster tools is a good test as well - I've found polymer works well and renders the dynamically-loaded page content, Angular 2 has been hit and miss with which pieces are rendered.

abdonrd commented 8 years ago

@ebidel @CaptainCodeman Thanks guys!

ghost commented 8 years ago

@ebidel

Could the shop demo then be updated with localisation (https://www.polymer-project.org/1.0/toolbox/localize).

It would be a perfect example because you have everything in this demo:

ghost commented 8 years ago

sorry i did not realise this is closed. I will raise a NEW issue