Heading Styles & SEO Structure [DEMO]

Gutenberg blocks grant us the capability to define text in a number of ways. Text may be defined as a heading, a paragraph, a list, a button, or a number of other text-based blocks. Each of these has a default style that will be applied when viewing these elements on the front-end, but Gutenberg block styles allow us to change that default appearance. Our VERTEX website theme includes a number of additional text styles that can allow us to transform the appearance of a text-based block to suit our needs. Let’s look at a few example use-cases:

Standard use

Standard use of text-based blocks means using a heading as exactly the heading level needed and also using the default appearance for that heading level. The following are the <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> headings in their default appearances.

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5

Heading level 6

disguised use

There may be instances where your SEO demands require you to use a particular heading level, but where your design interests require that the required heading level takes on the appearance of a different element.

In the following examples, all of the following headings are <h2>s, but with different styles applied so that you can deploy your <h2> as needed for SEO purposes but disguise it to fit the design you wish to achieve:

Heading Level 2 (default)

Heading Level 2 (with a ‘pretitle’ style)

Heading Level 2 (with a ‘pretitle big’ style)

Heading Level 2 (with a ‘Title 3’, or heading level 3, style)

Heading Level 2 (with a ‘Title 4’, or heading level 4, style)

Heading Level 2 (with a ‘Title 5’, or heading level 5, style)

Note that we can also flip this disguised use around, so if we want a normal paragraph element to look as though it were a heading level 2, but not appear as a heading in SEO, we can take a normal paragraph block and give that the ‘Title 2’ style. Example:

This is just a paragraph block, but it looks like an <h2> thanks to the ‘Title 2’ style that’s been applied.