Cómo desactivar el responsive automático de imágenes de WordPress

Desde la versión 4.4 WordPress añade automáticamente el atributo

srcset

a las imágenes de tu contenido.

El atributo

srcset

te permite definir diferentes imágenes para usar en diferentes puntos de ruptura del navegador, y así ofrecer distintas imágenes según el dispositivo.

Ejemplo:

Los atributos

srcset

sizes

contienen la información que le indica al navegador qué tamaño de imagen es mejor para cada tamaño (punto de ruptura, o viewport) del dispositivo desde el que se visite la página.

Una explicación en detalle:

  • scrset:  Si el ancho de la imagen es de 300px o menos entonces el navegador cargará y mostrará image-300×188.jpg, si es de más de 300px pero menos de 700px — image-700×600.jpg, etc.
  • sizes: Ancho máximo de la imagen para la media query dada, es como una declaración
    if

    en la que si el viewport es de 709px o menos, el ancho máximo de la imagen es el 85% del viewport, si ninguno de los argumentos se cumple entonces el ancho de la imagen será de 840px.

¿Cómo funciona el atributo srcset de WordPress?

WordPress utiliza

the_content

para añadir los atributos de adaptabilidad a las imágenes que hayas subido:

  • Si tu imagen tiene una clase
    wp-image-{ATTACHMENT_ID}

    .

  • Si tu imagen no tiene ya un atributo
    scrset

    .

Entonces ¿cuál es el problema? ¿No es mejor que sean responsive?

El problema aparece cuando usas una CDN del tipo Amazon S3 o Jetpack Photon para entregar tus imágenes, y entonces resulta que tienes unas URLs de imágenes alojadas en tu CDN y los atributos srcset de sus copias en tu alojamiento.

Entonces esas imágenes de tu servidor funcionarán en dispositivos móviles pero no en tamaños de ordenador de escritorio.

No es mi caso ¿hay más motivos para desactivar el responsive automático de imágenes de WordPress?

Pues claro, yo no soy anti-responsive, aquí tienes unas cuantas razones por las que podrías querer desactivar el responsive automático de imágenes de WordPress:

  • No todos los sitios quieren o necesitan imágenes responsive.
  • No todos los usuarios quieren o necesitan que WordPress lo haga todo por ellos.
  • Porque las soluciones generalizadas no se adaptan al 100% de usuarios y posibles escenarios.
  • Porque hay muchas maneras diferentes de entregar imágenes responsive.
  • Porque el método de WordPress no funciona en todas las situaciones.
  • Porque hay usuarios que prefieren implementar sus propias soluciones responsive.
  • Porque el método de WordPress genera tamaños adicionales de imagen para cada imagen subida, lo que consume espacio y recursos.

¿Cómo desactivo el responsive automático de WordPress en ciertas imágenes?

Puedes hacerlo con el gancho WordPress en

wp_calculate_image_srcset

.

Este filtro te ofrece 5 argumentos:

  • $sources Uno o más arrays datos de origen a incluir en
    srcset
  • $size_array Array de los valores de anchura y altura en píxeles (en ese orden).
  • $image_src El origen de la imagen.
  • $image_meta Los metadatos de la imagen devueltos por
    wp_get_attachment_metadata()
  • $attachment_id El
    post_id

    de la imagen

Aquí tienes un código de ejemplo que puedes usar en el archivo

function.php

de tu tema o en un plugin personal para adaptarlo a tu necesidad:

