--- title: "Cuidado con el VH en el SEO - Carlos Sánchez" description: "Ocupar todo el alto de tu pantalla puede ocasionarte problemas de renderizado" author: "Carlos Sánchez" url: https://carlossanchezdonate.com/articulo/vh-css-rendering/ image: https://carlossanchezdonate.com/wp-content/uploads/tb-css-rendering.jpg --- # El VH de CSS afecta a la renderización Revisar el CSS de tus páginas podrían salvar tu web ![El VH de CSS afecta a la renderización](https://carlossanchezdonate.com/wp-content/uploads/cover-css-rendering.jpg) **Autor:** : [Carlos Sánchez](https://carlossanchezdonate.com/sobre-mi/) **Temática: ** : [Rastreo](https://carlossanchezdonate.com/seo-avanzado/rastreo/) , : [Renderizado](https://carlossanchezdonate.com/seo-avanzado/renderizado/) , : [Tecnologías](https://carlossanchezdonate.com/seo-avanzado/tecnologias/) **Fecha de publicación:** : 2024-03-17 **Última revisión:** : 2026-03-02 **Índice** mostrar 1 Medidas de CSS 2 La pesadilla del VH 3 Cómo solucionar el problema del VH 4 Información adicional Hay un error muy común pero poco conocido de cara a cuando [Google renderiza un contenido](https://carlossanchezdonate.com/articulo/renderizado-en-el-seo/). Es curioso este tema, pues en este caso el problema de [renderizado no se genera por medio de JavaScript](https://carlossanchezdonate.com/articulo/renderizacion-de-javascript-en-el-seo/) sino por una cuestión de [**CSS**](https://carlossanchezdonate.com/articulo/css-posicionamiento-web/#cuidado-con-las-unidades-de-medida-relativas). ## Medidas de CSS A groso modo existen las unidades de **medida absolutas** (px, cm, pt, mm) y las unidades de **medida relativa** (em, rem, **vw**, **vh**, %). Las medidas absolutas, como su nombre indica son fijas y no cambian según otro valor. Son especialmente útiles cuando se desea un control exacto del tamaño. Mientras que las unidades relativas siempre se basarán en otro valor, como el tamaño de letra del elemento padre o el propio elemento padre. Lo cual es especialmente útil cuando se desea que un elemento tenga una medida más adaptable a las circunstancias de distintos tamaños de dispositivos, es decir para diseños responsive o adaptables. En este caso nos centraremos en el que puede producir un problema grave de SEO y que además es de uso bastante extendido, que sería el VH. ## La pesadilla del VH El vh indica el viewport height, que básicamente el elemento al que se le asigne "x"(valor numérico) vh, tendrá el tamaño equivalente al porcentaje de la altura que tiene la pantalla del dispositivo desde el que se está visualizando. Es decir, si un elemento tiene 50vh, tendrá el alto o ancho (según se especifique) equivalente a la mitad del tamaño de la altura de la pantalla. Un **recurso bastante habitual** es designar el primer bloque de la página con un **tamaño de 100vh** para que se genere el impacto de** ocupar toda la pantalla**. Ya sea por un Slider o por cuestiones requeridas de diseño. Esto puede ser una configuración tal que así: `.fullheight { height: 100vh; }` Si quieres encontrar alguna web con estas características, siempre puedes usar un [buscador de código fuente](https://carlossanchezdonate.com/curiosidades/buscador-de-codigo/). Sobre el papel puede parecer genial, el problema es que cuando Google realiza el Snapshot para entender nuestro contenido, lo hace con una pantalla poco ortodoxa. Ya que no hace scroll y captura una gran parte de golpe. Pudiendo convertirse en "**Thin Content**" (contenido poco relevante), que puede llegar incluso a ser considerado como [soft 404](https://carlossanchezdonate.com/articulo/soft-not-found-google/). Este es el aspecto que tiene algo así cuando se le da a "ver página probada" en la Search Console: ![Renderizado de VH al 100% genera problemas](https://carlossanchezdonate.com/wp-content/uploads/renderizado-vh-100.jpg) Se analiza con un tamaño desproporcionado, dando la sensación de que no hay contenido en la mayor parte de la página. Los píxeles que se aprecian son de la propia desproporción de la imagen de background. Sobre el papel **esto no debería afectar**, pero la realidad es que a día de hoy he visto bastantes webs que tienen este problema que en cuanto se le ha puesto solución han mejorado de forma casi instantánea. ** [En las capturas de Search Console, como máximo se verá hasta 1750px](https://carlossanchezdonate.com/curiosidades/donde-corta-el-renderizado-de-search-console/) ![](https://carlossanchezdonate.com/wp-content/uploads/corte.png) ## Cómo solucionar el problema del VH La realidad es que la solución es bastante sencilla. Y es poniéndole un max-height razonable para evitar que ocurra esa desproporción. Se puede pone un max-height de 800px sin problema. Por ejemplo: `.fullheight { height: 100vh; max-height: 800px; }` Si igualmente el vh estaba mega integrado en el sistema y preparados para dispositivos como televisiones, siempre puedes sacar el recurso del @media y poner el máximo cuando la pantalla vaya a ser más alargada que ancha: ` .fullheight { height: 100vh; } @media only screen and (max-width: 800px) { .fullheight { max-height: 800px; } }` De esta forma tendrá un límite de altura sin perjudicar la funcionalidad de la página. ![Solucionar problema thin content renderizado](https://carlossanchezdonate.com/wp-content/uploads/renderizado-max-height-vh.jpg) Resultado censurado por privacidad, pero en el que se puede apreciar que el texto ya resulta visible. ¿No lo estás entendiendo? Si quieres aprender a aplicar todo esto y mucho más, accede a mi formación: [¡Aprende SEO de verdad!](/master-seo-tecnico/) ## Información adicional - Además de las unidades relativas y absolutas, en [CSS](https://carlossanchezdonate.com/articulo/css-posicionamiento-web/) también hay unidades de medida especiales para especificar ángulos, tiempo o resolución. - La función Calc puede resultar super útil, porque es una función de CSS que permite establecer operaciones entre distintas unidades de medida. - [Valores y unidades de CSS.](https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/Values_and_units) Si te gusta este artículo, me ayudarías un montón compartiendo mi contenido: Compartir: [![Compartir en LinkedIn](https://carlossanchezdonate.com/wp-content/themes/sanchezdonate/images/rrss/linkedin.svg)](https://www.linkedin.com/cws/share/?url=https://carlossanchezdonate.com/articulo/vh-css-rendering/) [![Compartir en Twitter](https://carlossanchezdonate.com/wp-content/themes/sanchezdonate/images/rrss/tw.svg)](https://twitter.com/intent/tweet?url=https://carlossanchezdonate.com/articulo/vh-css-rendering/) [![Compartir en Facebook](https://carlossanchezdonate.com/wp-content/themes/sanchezdonate/images/rrss/facebook.svg)](https://www.facebook.com/sharer/sharer.php?u=https://carlossanchezdonate.com/articulo/vh-css-rendering/) [![Compartir en WhatsApp](https://carlossanchezdonate.com/wp-content/themes/sanchezdonate/images/rrss/whatsapp.svg)](whatsapp://send?text=https://carlossanchezdonate.com/articulo/vh-css-rendering/) [![Compartir en Telegram](https://carlossanchezdonate.com/wp-content/themes/sanchezdonate/images/rrss/tlg.svg)](https://telegram.me/share/url?url=https://carlossanchezdonate.com/articulo/vh-css-rendering/) No se te da mal el SEO Técnico Te falta mi máster**. Accede a una formación avanzada que te permitirá aplicar e implementar SEO en cualquier tipo de WEB [¡Accede al Máster de SEO Técnico!](/master-seo-tecnico/) Tal vez te interesen otros artículos: [Artículos de SEO](/seo-avanzado/) [Renderings de JavaScript en el SEO](https://carlossanchezdonate.com/articulo/renderizacion-de-javascript-en-el-seo/) [Sitemaps](https://carlossanchezdonate.com/articulo/sitemaps/) [Curación de enlaces en el SEO](https://carlossanchezdonate.com/articulo/curacion-de-enlaces-en-el-seo/) [Texto alternativo para imágenes](https://carlossanchezdonate.com/articulo/alt-imagenes/) [Rich Snippets con HTML](https://carlossanchezdonate.com/articulo/rich-snippets-sin-datos-estructurados/)