Publicación dinámica: Añade HTTP Vary Header en WordPress

[fusion_builder_container hundred_percent=»no» equal_height_columns=»no» menu_anchor=»» hide_on_mobile=»small-visibility,medium-visibility,large-visibility» class=»» id=»» background_color=»» background_image=»» background_position=»center center» background_repeat=»no-repeat» fade=»no» background_parallax=»none» parallax_speed=»0.3″ video_mp4=»» video_webm=»» video_ogv=»» video_url=»» video_aspect_ratio=»16:9″ video_loop=»yes» video_mute=»yes» overlay_color=»» video_preview_image=»» border_color=»» border_style=»solid» padding_top=»» padding_bottom=»» padding_left=»» padding_right=»» type=»legacy»][fusion_builder_row][fusion_builder_column type=»1_1″ layout=»2_3″ spacing=»» center_content=»no» link=»» target=»_self» min_height=»» hide_on_mobile=»small-visibility,medium-visibility,large-visibility» class=»» id=»» hover_type=»none» border_color=»» border_style=»solid» border_position=»all» border_radius=»» box_shadow=»no» dimension_box_shadow=»» box_shadow_blur=»0″ box_shadow_spread=»0″ box_shadow_color=»» box_shadow_style=»» padding_top=»» padding_right=»» padding_bottom=»» padding_left=»» margin_top=»» margin_bottom=»» background_type=»single» gradient_start_color=»» gradient_end_color=»» gradient_start_position=»0″ gradient_end_position=»100″ gradient_type=»linear» radial_direction=»center center» linear_angle=»180″ background_color=»» background_image=»» background_image_id=»» background_position=»left top» background_repeat=»no-repeat» background_blend_mode=»none» animation_type=»» animation_direction=»left» animation_speed=»0.3″ animation_offset=»» filter_type=»regular» filter_hue=»0″ filter_saturation=»100″ filter_brightness=»100″ filter_contrast=»100″ filter_invert=»0″ filter_sepia=»0″ filter_opacity=»100″ filter_blur=»0″ filter_hue_hover=»0″ filter_saturation_hover=»100″ filter_brightness_hover=»100″ filter_contrast_hover=»100″ filter_invert_hover=»0″ filter_sepia_hover=»0″ filter_opacity_hover=»100″ filter_blur_hover=»0″ last=»false» border_sizes_top=»0″ border_sizes_bottom=»0″ border_sizes_left=»0″ border_sizes_right=»0″ first=»false» spacing_right=»» type=»1_1″][fusion_text]

Llevo trabajando unos días en la forma de mostrar diferentes plantillas en WordPress; una para versión desktop y otra para versión mobile y así optimizar los pesos de página del sitio web y mejorar su tiempo de descarga. Después de un tiempo haciendo pruebas surgió la necesidad de introducir la cabecera HTTP Vary para indicar a Google que estoy mostrando diferente contenido en la misma URL y evitar ser penalizado por cloacking. Así nace este artículo donde me gustaría compartir lo sencillo que es introducir HTTP Vary en WordPress.

¿Qué es la publicación dinámica o dynamic serving?

Según Google: La publicación dinámica es una configuración en la que se envía una respuesta desde el servidor con varios códigos HTML (y CSS) en la mismas URL según el agente de usuario usado en la solicitud de la página.

Omitiendo la respuesta técnica que Google nos ofrece, una publicación dinámico o dynamic servering es mostrar al usuario diferentes plantillas o themes de tu web según el agente de usuario desde donde está realizando la solicitud al servidor, básicamente es mostrar diferente contenido dependiendo de la aplicación informática que se conecta a la web; que puede ser desde un navegador desktop, un navegador móvil, web crawlers, teléfonos móviles, lectores de pantalla e incluso navegadores Braille.

Usando HTTP Vary para no ser penalizados

Google entiende por una práctica blackhat o penalizable mostrar contenido diferente a los humanos y/o motores de búsqueda, por eso es importante introducir la variable HTTP Vary en las cabeceras de la solicituda HTTP y evitar ser penalizado por cloacking. Os dejo un enlace a la ayuda de Google donde ellos lo llaman encubrimiento.

Añadiendo HTTP Vary Header en WordPress

Sin entrar en cuestiones técnicas de implicaciones y utilidades, os enumero los pasos para tunear tu WordPress y evitar ser penalizado por Google usando el user agent de turno:

1. Configura tu WordPress para que ofrezca diferentes plantillas dependiendo de donde se conecte el usuario. Esto es cosa tuya.
2. Haz una copia de seguridad de todos los archivos de tu WordPress 😉
3. Descarga el archivo functions.php
4. Introduce el siguiente código al principio del documente después de la etiqueta <?php
5. function add_vary_header($headers) {
$headers['Vary'] = 'User-Agent';
return $headers;
}
add_filter('wp_headers', 'add_vary_header');

6. Realiza el punto 4 y 5 en los dos archivos functions.php de las dos plantillas.
7. Vuelve a subir los archivos del servidor.

¡Listo! Con esto tendrás en la cabeceras de la solicitud tu HTTP Vary para que Google te quiera y te adore por muchos años. Os dejo unas capturitas de pantalla con la evidencia de los hechos.

Ejemplos

ANTES:

DESPUÉS:

[/fusion_text][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]