He decidido documentar esta situación por varios motivos. El primero y más obvio, es que me ha tocado lidiar con esta situación con un cliente de otro cliente. Y el segundo, es que hay poca información al respecto y los artículos que he encontrado son bastante superficiales.

La mayoría se centran en las alternativas a la plataforma Vimeo. Es decir, lo resuelven animándote a cambiar de plataforma.

Es la solución lógica, pero que no resuelve el problema de raiz.

A este fenómeno lo llamo "el síndrome de los teleoperadores" y funciona más o menos así:

— Don David, le informo que vamos a subirle 20€ la cuota mensual de la fibra que tiene contratada.

— ¡No me jodas! ¿A cuento de qué? ¿Me vas a mejorar la velocidad?

— Lo lamento, pero no. Es una subida general de precios.

...

¿Qué hacemos ante estas situaciones? (Aparte de homenajear a toda la familia del que fundó la empresa)

Cambiar de compañía

Y beneficiarnos de otros 12 meses más iniciales de precio especial.

¿Da palo? Mucho

Cambiar el proveedor es una opción, pero no la única.

En este artículo os cuento algunas de las mejores alternativas a Vimeo y otras opciones más beneficiosas para tu bolsillo para resolver esta situación. Doy por hecho de que si estás aquí es que tienes una membresía con muchos vídeos, así que atiende que te interesa.

Avisos por email y bloqueo de tu cuenta

Vimeo te habrá notificado con un maravilloso correo que contiene este título:

Attention! Your Vimeo account may be deactivated

Si lo ignoras, te seguirán enviando emails cada día con advertencias, hasta que se te notifica el día del bloqueo de cuenta. Cuando llega la fecha, tus videos dejan de funcionar.

Así de claro.

El motivo de suspensión es muy simple: tu cuenta consume de media más ancho de banda que el 99% de los usuarios de Vimeo. ¡Estás dentro del selecto grupo del 1%!

Te felicitaría, si no fuera que es más bien una putada.

¿Qué es el ancho de banda?

No voy a aburrirte explicándote que es el ancho de banda, así que te haré un resumen rápido.

Vimeo tiene en cuenta dos grandes factores:

1. El espacio que ocupan tus vídeos en sus servidores
2. La cantidad de datos consumidos cada vez que alguien le da al play

Con estas dos variables determinan sus planes de precios, con un límite mensual y anual.

Con esto sobre la mesa, tú haces tus cálculos básicos y decides el plan que más se ajusta al volumen de vídeos que vas a subir mensualmente o anualmente.

¿No te has dado cuenta?

El límite de ancho de banda no figura.

Perdón, sí figura, pero en la letra pequeña.

Ancho de banda ilimitado (sujeto a uso legítimo)

Si nos vamos al final de la página, nos encontramos con este párrafo:

¿Los planes de autoservicio de Vimeo tienen un límite de ancho de banda?

Por lo general, no limitamos el consumo de ancho de banda ni imponemos cargos adicionales por él en las cuentas de autoservicio (es decir, los datos que se usan para ofrecer los videos a tus espectadores). Sin embargo, esta política está sujeta al uso legítimo: si tu uso total de ancho de banda en todas las cuentas que controlas es mayor que el del 99 % de los usuarios de autoservicio de nuestra plataforma en cualquier mes calendario (actualmente, cerca de 2 TB por mes), podríamos comunicarnos contigo para ofrecerte un plan más acorde a tus necesidades. La mayoría de las cuentas de Vimeo nunca alcanzan ese umbral.

Efectivamente, un plan de 6.000 euros 🙂

El ancho de banda no parece ser un problema, pero puede llegar a serlo para las membresías. La reproducción de vídeos es un devorador de recursos. Muchos usuarios se quedan sin datos 4G en su teléfono móvil por pasar horas escuchando música a través de YouTube (y no Spotify).

La diferencia en megabytes es abismal.

¿Entonces qué debes hacer? Lo primero, es revisar los datos de consumo...

¿Cómo saber el ancho de banda que consumo en Vimeo?

