Un iframe es una etiqueta HTML especial a través de la cual se puede mostrar un sitio web dentro de un sitio web existente.
Es posible que como parte de tu día a día implementando sitios web tengas algunos clientes que han requerido esta funcionalidad.
Si este es tu caso, has puesto los ojos en al artículo correcto, vamos a conocer alguna de las formas que existen de insertar un iframe en WordPress.
¿Por qué insertar un iframe en WordPress?
Te estarás preguntando, "¿en qué casos tengo que insertar un iframe en mi página web de WordPress?". Algunas razones de peso que puedo enumerarte son las siguientes:
- Quieres que tus usuarios sigan viendo la url de tu dominio y cargar una funcionalidad desde otro dominio.
- Algunos servicios externos sólo permiten integraciones a través de iframes, por ejemplo: Youtube, Google Maps, etc.
- Puedes mostrar por Iframe lo que se cargará en tu navegador por ejemplo un archivo .pdf.
En la siguiente imagen vemos cómo se ha insertado el sitio de Webempresa dentro de otro sitio.
Solo tienes que tener en cuenta que no todos los sitios pueden ser insertados desde otro dominio ( cabeceras XFrame). Por ejemplo, actualmente el buscador Google no permite inserción de su página por iframe.
¿El uso de Iframes afecta el SEO?
Google no considera contenido duplicado si se inserta un iframe, por tanto, reconoce que se trata de contenido incrustrado de otro sitio.
Es decir, Google separa y entiendo que tu sitio y el sitio web dentro del iframe son sitios diferentes y por lo tanto lo trata de manera independiente.
En conclusión, el uso de iframes en tu sitio no afecta el SEO, es indiferente, sin embargo como recomendación siempre tienes que colocar como iframe algo relacionado con tu página web, similar a como lo harías con un enlace externo.
Insertar iframes a través de un plugin
Existen algunos plugins que te pueden facilitar insertar un sitio web dentro de otro, por ejemplo, el plugin Advanced iFrame, este es un plugin gratuito pero con funcionliadad adicional de pago.
Sin embargo, para la mayoría de los casos la funcionalidad gratuita es más que suficiente.
Luego de instalar este plugin veremos que tiene una serie de configuraciones, no obstante, en la mayoría de los casos no será necesario hacer cambios a dichas configuraciones.
Dejamos entonces las configuraciones por defecto, lo que nos interesa es el shortcode que se usa para crear la etiqueta HTML del iframe, para esto vamos a ir a alguna entrada o página y veremos que el plugin ha creado un botón desde donde podemos insertar el shortcode.
En el shortcode verás un atributo src que tiene una url por defecto, bastará con cambiar esta url.
[advanced_iframe src="//www.dominioexterno.com" width="100%" height=“600"]
Y listo, con eso ya tendrás un iframe insertado en una página o entrada de WordPress. Para verlo en el front-end de tu sitio tienes que crear algún enlace de menú a esa página o entrada.
Insertar iframes manualmente
Si te sientes confiado usando código HTML, entonces puedes insertar el iframe de manera manual y evitar el uso de un plugin adicional.
Para hacer esto tienes que usar el editor de WordPress en vista de código, y allí insertar directamente un código similar a:
<iframe src="//www.dominioexterno.com" width="100%" height=“600"></iframe>
Igualmente, no te olvides de cambiar el atributo src por la url externa a la que quieres hacer referencia. Y listo, con eso tendrás un sitio web externo dentro de tu sitio.
Vídeo
En el siguiente vídeo te mostramos como añadir iframes en contenidos de WordPress mediante plugins y utilizando un código específico para no requerir el uso de plugins.
Conclusiones
Como has podido ver para insertar un iframe en WordPress básicamente puedes usar un plugin o hacerlo manualmente.
En la mayoría de los casos, te recomiendo hacerlo de forma manual, ya que así puedes evitar el uso de un plugin adicional.
Y esto ha sido todo. Espero que hayáis disfrutado de este post en el que os contamos cómo insertar un iframe en WordPress. Espero que os haya resultado muy didáctico, ahora la puesta en práctica es cosa vuestra. ;)
¡Nos vemos en el siguiente post!