SEO Tag Styleguide

It is recommended that blocks have H1/H2/H3 SEO tags applied. This styleguide provides a reference to what tags should be used where.

H1/H2/H3 SEO Tag Styleguide

**Block Type** **Element Type** **Tag**
Hero Block Article Titles H2
Hero Block Desk or textInput H4
Hero Block Sidebar All Elements None
Body Block Article Titles H3
Body Block Desk or textInput H4
Footer Links H5

Hero Block

All article titles should have a h2 tag applied

<template>
  <Block :block="block">
    <DeskSection :order="0">
      <ArticleBlock v-slot="{ article }">
        <Text component="h2" kind="article-title" blockType="Article Title">{{
          article.title
        }}</Text>
      </ArticleBlock>
    </DeskSection>
  </Block>
</template>

Standard Blocks

All article titles should have a h3 tag applied

<template>
  <Block :block="block">
    <DeskSection :order="0">
      <ArticleBlock v-slot="{ article }">
        <Text component="h3" kind="article-title" blockType="Article Title">{{
          article.title
        }}</Text>
      </ArticleBlock>
    </DeskSection>
  </Block>
</template>

All TextInput / Desk should have a h4 tag applied

<template>
  <Block :block="block">
    <DeskSection :order="0" v-slot="{ desk }">
      <TextInput component="h4" kind="desk-name" blockType="Desk Name">{{
        desk
      }}</TextInput>
    </DeskSection>
  </Block>
</template>

All links ('a' tags) should have a h5 tag applied

<template>
  <Block :block="block">
    <a href="...">
      <Text component="h5" kind="link" blockType="link" />
    </a>
  </Block>
</template>
Edit this page on GitHub Updated at Sun, Nov 20, 2022