1. Accede a tu cuenta
2. Selecciona tu perfil
3. Pestaña análisis
4. Ver informe (esquina inferior derecha)

Aquí puedes ver el volumen de datos mensual y anual.

Si consumes más de 2TB (2.000 Gigabytes) al mes, tarde o temprano Vimeo te enviará el email de los 6K€ anuales.

Cantidad de vídeos VS reproducciones

Si tienes una membresía estarás en una de estas dos situaciones. Ambas pueden hacer que llegues fácilmente a estos 2TB de consumo mensual.

• Pocos vídeos publicados, muchas reproducciones
• Muchos vídeos publicados, pocas reproducciones

¿Qué hago para resolver la situación?

Si la plataforma de video ya se ha puesto en contacto contigo es que has superado varias veces el límite mensual. Es importante saber que si puntualmente superas el umbral de los 2TB mensuales, seguramente Vimeo no te contacte. Pero si esto pasa de manera regular... más pronto que tarde te invitarán a pasar por caja con un plan "a medida".

Veamos que puedes hacer.

Opción 1 - Tener dos cuentas de Vimeo

Y pagar dos cuotas mensuales, sí.

Pero juntas no llegarán (ni de lejos) a los 500€ mensuales que te pide Vimeo.

La transición es fácil. Si vas muy pasado con el volumen de datos mensual, lo mejor será borrar algunos videos de tu cuenta vieja y pasarlos a la nueva. Hecho esto, solo tienes que modificar los enlaces a los videos en tu membresía.

En caso de que estés a poco de llegar al límite, empieza a subir el contenido nuevo a tu cuenta secundaria y ve controlando el volumen de datos de la principal.

Opción 2 - Cambiar a YouTube u otras plataformas de video

La opción que menos me convence, básicamente por varios motivos.

• Vimeo es una de las mejores plataformas a nivel tecnológico que existen
• Las alternativas de pago también tienen ancho de banda limitado
• YouTube no tiene límite, pero tiene limitaciones técnicas en cuanto a privacidad

Opción 5 - Contratar una plataforma todo en uno

Cada vez más existen plataformas que te lo dan todo bajo una misma cuota mensual:

• Alojamiento de vídeo limitando (en número, peso y ancho de banda)
• Gestión de clientes
• Facturación recurrente vía Stripe
• Zona de atención al cliente
• Email marketing
• Analítica
• Soporte técnico

Es lo más parecido a un viaje a la Rivera Maya con pulsera de todo incluido. A medida que tus necesidades crecen, también lo hace la cuota mensual.

Las más populares son Kartra y Kajabi, pero hay muchas más.

¿Inconvenientes?

1. El coste mensual puede llegar a ser muy alto (hasta 500€)
2. Cedes todo el control de tu negocio a un tercero

El primer punto no es preocupante, ya que las cuotas suben en función del nº de usuarios que tienes. Y en una membresía, más usuarios = más dinero. No te importará pagar más si ganas más.

Pero el punto dos, el tener todo el negocio en manos un tercero... eso me inquieta.

Con el binomio WordPress + Vimeo + Stripe, tienes un mayor control del negocio, pero los problemas técnicos y el tiempo consumido en gestiones es mucho mayor.

No existe la solución perfecta

Veamos más opciones.

Opción 4 - Dejar de subir contenido o eliminar el antiguo

Y ahora pensarás...

¡Pero cómo voy a dejar de subir contenido! ¿Estás loco?

Quizá, pero deja que me explique.

Si revisas la analítica de tus videos quizá identifiques oportunidades de mejora.

Ejemplos.

Videos con pocas o nulas reproducciones

En función del tipo de membresía que tengas, es posible que alguno de tus videos tenga muy pocas visualizaciones o ninguna. Si el contenido no es relevante y no forma parte de una secuencia de vídeos, podrías considerar eliminarlo.

Pero ojo, eso solo aligerará el peso total de tus videos. Apenas se notará en el ancho de banda.

Eliminar videos antiguos y subir de nuevos