add_filter( 'wp_calculate_image_srcset', 'my_custom_image_srcset', 10, 5);
function my_custom_image_srcset($sources, $size_array, $image_src, $image_meta, $attachment_id) {
    // El siguiente código es una adaptación de wp-includes/media.php:1061-1180
    $image_sizes = $image_meta['sizes'];
    // Obtenemos ancho y alto de la imagen.
    $image_width = (int) $size_array[0];
    $image_height = (int) $size_array[1];
    $image_basename = wp_basename( $image_meta['file'] );
    /*
*Para evitar errores raros en WP con los gifs animados
     */
    if ( ! isset( $image_sizes['thumbnail']['mime-type'] ) || 'image/gif' !== $image_sizes['thumbnail']['mime-type'] ) {
        $image_sizes[] = array(
            'width'  => $image_meta['width'],
            'height' => $image_meta['height'],
            'file'   => $image_basename,
        );
    } elseif ( strpos( $image_src, $image_meta['file'] ) ) {
        return false;
    }
    // Recuperamos el subditectorio de subidas a partir de la imagen completa.
    $dirname = _wp_get_attachment_relative_path( $image_meta['file'] );
    if ( $dirname ) {
        $dirname = trailingslashit( $dirname );
    }
    $upload_dir = wp_get_upload_dir();
    $image_baseurl = trailingslashit( $upload_dir['baseurl'] ) . $dirname;
    /*
     * Mejor si es HTTPS
     */
    if ( is_ssl() && 'https' !== substr( $image_baseurl, 0, 5 ) && parse_url( $image_baseurl, PHP_URL_HOST ) === $_SERVER['HTTP_HOST'] ) {
        $image_baseurl = set_url_scheme( $image_baseurl, 'https' );
    }
    /*
     * Filtramos imágenes que sean residuos de versiones anteriores.
     */
    $image_edited = preg_match( '/-e[0-9]{13}/', wp_basename( $image_src ), $image_edit_hash );
    /**
     * Filtramos el ancho máximo a incluir en el atributo srcset.
     * @since 4.4.0
     * @param int   $max_width  El ancho máximo de imagen a incluir srcset. Por defecto es '1600'.
     * @param array $size_array Array de valores de ancho y alto en píxeles (en ese orden).
     */
    $max_srcset_image_width = apply_filters( 'max_srcset_image_width', 1600, $size_array );
    // Array para mantener las URLs.
    $sources = array();
    /**
     * Prevención de errores.
     */
    $src_matched = false;
    /*
     * Loop de las imágenes disponibles. Solo usa imágenes que sean versiones redimensionadas
     */
    foreach ( $image_sizes as $identifier => $image ) {
        // Seguimos si no hace falta el identificador
        if ($identifier === 'unwanted-identifier') {
            continue;
        }
        $is_src = false;
        // Comprobamos que los datos meta de la imagen no estén corruptos.
        if ( ! is_array( $image ) ) {
            continue;
        }
        // Confirmamos que el nombre de archivo sea parte del src.
        if ( ! $src_matched && false !== strpos( $image_src, $dirname . $image['file'] ) ) {
            $src_matched = $is_src = true;
        }
        // Filtramos imágenes de anteriores modifiaciones.
        if ( $image_edited && ! strpos( $image['file'], $image_edit_hash[0] ) ) {
            continue;
        }
        /*
         * Filtramos imágenes del mismo ancho que '$max_srcset_image_width' salvo que
         * el archivo esté en el atributo 'src'.
         */
        if ( $max_srcset_image_width && $image['width'] > $max_srcset_image_width && ! $is_src ) {
            continue;
        }
        // Si las dimensiones de la imagen están dentro del tamaño esperado en más menos 1px la usamos.
        if ( wp_image_matches_ratio( $image_width, $image_height, $image['width'], $image['height'] ) ) {
            // Añadimos URL, descriptor y valor al array de orígenes a devolver.
            $source = array(
                'url'        => $image_baseurl . $image['file'],
                'descriptor' => 'w',
                'value'      => $image['width'],
            );
            // El 'src' de la imagen tiene que ser el primero en el 'srcset' debido a un fallo en iOS8.
            if ( $is_src ) {
                $sources = array( $image['width'] => $source ) + $sources;
            } else {
                $sources[ $image['width'] ] = $source;
            }
        }
    }
    return $sources;
}

¿Cómo desactivo completamente el responsive automático de WordPress?

Si tienes claro que no quieres el responsive automático de imágenes de WordPress, del todo, simplemente añade esto a tu plugin personal o al archivo functions.php del tema:

remove_filter( 'the_content', 'wp_make_content_images_responsive' );

¿No hay algún plugin majete para desactivar esto?

Claro, siempre, en este caso se llama Disable Responsive Images Complete. Una vez instalado y activo (no hay opciones) hace esto:

  • Desactiva las imágenes responsive en la parte visible de la web.
  • Desactiva la creación del tamaño de imagen 
    medium_large

    de 768px

  • Totalmente listo para funcionar, sin tener que configurar nada.

A partir de aquí tú tienes la libertad, y responsabilidad, de aplicar el método de adaptación a dispositivos (responsive) que consideres más efectivo en tu caso, sin que WordPress lo haga por ti.

