Lighthouse: Audit: SEO best practices for SPAs

[ebidel]

I often get questions about SEO best practices for SPAs. Generally, there are certain practices you should follow to maximize crawlability:

• use real anchors instead of click listeners. crawlers should be able to discover links.
• use real urls instead of ajax/#!/ urls (deprecated: https://developers.google.com/webmasters/ajax-crawling/docs/getting-started)
• use <link rel="canonical">
• using native elements where possible (<button> instead of <div class="button">). Possibly more a11y.
• polyfill older features (should already be doing)

more ref: https://www.youtube.com/watch?time_continue=583&v=JlP5rBynK3E

More stuff in https://webmasters.googleblog.com/2016/11/building-indexable-progressive-web-apps.html

[paulirish]

https://webmasters.googleblog.com/2016/11/building-indexable-progressive-web-apps.html is Google Search's most recent guidance on the topic (posted by John, so it matches the video p well)

The recommendations:

• Make Your Content Crawlable
• Provide Clean URLs
• Specify Canonical URLs
• Design for Multiple Devices
• Develop Iteratively
• Use Progressive Enhancement
• Test with Search Console
• Annotate with Schema.org structured data
• Annotate with Open Graph & Twitter Cards
• Test with Multiple Browsers
• Measure Page Load Performance

[RehanSaeed]

• Annotate with Schema.org structured data
• Annotate with Open Graph & Twitter Cards

These go in the HTML head section and require server side rendering. I've actually asked this as a StackOverflow question: "How do you Handle HTML Metadata & SEO in Progressive Web Apps (PWA)" a few days ago.

Does this mean that you cannot use a single page app shell and get the performance benefits that come with that model if you want good SEO/metadata which require server side rendering?

[igrigorik]

Would love to see this audit in LH! @ebidel @paulirish is this work prioritized and on the roadmap? Anything we can do to help nudge it along?

[rviscomi]

+1 to what Ilya said

It'd be great to be able to consume SEO audits from LH in HTTP Archive.

[brendankenny]

These are on our roadmap, but with @ebidel out on holiday this month, I'm not sure what the timeline looks like. I'd be happy to help someone else ramp up on writing these audits, though, if there's any interest :)

The first steps would be to start outlining the answers to the audit criteria list we've started to put together in #2624. Basically, identify which of these are testable via Lighthouse, what would the audit(s) specifically test, what are the pass/fail states, etc.

[addyosmani]

is this work prioritized and on the roadmap? Anything we can do to help nudge it along?

Following on from last week, I've offered the team an eng. contractor to work on implementing some new audits (that could possibly include the SEO ones). Let's see how far we can get over the next quarter or two :)

The first steps would be to start outlining the answers to the audit criteria list

👍 Agree with @brendankenny we should evaluate the list of audit criteria in #2624 and come up with a concrete MVP. I've seen some draft PRDs floating around so will circle back with @igrigorik and @rviscomi on them before we post back here with an update.

[rviscomi]

I can take this issue. On my immediate todo list:

• create SEO audit config
• answer questions in #2624

I may have some ramp-up questions :)

[paulirish]

https://github.com/GoogleChrome/lighthouse/milestone/6 now captures all the new SEO filed audits

[jdiapps]

Was this implemented? Does lighthouse currently support SEO tests as part of it's default tests?

[kdzwinel]

Yes it first landed in v2.7. ATM it's available in Chrome Canary and in the extension.