The Hidden SEO Risk of Using VH Units

There is a very common but little-known error when Google renders content.

This topic is quite interesting, as in this case the rendering issue is not caused by JavaScript but rather by a matter of CSS.

CSS Units

Broadly speaking, there are absolute units (px, cm, pt, mm) and relative units (em, rem, vw, vh, %).

As the name suggests, absolute units are fixed and do not change depending on other values. They are especially useful when exact sizing control is required.

Meanwhile, relative units are always based on another value, such as the font size of the parent element or the parent element itself. This is particularly useful when you want an element to adapt to different screen sizes — in other words, for responsive or adaptive designs.

In this case, we will focus on one unit that can cause a serious SEO issue and is also widely used: VH.

The VH Nightmare

VH stands for viewport height, meaning that an element set to "x" (a numerical value) VH will have a size equivalent to a percentage of the height of the device's screen.

For instance, if an element has 50vh, its height (or width, depending on what is specified) will be half the height of the screen.

A very common technique is to set the first block of the page to a height of 100vh to create the impact of filling the entire screen. Whether it’s for a slider or design requirements, this setup might look like:

.fullheight {
height: 100vh;
}

On paper, it might seem great. The problem is that when Google takes a Snapshot to understand our content, it uses a rather unorthodox screen. It doesn't scroll and captures a large portion in one go. This can result in what is known as "Thin Content", which might even be treated as a soft 404.

This is what it looks like when you click "View tested page" in Search Console:

In theory, this shouldn't be a problem, but in practice, I have seen several websites improve almost instantly after addressing this issue.

In Search Console snapshots, at most only up to 1750px will be visible

How to Fix the VH Issue

The good news is that the solution is quite simple. Just set a reasonable max-height to avoid this disproportion. You can safely use a max-height of 800px. For example:

.fullheight {
height: 100vh;
max-height: 800px;
}

If VH is deeply integrated into your system and designed for devices such as televisions, you can use a @media query and apply the max-height only when the screen is taller than it is wide:


.fullheight {
height: 100vh;
}
@media only screen and (max-width: 800px) {
.fullheight {
max-height: 800px;
}
}

This way, it will have a height limit without compromising the functionality of the page.

Additional Information

• In addition to absolute and relative units, CSS also includes special units for specifying angles, time or resolution.
• The Calc function can be very useful, as it's a CSS function that allows calculations between different units.
• CSS Values and Units.