Contenido

Ocultar tu email a los robots mediante CSS

23 sep

+ 12

Lamentablemente el hecho de poner nuestro email en nuestra web, puede acarrearnos muchos problemas y sobretodo que recibamos mucho SPAM, para ello se usan técnicas bastante simples pero eficientes, como poner una imagen con el mail en cuestión. De esta forma el robot que escanea la página no detectará el mail y por consecuente seguiremos siendo invisibles para ellos.

Otra técnica, basada completamente en CSS sería añadir el mail mediante la propiedad :after del lenguaje.

//HTML
<address>© MailDejEjemplo</address>
//CSS/
/* \40 Se convertirá en "@" */
address:after{
  content: " <maildeejemplo\\40elmail.com>";
  }

Como podemos ver, la técnica es bastante simple, y podemos ver un ejemplo de ella en funcionamiento. Aunque tambien hay que tener en cuenta que navegadores como IE (5,6,7) no soportan esta pseudoclase y nos dejan sin mostrar el mail a nuestros usuarios. Aunque esta técnica no es 100% eficaz, siempre es bueno conocer alternativas a nuestras situaciones.

  • O bien una imagen o bien el típico formulario de envio de correo mediante PHP/ASP/ponga aquí su lenguaje web favorito.

    Añadir también que cuidadín con el correo que hayamos puesto en el whois ya que es también uno de los objetivos de los spammers.

  • Buen punto, aunque prefiero escribir el mail una imagen :D

  • Cómo ocultar tu email a los robots mediante css… y crear un problema de accessibilidad en el intento.

  • Carlos, exactamente ¿que problema de accesibilidad estás causando? ¿el que no se vea el mail? ¿Con las imagenes si se vé?

    Es que por desgracia si ocultas el mail, ya sea con imagenes o con CSS, los lectores de HTML para discapacitados no podrán verlos.

  • Dos alternativas:

    1.-Ofuscar el mail con Javascript (es lo que hago yo). Los únicos que quedan atrás son los que no lo tengan activado (y no, no es accesible si no está activado JavaScript. Esto es por diseño, no por error).

    2.-SiFR: Llamar el SiFR para hacer el render del texto del email (y de paso el link) para el clicky.

    Sobre la accesibilidad a menos que malentienda aquí el problema lo tendriamos con los lectores de web para ciegos. Si es así me da a mí que no hemos leído todos las especificaciones. La imagen y la tag “alt” sirven para proveer un contenido alternativo que en los sintetizadores aurales se utiliza para dar una versión hablada de la imagen o del flash (una de las razones por las que el uso de “alt” en vez de “title” en IE es una aberración, tienen usos diferentes). Si utilizas “alt=” para dar una versión del mail escrita (“eduo arroba mac punto com”) la imagen (o el flash) se vuelve accesible.

    De hecho la opción de utilizar el “alt=” sirve para casi todos los elementos, pero de los que aquí nos conciernen nos sirve para los objetos, para las imágenes e incluso para los enlaces (en el caso de que los ofusques con Javascript).

  • Eduo, el problema de poner un alt= a la imagen con el mail es el mismo que ponerlo en lugar de la imagen. El robot lo leerá sin problemas.

    Sobre temas de accesibilidad, te puedo asegurar que mi navegador de mi nokia 6680 no lee ni interpreta JS ni CSS. Y no soy ciego.

    Está claro, que si tenemos que hacer que nuestro mail no sea fácilmente reconocible para un robot, las personas que requieren navegadores especiales (moviles, lectores de páginas,…) sufrirán las consecuencias.

    Por ese motivo empiezo el post de esa manera, por que lamentáblemente es una putada que no podamos dejar el mail sin sufrir consecuencias.

  • Anieto2k: No me he explicado. El “alt” tiene “el texto del email”, no el email. Por eso no he puesto una arroba sino he escrito “arroba”.

    El navegador de tu nokia 6680 entiende javascript simple (un ofuscador de direcciones de mail es lo mas simple que hay en javascript).

    A lo mejor confundimos las cosas, tal vez por unos usar la literalidad de “accesibilidad” y otros que usamos la traducción de la iniciativa en inglés.

    En inglés y el mundo web en general “accesibilidad” significa específicamente el hacer disponible la web a gente con discapacidades:

    http://www.w3.org/WAI/gettingstarted/Overview.html

    Estas iniciativas especifican utilizar “alt=” para explicar lo que es cada cosa (en lenguaje comun). Si juntamos el “alt=” con la ofuscación por JavaScript tenemos una solución accesible y casi universal.

    Los únicos que no podrán utilizarla son los que no usan JavaScript en lo absoluto y cuyo navegador es incapaz de mostrarles el contenido del “alt=” si se ponen por encima. Creo que podemos tranquilamente deducir que el porcentaje es mínimo.

    Si tomamos “Accesibilidad” como lo usa el resto del mundo, como “acceso a gente con discapacidad y necesidades especiales” esta solución los tiene cubiertos. En algún sitio hay que trazar una línea y yo escojo trazarla ante los usuarios de Lynx: Si navegas en un navegador que no muestra ni “alt=” ni maneja JavaScript hay millones de páginas que te sirven y la mía no es una de ellas.

    Suena un poco duro, pero en el fondo todos tomamos esta decisión cuando hacemos una nueva implementación o, cuando menos, ignoramos la pregunta por comodidad.

  • Yo uso otra técnica con css: la de invertir las letras.
    Así un email test12@gmail.com lo escribo como 21tset@liamg.moc,y luego lo invierto con css.
    Pero como alguien bien dice, esto no es accesible para personas discapacitadas…

  • Alguien ha probado con un email que comience su dominio por la letra “c”?

    content: ” “;

    A mi no me funciona y en cambio si pongo

    content: ” “; funciona correctamente.

    ¿no os parece curioso?

  • //HTML
    © MailDejEjemplo
    //CSS/
    /* \40 Se convertirá en “@” */
    address:after{
    content: ” ”;
    }

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.