Los puedes tener en tu disco duro, pero no tienen porqué estar en la plataforma de streaming.

¿Nadie los echará de menos porque hay contenido de sobra?

Elimínalo.

Muchas membresías son mensuales, y a pesar de que eliminar un video que tiene reproducciones pueda parecer un suicidio, los nuevos usuarios (incluso los actuales) pueden no darle importancia. Y tú seguirás ingresando tus dineros cada mes.

Ojo, esto solo aplica donde los videos no forman parte de una cadena de contenido. Si tus videos son consecutivos porque forman parte de un curso de formación, no lo hagas.

Opción 5 - Subir los videos a una resolución inferior

Si estás grabando el contenido en resoluciones muy altas (2K o 4K) deberías replantearte si es necesario. En la gran mayoría de casos, con el formato Full HD es suficiente.

Veamos un ejemplo.

Si en estos videos muestras tu pantalla y tienes muchos elementos de texto, la resolución extra puede ayudar (como podría ser una academia para aprender a programar).

En cambio, alguien que en su membresía enseña a hablar en público, la calidad del audio sea un aspecto más relevante que no la resolución.

Y por último... ¿Desde qué dispositivo se reproducen tus videos?

• Smartphones o tablets
• Televisores
• Pantallas de ordenador

El ojo humano no aprecia la diferencia entre Full HD y 4K en la mayoría de casos. La distancia entre la pantalla y nuestros ojos, el tamaño de pantalla y la densidad de píxeles influyen en esto.

Ya no tienes nada más que aportar

Opción 6 - Subir tus precios

Empezaste tu membresía con 15 videos y cobrando 10€ al mes. Tus gastos de mantenimiento eran bajos (Vimeo, plataforma de email marketing, programa de facturación...)

Han pasado dos años, y ahora...

• Tus ingresos han crecido
• Tus gastos se han multiplicado por 4
• Tus tarifas siguen siendo las mismas

Algo no cuadra.

Tienes mucho más contenido que al inicio y estás ofreciendo más valor... por el mismo precio.

Toca subir tarifas, como mínimo, a los nuevos miembros.

Conclusión y reflexión final

Como te decía en la introducción, esta situación hay que abordarla desde un punto de vista más estratégico. Es cuestión de tiempo que todos los operadores empiecen a cobrar por el ancho de banda.

El motivo es muy simple: el precio de la energía.

Los vídeos requieren más cantidad de datos entrando y saliendo de los servidores, y eso aumenta el consumo de energía. También es cierto que los servidores son cada vez más eficientes, y los compresores de vídeo nos permiten disfrutar del mismo contenido con un peso menor.

Subir contenido a internet no es gratis. Tiene un coste energético y medioambiental cada vez mayor, y las empresas empiezan a hacer pagar por ello.

...

Por cierto.

Si tienes la tentación de escribir un email bien gordo y largo contándome tu situación al detalle, no lo hagas. Ahórratelo. Te doy una opción mejor.

1. Te apuntas a la newsletter
2. Me contestas cualquiera de los emails
3. Me escribes cuatro líneas sobre tu situación
4. Le ponemos precio y lo discutimos.

Superfácil. Aquí abajo.

Conocido como Japanese keywords hack o ataque de SEO negativo japonés. Este malware spam basado en estrategias Blackhat SEO está afectando a miles de sitios web. Muchos usuarios están reportando al foro de Google capturas de pantalla de sus páginas. El título y la metadescripción aparece con caracteres en japoneses.

Descubrí este ataque a través de un cliente. Tenía el encargo de renovar su página web, y durante la auditoría off-page descubrí más de 190 direcciones tóxicas. ¿Motivos? Su antigua plataforma CMS no estaba actualizada.

Hoy veremos como solucionar el ataque de spam japonés paso a paso y cómo reforzar nuestra seguridad en WordPress.

¿Por qué mi WordPress ha sido víctima de un ataque de spam?

