gatsby: Google Mobile-Friendly Test Failing for Gatsby with no CSS via styled-components
I am using Gatsby + styled-components for my new VSCode course site. Everything looks fine on Desktop/Mobile but Google Mobile-Friendly test is failing miserably. Which is costing me SEO and more.
I am out of options, searched about it and didn’t find anything. I think I added the webfontloader plugin since then I started having this issue. But not sure. I’ve since removed it. Any help would be appreciated.
This is what I see on Google’s Mobile-friendly test.
Steps to reproduce
Here’s the HTML in case you need it to test. I opened this HTML up and yes, there is actually no CSS to be found. Click this raw file, it’s huge so not adding it here.
Expected result
CSS should be loaded by Google Mobile-Friendly test it is not at the moment. I am out of options so creating this issue to get some pointers on what to do. This is what the site should look like.
Actual result
CSS is not loaded 😦
Even if I try loading this HTML that I got from Google Mobile-friendly test, this is exactly what I see. No CSS.
Environment
System:
OS: macOS High Sierra 10.13.5
CPU: x64 Intel(R) Core(TM) i7-4850HQ CPU @ 2.30GHz
Shell: 5.3 - /bin/zsh
Binaries:
Node: 10.11.0 - ~/.asdf/shims/node
Yarn: 1.10.1 - /usr/local/bin/yarn
npm: 6.4.1 - ~/.asdf/shims/npm
Browsers:
Chrome: 70.0.3538.110
Firefox: 57.0.1
Safari: 11.1.1
npmPackages:
gatsby: ^2.0.44 => 2.0.44
gatsby-cli: ^2.4.6 => 2.4.6
gatsby-image: ^2.0.20 => 2.0.20
gatsby-plugin-google-analytics: ^2.0.7 => 2.0.7
gatsby-plugin-manifest: ^2.0.8 => 2.0.8
gatsby-plugin-offline: ^2.0.13 => 2.0.13
gatsby-plugin-react-helmet: ^3.0.1 => 3.0.1
gatsby-plugin-sharp: ^2.0.12 => 2.0.12
gatsby-plugin-sitemap: ^2.0.3 => 2.0.3
gatsby-plugin-styled-components: ^3.0.1 => 3.0.1
gatsby-source-filesystem: ^2.0.8 => 2.0.8
gatsby-transformer-sharp: ^2.1.8 => 2.1.8
npmGlobalPackages:
gatsby-cli: 2.4.3
Looking forward, peace! ✌️
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Comments: 24 (21 by maintainers)
Most of the Google testing tools are now updated to use Googlebot evergreen rendering so try running your site through the testing tool again @ahmadawais.
Thanks Martin (@AVGP) for the comment above. Any other latest Googlebot updates you can provide?
Hey there, I’m looking at the issue now as well. A few notes:
@ahmadawais dustin at gatsbyjs dot com
You can’t have a look at the “real” source code via
Site source
. You’re seeing the content served from the Service worker (Ref: https://github.com/gatsbyjs/gatsby/issues/10017#issuecomment-439946657).Do a
curl https://www.vscode.pro
and you’ll see the styling tags filled.Just add the netlify plugin, no options needed