La entrada Cómo desactivar el responsive automático de imágenes de WordPress la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.

WordPress es la plataforma más odiada (el desenlace) – Crónicas WordPress Intensas #20

Si ya viste la primera parte de dos crónicas WordPress intensas en las que analizaba si WordPress es la plataforma más odiada ahora es momento de hacerlo, justo antes de ver este vídeo, que es el desenlace de la anterior (no dura mucho, menos de 10 minutos).

¿Ya la has visto? Pues adelante con este vídeo, que es el desenlace, con sorpresa, making off y hasta tomas falsas. Espero que te guste…

Si prefieres simplemente  escuchar las Crónicas WordPress intensas como podcast puedes suscribirte en Anchor.fmSpotifyGoogle Podcasts o Apple Podcasts.

La entrada WordPress es la plataforma más odiada (el desenlace) – Crónicas WordPress Intensas #20 la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.

EditorsKit – Lo que ya debería tener el editor de bloques

Si echas en falta algo en el editor de bloques de WordPress es posible que se vaya incorporando poco a poco, pues recuerda que el lanzamiento del proyecto Gutenberg no fue precisamente un alarde de previsión.

Pero si ya quieres ver algunas de las funcionalidades que ya debería tener el editor de bloques de WordPress, y que seguramente pronto las tendrá, no esperes más, te presento EditorsKit, un plugin gratuito realmente chulo, que hace que el editor de bloques sea bastante más práctico de lo que es actualmente.

Pero no tienes que seguir leyendo, te lo muestro en el siguiente vídeo…

La entrada EditorsKit – Lo que ya debería tener el editor de bloques la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.

¿Qué pasa si activo el contenido esencial de Yoast SEO?

Una de las herramientas más potentes del plugin Yoast SEO es la de contenido esencial o cornerstone, y curiosamente muy poca gente sabe utilizarla y aprovechar su potencial.

De hecho me he encontrado alumnos que pensaban que solo con activara la casilla de contenido esencial en una entrada o página, solo con eso, ese contenido iba a posicionar mejor de manera mágica.

Pues no, no se trata de eso. De hecho ninguna herramienta de Yoast SEO ni de ningún otro plugin de SEO va a mejorar tu SEO por arte de magia.

Entonces ¿para qué sirve la herramienta de contenido esencial de Yoast SEO?

Para empezar, ¿qué es el contenido esencial?

El denominado contenido esencial, o cornerstone en inglés, es una estrategia de SEO de contenidos mediante la que destacas aquellos contenidos de tu web que se han demostrado esenciales para los buscadores y tu audiencia.

Y no decides tú cuáles son tus contenidos esenciales, son los usuarios los que lo deciden.

Se podría resumir en que contenido esencial es ese contenido por el que eres útil para Internet.

Si quieres conocer más acerca de la importancia del contenido esencial y cómo determinar tus contenidos esenciales te recomiendo estos 2 artículos dónde lo expliqué amplia y detalladamente:

¿Qué pasa cuando marco un contenido como esencial?

Cuando, tras revisar los artículos que te he recomendado leer, decides marcar  un contenido de tu web como esencial pasa inicialmente lo que puedes ver en la siguiente captura animada…

Si te fijas bien, antes de marcar el contenido como esencial el análisis SEO se mostraba en color naranja y el análisis de legibilidad en verde.

Y, tras marcar el contenido como esencial el análisis SEO cambia a rojo y el de legibilidad a naranja.

¿Por qué pasa esto? ¿ha empeorado mi texto solo por marcar la casilla?

¿Qué cambia en el análisis de Yoast cuando marcas un contenido como esencial?

Ese cambio visible tan aparente en los análisis de tu contenido son debidos a que, cuando activas la casilla de contenido esencial el motor de análisis SEO y de legibilidad de Yoast entran en el modo de análisis de contenido esencial, más exigente con tu contenido de lo habitual con el análisis estándar.

Los cambios que incorpora el análisis SEO y de legibilidad de contenido esencial de Yoast te van a exigir que tengas perfectas las siguientes comprobaciones:

Cambios en el análisis SEO (6)

  1. Tu artículo debe tener al menos 900 palabras en vez de 300.
  2. Frase clave en el slug.
  3. Title con la longitud perfecta (ni muy corta ni tan larga que no se vea en móvil o escritorio)
  4. Meta description con la longitud perfecta (ni muy corta ni tan larga que no se vea en móvil o escritorio)
  5. Debe haber enlaces salientes.
  6. Las imágenes deben tener etiquetas ALT con la frase clave.