Puede ser por muchos motivos. Las plataformas más afectadas por este ataque de spam han sido WordPress, Drupal, Joomla! y Magento. ¿Sorprendido? Los tres CMS más utilizados en internet para la creación de contenidos. Aunque son sistemas muy seguros, la falta de mantenimiento de estos sitios genera peligrosas vulnerabilidades.

Estas páginas de SPAM basadas en SEO Blackhat se autogeneran y contienen enlaces de afiliación a tiendas que venden productos de marca falsificado. Los hackers generan ingresos pasivos gracias a estos enlaces salientes insertados en tu página. Es un "linkbuilding" a gran escala para incrementar visitas.

Uno de los grandes motivos es la falta de actualizaciones. Estos agujeros son "puertas traseras" por las cuales los crackers inyectan los códigos maliciosos. No es solo un problema de SEO, no basta con limpiar las SERPs de Google. Debemos desinfectar nuestra web y cerrar las puertas para evitar una réplica.

¿Cómo saber si estoy infectado por Spam Japonés?

Existen varios métodos para verificar si tu sitio web ha sido infectado.

#1 Ejecuta el comando site: en los buscadores

Accede a Google.com a través de tu navegador y escribe

site:[URL de tu web]

Con esta instrucción, Google te mostrará todas las URL's indexadas de tu dominio. Revisa los resultados en búsqueda de alguna dirección sospechosa que tu no hayas generado. Si has sido atacado por spam japonés, lo verás rápidamente. Tanto el título como la meta descripción quedan afectados y aparecen textos en japonés.

Repite la prueba en otros buscadores como Bing o Yahoo. Son menos populares, pero también indexan páginas. Si has sido hackeado, hay posibilidades de réplica.

#2 Accede a Google Search Console y revisa las alertas de seguridad

A través de la pestaña Seguridad y Acciones Manuales podrás verificar si existe alguna alerta por parte de Google. Si la hay, te mostrará las URL's infectadas.

#3 Revisión manual de las URL's

Si accedes a una página afectada, probablemente de devuelva un error 404 o no encontrado. ¿Significa que estoy a salvo? Para nada.

El cloacking (ocultación) es una técnica black hat SEO ? muy común, basada en mostrar un resultado u otro en función de quién la visita (usuario o google bot). Lógicamente es una práctica penalizada por Google ya que su objetivo es manipular los resultados de búsqueda.

Para verificar las páginas, accede a la pestaña Inspección de URL's en Google Search Console, escribe la URL, analízala y luego pulsa el botón "Ver página rastreada" y "Más información". Se abrirá un informe más detallado en tu derecha.

¿Te devuelve un código 200 OK? Perfecto, tu página no contiene contenido oculto.

Cómo eliminar el ataque SEO japonés

Antes de realizar el proceso de eliminación, debes tomar en consideración algunas acciones manuales para evitar que tus lectores sean enviados a estas URL's fraudulentas. Recuerda que tu comunidad es tu mayor activo y debes protegerlos.

1. Alerta a tu hosting. Abre un ticket de soporte y ellos desactivaran tu sitio temporalmente mientras realizas la limpieza. También puedes hacerlo tu manualmente a través de cPanel.
2. Realiza una copia de seguridad de los archivos CORE de WordPress y de la base de datos MySQL. Ten en cuenta que esta copia puede estar infectada, por lo que será nuestro último recurso.

El proceso de desinfección se divide en dos fases. Primero os mostraré como limpiar WordPress y después como forzar la desindexación o eliminación de las URL's tóxicas de Google. El proceso será el mismo para los otros buscadores.Para realizar estas acciones necesitas tener nociones básicas de FTP. Te recomiendo hacerlo a través de un gestor de archivos como FileZilla o a través del cPanel. Si en algún momento te pierdes, contacta con tu hosting. Si no te atienden, cámbiate al mejor hosting para WordPress 🙂

#1 Realiza un escaneo en tu PC/Mac

El primer paso es analizar tu ordenador en busca de malware. A parte de WordPress, debemos descartar que tengas archivos infectados en tu equipo. Por ejemplo, pueden acceder a la contraseña de tu FTP si estás utilizando un cliente en local.

