Français

<meta>

Using meta, link or style in the body: microdata, resource hints, inline CSS

— 2 min read

  • HTML
  • accessibility
  • semantics

<meta> + <link> + <style> — In the body

The <meta>, <link> and <style> elements normally live in the <head>. But the standard allows certain uses in the <body>: <meta> with itemprop for Schema.org microdata, <link> with itemprop or rel for resource hints and stylesheets, and <style> for inline CSS.

When to use it

You want to add Schema.org microdata to a specific component with <meta itemprop>. You want to load a conditional stylesheet close to the component that needs it. You want to inject critical CSS directly in the <body> for an isolated component.

What you gain

Accessibility: <meta itemprop> has no visual impact and no effect on assistive technologies. It is an invisible annotation for machines.

SEO: Schema.org microdata via <meta itemprop> enriches search results with rich snippets (Google documentation).

Code example

<article itemscope itemtype="https://schema.org/Product">
  <h2 itemprop="name">Wireless headphones</h2>
  <meta itemprop="sku" content="WH-1000XM5" />
  <link itemprop="image" href="/images/headphones.webp" />
  <p itemprop="description">Noise-cancelling wireless headphones.</p>
</article>
 
<style>
  .critical-banner {
    background-color: hsl(0 70% 50%);
    color: hsl(0 0% 100%);
    padding: 1rem;
  }
</style>

Further reading