El cambio más relevante es el relativo a la longitud del artículo, pues parece obvio que si tu artículo es esencial en alguna temática deberá tener una extensión suficiente como para cubrir todo un asunto de manera relativamente amplia.

A partir de ahí, todos los aspectos de mejora de SEO de contenidos, no solo los que cambian, deben mejorar, siendo tú ya consciente de que tu artículo debe ser contenido esencial, debe ser perfecto ¿no?

Cambios en el análisis de legibilidad (2)

  1. Tener suficientes subtítulos.
  2. Frases más cortas.

Esto es debido a que, como los contenidos esenciales suelen tender a ser más largos, son más arduos de leer, así que debes facilitar su lectura estructurándolos de manera que haya más subtítulos que separen el artículo completo y usando frases cortas, fáciles de asimilar en su contexto.

¿Ya está? ¿No tengo que hacer más?

Ni por asomo. Acabas de empezar.

Un contenido esencial debe tener algunas características «esenciales»:

  • Debe ser contenido perenne (evergreen como les gusta decir a los marketeros)
  • Debe estar siempre actualizado.
  • Debe mejorarse incorporando más y mejor información.
  • Debe adaptarse a los usos de lectura y algoritmos de SEO.

¿Me ayuda Yoast SEO a mantener y mejorar mi contenido esencial?

¡Acertaste!

También te ayuda Yoast a que hagas que tus contenidos esenciales lo sigan siendo.

Y para ayudarte ofrece algunas herramientas que igual no habías descubierto hasta ahora.

Lista de contenidos esenciales

A partir de que marques tu primer contenido como esencial, en los listados de entradas, páginas y cualquier otro tipo de contenido registrado, tendrás un nuevo modo de filtrar tus contenidos, por contenido esencial.

Una vez en el listado de contenidos esenciales puedes hacer clic en cada una de las cabeceras que le añade Yoast SEO a estas pantallas para:

  1. Verificar el estado de SEO y legibilidad de tus contenidos esenciales.
  2. Editar aquellos contenidos esenciales susceptibles de mejora en alguno de los elementos de análisis.

Porque no tendría sentido establecer un contenido como esencial y que no estuviese perfectamente optimizado ¿verdad?

Así que, ayudándote de las columnas que incorpora Yoast SEO, revisa si cada contenido esencial tiene:

  1. Enlaces salientes: Simplemente porque es lógico, ya sean propios o de otra web (sin pasarse y determinando en cada caso si deben ser follow o nofollow/sponsored/ugc).
  2. Enlaces entrantes suficientes desde otros contenidos de tu web: No tendría sentido que otras entradas y páginas de tu web no enlacen siempre que sea relevante a tus contenidos esenciales ¿no?
  3. Análisis SEO perfecto (verde): Revísalo de vez en cuando porque el plugin Yoast SEO se actualiza para contemplar los cambiantes algoritmos de Google (principalmente).
  4. Análisis de legibilidad perfecto (verde): No está de más editar tus contenidos esenciales de vez en cuando para mejorar los subtítulos, añadir contenido multimedia relevante, mejorar frases y párrafos, incluso hacer que tus textos sean más fáciles de entender y leer.
  5. Título SEO: Revísalo de vez en cuando pues Google cambia cada cierto tiempo la longitud del snippet.
  6. Meta Description: Igual que con el título SEO.

Lista de contenidos esenciales anticuados

Mira tú por dónde, no deberías necesitar este listado por el que Yoast SEO te permite filtrar tus contenidos esenciales, pero ahí estará si no me has hecho caso en todo lo que he escrito anteriormente.

Así que si no eres concienzudo, si no actualizas alguno de tus contenidos esenciales en un periodo de 6 meses verás alguno de tus contenidos esenciales en el nuevo listado desde el que filtrar tu contenido esencial anticuado.

¿Merece la pena tanto esfuerzo?

¡Definitivamente sí!

El hecho de trabajar la estrategia de contenido esencial te hará mejor redactor web y mejorará tus capacidades de redactor SEO, además de ayudarte a optimizar el SEO de tus contenidos.