Utiliza un antivirus que tenga en cuenta el malware como ESET o Norton.

#2 Cambia las contraseñas de acceso a tu servicio de alojamiento

Accede a tu panel de administración en tu hosting y realiza un cambio de contraseña. Además, modifica también el password de acceso a los archivos FTP.  No pongas un password cualquiera, utiliza una combinación de alta seguridad de mínimo 16 caracteres. Utiliza un generador de contraseñas y anótala en un sitio seguro. La mejor contraseña es aquella que no puedes recordar.

,x<9]:ZskD+w&fUGF5z<~_b!$/Y*@s-t

#3 Descarga la última versión de WordPress

Accede a la página oficial de WordPress y obtén la última versión. Debemos machacar los archivos antiguos por los nuevos. Una instalación limpia nos garantiza que los archivos core están libres de spam.

#4 Descomprime el ZIP de WordPress

Descomprime los archivos en una carpeta local en tu PC o Mac. Puedes utilizar cualquier herramienta gratuita como WinRAR o 7Zip. Luego seguiremos con ellos...

#5 Accede a los archivos de tu web mediante FTP

Dentro de la carpeta de WordPress deberías ver una estructura de archivos como esta:

wp-admin
wp-content
wp-includes
index.php
license.txt
readme.html
wp-activate.php
wp-blog-header.php
wp-comments-post.php
wp-config.php
wp-config-sample.php
wp-cron.php
wp-links-opml.php
wp-load.php
wp-login.php
wp-mail.php
wp-settings.php
wp-signup.php
wp-trackback.php
xmlrpc.php

ELIMINA todos los archivos excepto la carpeta wp-content i el archivo wp-config.php

Ahora, deberías ver solo estos dos elementos:

wp-content
wp-config.php

Accede al cPanel > Gestor de Archivos, localiza el archivo wp-config.php y edítalo. Revisa que no exista algún código de apariencia sospechosa. Si está infectado, verás una larga cola de texto aleatorio similar a esto:

$ O_O0O_O0_0 = urldecode ( "% 6E1% 8A% 62% 2F% 6D% 615% 5C% 76% 740% 6928% " );

Para estar doblemente seguro, puedes compararlo con el archivo original de WordPress wp-config-sample.php que hemos descargado y descomprimido anteriormente.

Puedes utilizar el programa sublime text para editar el archivo PHP que está en local. Es gratuito y compatible con PC y Mac.

Ahora accede a la carpeta wp-content. Deberías ver lo siguiente:

plugins
themes
uploads
index.php

Haz una lista de los plugins que estás utilizando actualmente. Después elimina la carpeta plugins y el archivo index.php. No te preocupes, volveremos a instalar los plugins una vez acabemos este proceso.

Ahora accede a la carpeta themes y revisa manualmente los archivos de tu plantilla. Igualmente, si quieres estar seguro, te recomiendo volver a descargar la plantilla desde su web original e instalarla de nuevo. Si optas por esta opción (recomendada) puedes eliminar la carpeta themes.

Revisa también la carpeta uploads y verifica que no hay archivos sospechosos. En este espacio se almacenan los medios que subimos (normalmente fotografías en JPEG y PNG). Si detectas una archivo inusual (por ejemplo, un php) debes eliminarlo.

#6 Cargar los archivos limpios de WordPress

Sube los archivos frescos de WordPress que hemos descomprimido al servidor a través de FTP. Recuerda que si has borrado la carpeta themes, deberás volver a cargar la plantilla una vez accedas al panel de administración de WordPress.

#7 Cambia la contraseña de acceso a WordPress y instala los plugins

Ahora deberías tener acceso al panel de administración y poder cambiar la contraseña.

Soy muy pesado, pero es importante introducir una contraseña larga y difícil. Utiliza un generador de contraseñas para no correr riesgos. Si optas por algo simple al estilo "Yogui777" tu página volverá a ser jaqueada. Hecho esto, revisa la lista de los plugins que tenías operativos y vuelve a instalarlos.  Pero antes una advertencia...

