# Initial static HTML app 'shell'

**URL:** <https://discourse.elm-lang.org/t/initial-static-html-app-shell/9940>\
**Category:** Learn\
**Created:** [August 16, 2024, 9:20am UTC](https://discourse.elm-lang.org/t/initial-static-html-app-shell/9940 "2024-08-16T09:20:29Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![allanderek](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/allanderek/32/1360_2.png) [@allanderek](https://discourse.elm-lang.org/u/allanderek)\
**Post date:** [August 16, 2024, 9:20am UTC](https://discourse.elm-lang.org/t/initial-static-html-app-shell/9940/1 "2024-08-16T09:20:29Z")

</div>

We use Elm for our eCommerce stores and have been for about 5 years now. The store is an SPA written in Elm, i.e. using `Browser.application`, hence everything is ultimately rendered by Elm. We’ve traditionally server rendered the header area of the page as part of the app shell (the downloaded HTML page), believing it would speed up time to first paint (or some similar metric).

We’re making some changes now to the header and are reconsidering complexity of keeping the server and client rendering code in sync (the server-rendering code is not written in Elm). We’ve been doing some research around SEO best practices in this area and struggling to find anything meaningful. What are peoples’ general thoughts on this? Is it best to just keep it simple and render a completely blank placeholder? Or maybe something generic but visual that represents the rough site layout graphically? Or something else entirely?

---

<div class="post-metadata">

**Author:** ![dta](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/dta/32/1917_2.png) [@dta](https://discourse.elm-lang.org/u/dta)\
**Post date:** [August 16, 2024, 12:54pm UTC](https://discourse.elm-lang.org/t/initial-static-html-app-shell/9940/2 "2024-08-16T12:54:06Z")

</div>

You should check out [elm-pages](https://elm-pages.com/). It may or may not fit your use case depending on how your SPA is set up, but server-side rendering in pure Elm is supported explicitly. Check out server-rendered routes.

---

<div class="post-metadata">

**Author:** ![allanderek](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/allanderek/32/1360_2.png) [@allanderek](https://discourse.elm-lang.org/u/allanderek)\
**Post date:** [August 16, 2024, 1:16pm UTC](https://discourse.elm-lang.org/t/initial-static-html-app-shell/9940/3 "2024-08-16T13:16:32Z")

</div>

Thanks. I use elm-pages for a couple of other projects. It’s unfortunately not appropriate for our main eCommerce stores, for various reasons, including just because we have a bunch of working code that we do not wish to throw away and start again.

---

<div class="post-metadata">

**Author:** ![jachin](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/jachin/32/1579_2.png) [@jachin](https://discourse.elm-lang.org/u/jachin)\
**Post date:** [August 20, 2024, 9:46pm UTC](https://discourse.elm-lang.org/t/initial-static-html-app-shell/9940/4 "2024-08-20T21:46:53Z")

</div>

This has reminded me that I made an SPA in Elm… and I have been meaning to look into how the pages are (or not) being index by Google and Bing. I thought I heard/or read… somewhere that they’re crawlers executed JavaScript now.

My initial investigations have made it looks like the answer is no, the crawlers don’t seem to have gotten an executed any of the (Elm generated) JavaScript.

However… there are some things for me to fix, including adding a sitemap. I’m going to try some of their suggestions and see if it helps.

At this point in this side project I don’t think good SEO is going to make or break this project. So it’s not the worst thing in the world if it doesn’t work, but yeah, if I ever decided I needed better SEO I was considering migrating the project to elm-pages and doing a lot more static site generation.

---

<div class="post-metadata">

**Author:** ![allanderek](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/allanderek/32/1360_2.png) [@allanderek](https://discourse.elm-lang.org/u/allanderek)\
**Post date:** [August 21, 2024, 7:32am UTC](https://discourse.elm-lang.org/t/initial-static-html-app-shell/9940/5 "2024-08-21T07:32:42Z")

</div>

Google definitely crawls our pages, even those the static shell does not render. So it is executing the Elm compiled Javascript.

---

<div class="post-metadata">

**Author:** ![dta](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/dta/32/1917_2.png) [@dta](https://discourse.elm-lang.org/u/dta)\
**Post date:** [August 21, 2024, 10:53am UTC](https://discourse.elm-lang.org/t/initial-static-html-app-shell/9940/6 "2024-08-21T10:53:01Z")

</div>

Does it have good “snippets” (the excerpts from the page in the search result) for those pages? In order to crawl a page, it just needs a link to it, not to be able to see its contents

---

<div class="post-metadata">

**Author:** ![jachin](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/jachin/32/1579_2.png) [@jachin](https://discourse.elm-lang.org/u/jachin)\
**Post date:** [August 21, 2024, 4:24pm UTC](https://discourse.elm-lang.org/t/initial-static-html-app-shell/9940/7 "2024-08-21T16:24:02Z")

</div>

Ok, I read your initial post a little more carefully. My understanding is… with all that, is Google and probably Bing and stuff want you to use their tools to analyze your website… things like Lighthouse and "Google Search Console and if those tools say you’re website is good, then it’s good. I’m sure there are ways to go above and beyond… but when you get into those waters Google is a lot more likely to “change the rules” and it will be hard for you to find out.

As I’ve been going down this rabbit hole… this article just showed up in my news feed about the Semantic Web:

> **[Being on The Semantic Web is easy, and, frankly, well worth the bother](https://csvbase.com/blog/13)**
>
> Web 3.0 was not about the blockchain, thank god

I don’t think I knew about JSON-LD.

Google even has a “Rich Results Test” so you can see if you have it set up right:

[https://search.google.com/test/rich-results](https://search.google.com/test/rich-results)

Seems pretty cool, I might try to get some of this stuff to work. It looks like it should just all work in Elm.

All that said… I do have a lingering suspicion that if all (or most) of my site was statically generated (just HTML files) that Google would “appreciate” that on some level.

---

<div class="post-metadata">

**Author:** ![allanderek](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/allanderek/32/1360_2.png) [@allanderek](https://discourse.elm-lang.org/u/allanderek)\
**Post date:** [August 22, 2024, 7:04am UTC](https://discourse.elm-lang.org/t/initial-static-html-app-shell/9940/8 "2024-08-22T07:04:03Z")

</div>

This is quite interesting. I was sure we had this all worked out, and was sure we had concluded that google was indeed traversing our pages. All are indexed, but we do have a sitemap. However, if you search for particular terms on each of the product pages (e.g. the SKU of the product) then you are returned the specific product page. This suggests that google is indeed capable of reading the page rendered via Javascript.

However, there are no rich-results for our pages. So this is definitely something that we need to look into.

Thanks for the input!

---

<div class="post-metadata">

**Author:** ![lydell](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/lydell/32/178_2.png) [@lydell](https://discourse.elm-lang.org/u/lydell)\
**Post date:** [August 22, 2024, 8:10am UTC](https://discourse.elm-lang.org/t/initial-static-html-app-shell/9940/9 "2024-08-22T08:10:45Z")

</div>

Here’s an interesting link on the topic:

> **[In-Depth Guide to How Google Search Works | Google Search Central...](https://developers.google.com/search/docs/fundamentals/how-search-works#:~:text=Google%20renders%20the-,page,-and%20runs%20any)**
>
> Get an in-depth understanding of how Google Search works and improve your site for Google's crawling, indexing, and ranking processes.

> During the crawl, Google renders the page and [runs any JavaScript it finds](https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics#how-googlebot-processes-javascript) using a recent version of [Chrome](https://www.google.com/chrome/), similar to how your browser renders pages you visit. Rendering is important because websites often rely on JavaScript to bring content to the page, and without rendering Google might not see that content.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [September 1, 2024, 8:11am UTC](https://discourse.elm-lang.org/t/initial-static-html-app-shell/9940/10 "2024-09-01T08:11:02Z")

</div>

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.