La táctica de contenido esencial no es algo nuevo, pero se agradece que Yoast SEO haya introducido herramientas tan prácticas para ayudarnos a que forme parte de nuestra estrategia de posicionamiento de contenidos global.

La entrada ¿Qué pasa si activo el contenido esencial de Yoast SEO? la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.

Publica automáticamente desde WordPress en Google My Business

La nueva funcionalidad de publicaciones en Google My Business es una excelente forma de mejorar la presencia de tu empresa local o la de tus clientes en Google.

Y sí, puedes ir a Google My Business, entrar en una propiedad y crear una publicación…

Sin embargo, puede ser una molestia tener que acceder a Google My Business cada vez que quieras crear una nueva publicación, además de que tienes que andar acordándote de hacerlo, y ya sabemos que en un negocio local el tiempo nunca sobra.

Si quieres aprovechar los beneficios de SEO, pero sobre todo de negocio y ventas, y ahorrar tiempo creando publicaciones en Google My Business directamente desde el escritorio de WordPress ¡ya puedes hacerlo!

De nuevo tenemos un maravilloso plugin gratuito que vienen a nuestro rescate:

Vamos a ver su funcionamiento, que ya te anticipo es muy sencillo.

Publica en Google My Business desde tu web

El plugin, como también el otro, utiliza la API oficial de Google My Business con autenticación segura oAuth para garantizar la seguridad de tu cuenta de Google.

Para ello, nada más activarlo te lleva automáticamente a la página en la que tendrás que autorizar a tu cuenta de Google las publicaciones en tu nombre, como tantos otros servicios.

Haces clic en «Permitir y continuar» y te lleva a la página de conexión y ajustes.

Aquí simplemente pulsas el botón de «Conectar a Google My Business». Las siguientes pantallas son las típicas de autorización de Google, así que ya sabes como son.

Cuando vuelves al escritorio tras las consabidas autorizaciones ya estarás conectado y solo queda, si quieres, marcar una propiedad por defecto para las publicaciones, entre las que tengas activas en la cuenta autorizada.

Ahora pásate por la pestaña donde configurar la publicación automática.

Aquí puedes personalizar mediante variables y sintaxis la plantilla de las nuevas publicaciones. Si no te quieres complicar deja la que está por defecto, más que suficiente.

También es interesante que elijas el tipo de llamada a la acción de tu publicación, el estilo. Tienes a elegir entre:

  • Sin botón
  • Reservar
  • Realizar pedido
  • Comprar
  • Más información
  • Registro
  • Obtener oferta
  • Llamar ahora

Para finalizar, tienes una casilla que, si la activas, por defecto se publicarán todas tus entradas en tu negocio local de Google My Business, algo que no te recomiendo, pues es mejor decidir cuáles deben publicarse y cuáles no.

Hecho esto ya has configurado el plugin.

A partir de este momento en el editor de WordPress tendrás una caja nueva para publicar en Google My Business.

Ahora, tras crear tu contenido, solo tienes que hacer clic en el botón «+ Nueva publicación» y se desplegará una multitud de opciones para tu publicación en Google My Business…

Antes de nada puedes decidir si se publicará automáticamente al publicar tu entrada, si no lo marcaste ya en los ajustes.

Si eliges esta opción no hay nada más que hacer, se lanzará la publicación automáticamente a Google My Business cuando publiques la entrada.

Y además, tienes montones de ajustes para tu publicación:

  • Imagen o vídeo asociado.
  • El texto, que puede ser distinto del de tu entrada.
  • Añadir un botón de:
    • Reserva
    • Realizar pedido
    • Comprar
    • Más información
    • Registro
    • Obtener oferta
    • Llamar (usa el teléfono de tu negocio en GMB)
  • Puedes añadir una URL personalizada al botón.

Y ya está ¿te parece poco?

Pues hay más…

Resulta que no tienes solo esto, también puedes acceder a las publicaciones anteriores, que aparecerán en una lista bajo la caja de publicación en GMB y …

  • Verlas en Google My Business
  • Editarlas
  • Volver a publicarlas con los cambios

Y todo esto en la versión gratis. Con la versión premium además puedes programar publicaciones y crear publicaciones de tipo eventos, ofertas y productos.

Como habrás visto ¡una joya de plugin!

La entrada Publica automáticamente desde WordPress en Google My Business la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.