No instales plugins que no estén actualizados. Si esto pasa, busca una alternativa al mismo. Una extensión desatendida es un potencial agujero de seguridad.

#8 Revisa los usuarios que tienen acceso a Search Console

Por motivos de seguridad y para evitar dejar cabos sueltos, revisa si hay algún usuario no autorizado con acceso a la web en tu Search Console. Si es así, elimínalo inmediatamente. Puedes consultar aquí los pasos a seguir para ver los usuarios verificados y gestionar sus permisos.

#9 Verifica el estado del archivo .htaccess

Uno de los archivos más importantes de WordPress es el .htaccess. A primera vista no lo verás dentro de la FTP, ya que está marcado como oculto. Para verlo, utiliza tu programa FTP (FileZilla por ejemplo) y  activar la opción "Ver archivos ocultos". Seguidamente abre el archivo y verifica que no haya alguna instrucción maliciosa.

Un archivo .htaccess limpio deber contener lo siguiente:

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

#9 Notifica a Google que has solucionado el problema

Ahora tu página web ya está libre de malware, y debes notificarlo a Google. Accede nuevamente al apartado de seguridad de Google Search Console y marca como solucionado el problema.

¿Hemos acabado? Técnicamente sí, pero vamos a ir un paso mas allá y forzaremos la eliminación de las URL's tóxicas de los índices de Google.

Eliminar manualmente las URL's japonesas

Para eliminar estás direcciones debenos notificar a Google su eliminación mediante la herramienta de eliminación de URL's disponible en la versión antigua de Google Search Console.

Para acceder a ella, debes ir al panel izquierdo y hacer click en la última opción "Ir a la versión anterior".Menú Indice de Google > Eliminar URL's > click en Ocultar Temporalmente

Introduces la URL tóxica y confirmas su eliminación.

Y así sucesivamente hasta eliminar todas las URL's tóxicas. Como he mencionado inicialmente, yo tuve que eliminar a mano más de 190 direcciones. Por desgracia no existe el modo "bulk" para hacerlo masivamente, y cuando Google solo permita la versión nueva de Search Console esperemos que no esta opción se incorpore.

Si genera errores 404, con el tiempo se acaban desindexando, pero es un proceso más lento. Por cierto, ¡No hagas redirecciones 301!

Veréis que las peticiones quedan como Pendiente. Es normal, pasadas unas 48-72 horas su estado cambiará y las direcciones habrán sido eliminadas de los índices de Google.

Mejora la seguridad de tu WordPress ?

¡Ya has solucionado el problema! Ahora debes reforzar la seguridad de tu WordPress. Si te han infectado el site, será por algún motivo. Veamos algunas acciones que puedes aplicar desde ya para mejorar la seguridad de tu página web.

1. Activa la actualización automática del CORE de WordPress (cPanel)
2. Actualiza los plugins regularmente y elimina los desatendidos.
3. El usuario de acceso no debe ser "admin". Demasiado fácil. ¡Cámbialo!
4. Modifica regularmente tus contraseñas y aumenta su complejidad
5. Limita los intentos de acceso con Limit Login Attempts Reloaded (aquí)
6. Instala una suite de seguridad como Wordfence Security (aquí)
7. No instales plantillas o plugins piratas o descargados de fuentes desconocidas.
8. No asignes nunca permisos 777 a carpetas o archivos sensibles.

Espero que todo esto te sirva para solucionar este problema 🙂

 Fuentes consultadas

How to remove malware from WordPress by SecurePress
How to fix japanese keywords hack by WPHacked
Fixing the japanesse keyword hack by Google.com
Japanese SEO Spam, causes and fixes by CzarSecurities

¿Soy el único enamorado de los archivos vectoriales? ¡Todo son ventajas! Cada vez hay más páginas web que utilizan este formato escalable y progresivamente se ha ido trasladando al diseño, aunque WordPress no lo integra de forma nativa.

