Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: improve gatsby-plugin-offline SSR seo #20566

Merged
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 16 additions & 3 deletions docs/docs/seo.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,23 @@ Gatsby can help your site rank and perform better in search engines. Using Gatsb
## Server rendering

Because Gatsby pages are server-side rendered, all the page content is available to Googlebot and other search engine crawlers.
You can see this by viewing the source for this page in your browser Right-Click => View source. You'll see the fully rendered HTML document.
wardpeet marked this conversation as resolved.
Show resolved Hide resolved

You can see this by viewing the source for this page with `curl` (in your terminal):
When you've installed [`gatsby-plugin-offline`](https://www.gatsbyjs.org/packages/gatsby-plugin-offline/), you'll see a partial HTML document that does not contain the HTML you were hoping for. We enable this trick to optimize bandwidth consumption and not let your users download too much data. Serving a partial HTML document is okay. Google and other search engines will still see the full HTML because `gatsby-plugin-offline` only starts working on the second-page load. A search engine always runs a page in Sandbox mode, which essentially is the first visit.

As a website owner, how do I test my site is serving it's HTML correctly when `gatsby-plugin-offline` is being used? It would be best if you used your terminal of choice to visit your website. You can crawl your site by running the following command:
wardpeet marked this conversation as resolved.
Show resolved Hide resolved

**on Windows (using powershell):**

```shell
curl https://www.gatsbyjs.org/docs/seo
Invoke-WebRequest https://www.gatsbyjs.org/docs/seo | Select -ExpandProperty Content
```

`Right-Click => View source` won't show you the actual HTML (but the pages are still server-side rendered!) as this site is using service workers. [Read these notes](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-offline#notes) to learn more.
**on Mac OS/Linux:**

```shell
curl https://www.gatsbyjs.org/docs/seo
```

## Speed boost

Expand Down Expand Up @@ -64,3 +73,7 @@ After deployment, their [Rich result status reports](https://support.google.com/
## Additional resources

You might also be interested in [blog posts about SEO in Gatsby](/blog/tags/seo/).

```
LekoArts marked this conversation as resolved.
Show resolved Hide resolved

```
12 changes: 10 additions & 2 deletions packages/gatsby-plugin-offline/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -197,8 +197,16 @@ Gatsby offers great SEO capabilities and that is no different with `gatsby-plugi

To see the HTML data that crawlers will receive, run this in your terminal:

```bash
curl https://www.yourdomain.tld
**on Windows (using powershell):**
laurieontech marked this conversation as resolved.
Show resolved Hide resolved

```shell
Invoke-WebRequest https://www.gatsbyjs.org/docs/seo | Select -ExpandProperty Content
```

**on Mac OS/Linux:**

```shell
curl https://www.gatsbyjs.org/docs/seo
```

Alternatively you can have a look at the `/public/index.html` file in your project folder.
Expand Down