generateMetadata: how to use <link rel="amphtml" .... /> tag?

[a4lmamun]

Need a way to use amphtml link rel tag to achieve <link rel="amphtml" href="" />.

Reference:
https://amp.dev/documentation/guides-and-tutorials/optimize-and-measure/discovery

Add the following to the non-AMP page:
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">

And this to the AMP page:
<link rel="canonical" href="https://www.example.com/url/to/full/document.html”>

[KamilOcean]

Hi, @a4lmamun, I've found a crutch solution to add <link rel="amphtml" ... via icons config.

export async function generateMetadata({ params }): Promise<Metadata> {
  return {
    icons: {
      other: {
        rel: "amphtml",
        url: `${YOUR_SITE_HOST}/amp/${params.slug.join('/')}`
      }
    }
  }
}

The result template:

<link rel="amphtml" href="https://example.com/amp/articles/bla/bla/bla/23">

Full gist

[hyungkishin]

LGTM !!!

[amitinsan]

code shared by @KamilOcean is fine for single rel but If we have to add multiple rel link we case use following configuration in generateMetadata

export async function generateMetadata({ params }): Promise<Metadata> {
  return {
    icons: {
      icon: [
          {
            rel: "amphtml",
            url: `${YOUR_SITE_HOST}/amp/${params.slug.join('/')}`
           },
           {
            rel: "next",
            url: ``${YOUR_SITE_HOST}/amp/${nextpageurl}``
           },
           {
            rel: "prev",
            url: `${YOUR_SITE_HOST}/amp/${prevpageurl}`
           },
       ]
    }
  }
}