No es un formato nuevo precisamente. La World Wide Web Consortium (W3C) empezó a trabajar con él hace ya 20 años. Desde entonces la organización recomienda el uso de la versión SVG 1.1 por ser compatible con la gran mayoría de navegadores web en todas sus versiones (Escritorio y Mobile).

Te preguntarás... ¿Si tiene tantos años, por qué no se utilizó antes?

El renacimiento del formato SVG es la respuesta al aumento imparable (y desmesurado) de dispositivos móviles y la irrupción de las plantallas de alta resolución (Retina display) que superan los 300 píxeles por pulgada.

¿Qué es un archivo SVG?

Es un formato de archivo estándar, pero que contiene gráficos vectoriales escalables basados en XML (un meta-lenguaje de programación). Este formato permite generar gráficos bidimensionales, animados e interactivos. ¿En qué se traduce esto? En una mejor experiencia de usuario, muy relacionada con el consumo de contenido a través de smartphone y tablet.

Esta misma web utiliza muchos elementos en formato SVG, y cada vez son más las páginas que adoptan este formato. De momento, se estima que solo un 3,4% de las páginas utilizan este formato, pero ofrece tantas ventajas sobre otros formatos que acabará estandarizándose. Como puedes observar, el formato vectorial es cada vez más popular y ha venido para quedarse.

Por suerte los navegadores web más populares son totalmente compatibles con SVG, excepto el viejo y querido Microsoft Internet Explorer 8, que como muestra la gráfica, tiene los días contados. Google Chrome sigue siendo el navegador preferido por los usuarios, y su nivel de adopción es imparable.

Los gráficos vectoriales son muy atractivos para los diseñadores web o los especialistas en experiencia de usuario (UX), ya que permiten mostrar logotipos, iconos y botones siempre a la máxima calidad sin importar el tipo de pantalla que utilice el usuario. Además, su tiempo de carga es muchísimo más bajo y pueden ser comprimidos mediante la función gzip.

Ventajas de utilizar SVG en WordPress

• Son escalables y mantienen siempre una máxima nitidez.
• Son indexables por Google, lo que es genial para el SEO.
• Pesan mucho menos que los JPEG / PNG, lo que agiliza el tiempo de carga.
• Creatividad, ya que tienen una estética muy limpia y colorida.

Fijaos que la mayoría afectan directamente al SEO. La primera mejora la experiencia de usuario y puede generar un aumento de permanencia en la web. La indexación y el tiempo de carga son factores directos. La última... es una opinión personal 😉

Ahora que ya sabes qué es un archivo SVG, porque se utiliza y cuales son sus principales ventajas, vamos a abordar como crear, editar y exportar un archivo SVG. Para hacer esto, necesitarás tener el todopoderoso Adobe Illustrator CC, el mejor software del mercado para el diseño gráfico vectorial. Si no lo tienes licenciado, puedes descargarte su versión de prueba de 7 días.

¿Quieres empezar YA a utilizar archivos SVG?

Puedes descargar iconos vectoriales gratuitos en Flaticon y Freepik

¿Cómo exportar archivos SVG con Adobe Illustrator?

Hago este post porqué hay varias maneras de exportar un archivo SVG con Illustrator CC. En la última versión de CC, las 3 opciones son válidas, pero no en versiones anteriores donde el formato SVG aparece solo en "Guardar como". Veamos cuales son estas opciones...Archivo > Exportar > Exportar Como
En la versión CC sí se puede exportar SVG desde este panel.Archivo > Guardar para web (heredado)
Perfecta para exportar archivos JPEG, PNG o GIF. Ni rastro del SVG aquí 🙁Archivo > Guardar Como
La mejor opción para las versiones CS6 y CC al ser 100% compatible.

Así pues, para exportar correctamente los archivos SVG desde Illustrator, la opción Archivo> Guardar como funcionará en todas las versiones de Illustrator.

¡No hemos acabado! Veamos las opciones de guardado...

Si tienes varios diseños vectoriales dentro de la mesa de trabajo (por ejemplo 10 iconos web), puedes marcar la opción "Usar mesas de trabajo". De esta manera, Illustrator exportará los 10 archivos de golpe, ahorrándote así unos cuantos minutos de trabajo.

