0

I'm using Gatsby and would like have my website identified an AMP website.

How do I add the mandatory AMP attribute to the <html> tag?

nyedidikeke
  • 6,899
  • 7
  • 44
  • 59

1 Answers1

1

In order to add the mandatory AMP HTML attribute to your <html> tag using Gatsby, you may want to:

  1. Customise your html.js file by cloning the .cache/default-html.js to your src/ directory.

    You can achieve that by running the command line below;

cp .cache/default-html.js src/html.js
  1. Then, add amp="" to the newly created src/html.js file as follows;
<html amp="" {...props.htmlAttributes}>

Aside the option above, you can achieve same by simply adding the snippet below to your gatsby-ssr.js file;

import React from "react"

// Adds an amp attribute to the <html> tag
export const onRenderBody = ({ setHtmlAttributes }) => {
  setHtmlAttributes({
    amp: ``,
  })
}
nyedidikeke
  • 6,899
  • 7
  • 44
  • 59