Ad

SEO Effect Of Populating Data With UseStaticQuery In Gatsby

- 1 answer

Afaik, pre-rendered HTML contents where text contents already populated inside DOM have better SEO performance as Google bots do not need to mess with javascript to read data inside the page.

As I saw in the documentation of Gatsby, data can be populated via useStaticQuery where data loaded with XHR requests and injected with javascript to the page which requires another render. I wonder how efficient it is in terms of SEO performance.

As I see, they directly suggest SEO sensitive data be provided via those queries :

const SEO = ({ title, description, image, article }) => {
  const { pathname } = useLocation()
  const { site } = useStaticQuery(query)
  const {
    defaultTitle,
    titleTemplate,
    defaultDescription,
    siteUrl,
    defaultImage,
    twitterUsername,
  } = site.siteMetadata
  const seo = {
    title: title || defaultTitle,
    description: description || defaultDescription,
    image: `${siteUrl}${image || defaultImage}`,
    url: `${siteUrl}${pathname}`,
  }
  return null
}
export default SEO

Also if this query approach has a negative effect on SEO performance, is there any built-in way in Gatsby to pre-render those contents?

Ad

Answer

Gatsby creates the SEO object (in addition, any default object in JavaScript except those affected by componentDidMount/useEffect hook or similar React lifecycles) when it compiles or deploys the site (i.e: when you run a build command). This means that your SEO object will be dynamically generated from any CMS data source, your object will be populated with any data from any source at the compilation time, but once done, it will be outputted in a plain HTML file (under /public folder). This plain HTML is what Google will read so, it won't deal with any JavaScript, it will read directly your metadata.

That's how Gatsby works and why it is SEO friendly: the insights score result is always amazing if your code is efficient but Gatsby helps to reach an amazing score by outputting the plain JavaScript instead of asking it to the server (like WordPress or other PHP sites does), your file is just there, ready to be read by Google, that's why is so blazing fast.

Asking your question, Gatsby built-in the SEO object at compilation time, not asynchronously or dealing with any JavaScript when you open a Gatsby site.

Ad
source: stackoverflow.com
Ad