Configuración perfecta para exportar SVG

Una vez se abra el primer cuadro de diálogo, click en "Más opciones" para acceder a toda la información.

• Perfiles SVG: SVG 1.1
• Fuentes: Texto: SVG y Subconjunto: Ninguno
• Opciones: Ubicación de la imagen: Enlazar
• Propiedades CSS: Elementos de estilo
• Decimales: 1
• Codificación: Unicode (UTF-8)
• Sí - Imprimir menos elementos <tspan>
• Sí - Utilizar elemento <textPath> para el Texto en un trazado

Como he comentado anteriormente, es importante utilizar SVG 1.1 por ser la opción recomendada por la W3C. La versión "Tiny" fue diseñada hace ya muchos años para dar soporte a sistemas operativos más minoritarios. Por otra parte, siempre uso 1 decimal porqué ofrece una calidad suficientemente alta. Subir esta cifra a 5, generaría un vector con más puntos, lo que se traduce en un archivo más pesado (el doble). Lo he comprobado incluso con ilustraciones con muchos trazos y a ojos del usuario, la diferencia es imperceptible.

Si trabajas con tipografias, debes transformar el texto en objeto antes de exportar a SVG.

Es un proceso muy simple. Basta con seleccionar el texto en Illustrator, botón derecho y seleccionar "Crear contornos". Con este proceso, nos garantizamos un texto bien vectorizado, escalable y sin deformaciones una vez creado el archivo SVG.

Ten muy presente que a diferencia de los mapas de bits formatos por píxeles de colores como JPEG o PNG, los SVG están formados por códigos de programación XML y podrán ser editados fácilmente una vez exportados. Más adelante hablaremos sobre la seguridad de los archivos SVG en WordPress.

Comprimir y blindar el archivo SVG

Ya hemos exportado el archivo SVG desde Illustrator de forma correcta. ¿Se puede subir ya a WordPress? Sí, se puede. Pero antes de publicar nuestro archivo, vamos a comprimirlo y  a sanearlo. Para hacer este proceso, yo utilizo la herramienta online gratuita de Vecta.io llamada Nano SVG. Puedes subir archivos de uno en uno o en modo bulk.

• Compresión sin perdida de hasta un 80%
• Incrustación de fuentes –por si te has saltado el paso anterior 😉
• Limpieza de código XML (espacios en blanco, saltos de línea innecesarios...)
• Eliminación de etiquetas, events y scripts innecesarios (seguridad)
• Minificación de estilos y colores

Como podéis ver, es una herramienta todo en uno que nos garantiza un archivo ligero y seguro. Por último, solo nos quedará habilitar SVG en WordPress. Se puede hacer de dos formas; mediante código o utilizando un plugin gratuito. En mi caso, opto por la segunda opción por motivos de eficiencia.

Por ejemplo, he descargado el logo de WordPress en formato SVG desde Flaticon. Al pasarlo por el compresor...

¿Resultado? 2.039 bytes versus 1.213 bytes, una compresión del 40%

Además, el código ha sido saneado y comprimido. Fijaos la diferencia al abrirlo con Sublime text.

Habilitar el uso de SVG en WordPress

¡El último paso! Los que utilizáis WordPress y habéis intentado cargar un archivo vectorial como si de una foto se tratase, os habréis encontrado con esto:

Por razones de seguridad, este tipo de archivo no está permitido.

Uhhh... ¿da miedo, eh? WordPress debe advertirnos y hace bien.

Como hemos visto, un archivo SVG puede contener scripts maliciosos y poner en peligro nuestra página web. Para solucionar esto, instalaremos el plugin Safe SVG (SVG Segura). Este complemento nos habilitará la subida de arhivos SVG y nos dará visibilidad de los mismos en la librería del CMS. Además, analizará el archivo en busca de potenciales códigos maliciosos.

Referencias

Guía de uso SVG de Adobe
Archivos SVG en W3C
Sitio web de Creative DropLets
Sitio web de SitePoint