Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Okay, Single Page Applications in combination with a Progressive Web App approach is the new orange (or is it still black? I have a hard time keeping up with the lingo).

You basically use web workers (or not, it's not important) to fetch data from (for example) an API, and then on the fly generate the HTML you need to present the data in your app.

// just a really quick and dirty example
fetch('http://example.com/pages/welcome')
    .then(response => response.json())
    .then(data => {
        const heading = document.createElement('h1');
        const headingText = document.createTextNode(data.title);
        heading.appendChild(headingText);
        document.querySelector('#content').appendChild(heading);
The problem is that when you take this approach your DOM and content is basically invisible to search engines and other types of crawlers because these usually ignore any javascript post-rendering and DOM manipulation.
I've noticed a lot of people in tutorials about this approach claim that single page applications can have great impact on your SEO, unless implemented correctly.
And here's the question, because none of the tutorials I've read or seen go on to explain how this correct implementation then is done.
I know about prerenders such as prerender.io, but is that really the only solution to make a single page application readable to crawlers and search engines? What is this magical "correct" way of implementing a single page application?
                As of 3 years ago (2015) you no longer need to do anything special to get google to crawl SPA. Google no longer looks at HTML when crawling. Instead Google now creates a DOM just like a browser and then crawl that DOM. Here's the announcement from Google: webmasters.googleblog.com/2015/10/…
– slebetman
                Mar 6 '18 at 8:18
                This has been discussed in other places as well: webmasters.stackexchange.com/questions/85200/…
– Knelis
                Mar 6 '18 at 8:19
                Here's Google's own guide on how to make sure your website is crawlable by Google: support.google.com/webmasters/answer/35769?hl=en
– slebetman
                Mar 6 '18 at 8:20
                Here's Google's official tool to check how google sees your site: support.google.com/webmasters/answer/…
– slebetman
                Mar 6 '18 at 8:20
                @slebetman That's great! Thanks for the links. But that's just google. What about when you link to a page in a social media app like facebook or twitter. The generated card in that social media is not rendered correctly still.
– Brian Emilius
                Mar 6 '18 at 8:24
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.