Cómo incrustar documentos de Google Drive en WordPress

Incrustar documentos de Google Drive en WordPress es una forma práctica de compartir información dentro de una entrada o página sin obligar al usuario a descargar archivos o salir del sitio.

Esta opción puede ser útil para mostrar PDFs, documentos, hojas de cálculo, presentaciones, catálogos, instructivos, materiales de trabajo, reglamentos, archivos institucionales o recursos complementarios dentro de un artículo.

En lugar de subir el archivo directamente al servidor de WordPress, podés alojarlo en Google Drive y mostrarlo dentro de tu contenido mediante un iframe.

En este tutorial de ArgentoIA, te explicamos cómo incrustar documentos de Google Drive en WordPress usando el bloque de HTML personalizado, cómo preparar el enlace correctamente y qué ajustes conviene hacer para que el archivo se vea bien en la página.

Por qué incrustar documentos de Google Drive en WordPress

En blogs, sitios de noticias, páginas institucionales, plataformas educativas y tiendas online, muchas veces necesitamos compartir documentos con los lectores.

Por ejemplo:

• un PDF informativo;
• una presentación;
• una hoja de cálculo;
• un reglamento;
• una ficha técnica;
• un catálogo;
• un documento institucional;
• una guía descargable;
• un archivo de consulta;
• material complementario de una nota.

Subir todos esos archivos directamente al servidor puede no ser lo más conveniente, especialmente si son pesados o si se actualizan con frecuencia.

Google Drive permite alojar el archivo y WordPress permite mostrarlo dentro de una página mediante código HTML.

El resultado es una experiencia más cómoda para el usuario: puede ver el documento sin abandonar la entrada.

Beneficios de usar Google Drive para mostrar documentos

Incrustar documentos desde Google Drive puede aportar varias ventajas.

Accesibilidad

El lector puede consultar el documento directamente dentro de la página o entrada, sin tener que descargarlo ni abrir una nueva pestaña.

Esto mejora la experiencia de lectura y permite mantener al usuario dentro del sitio.

Actualización automática

Cuando el archivo de Drive se actualiza, el contenido incrustado también puede reflejar esos cambios.

Esto es útil cuando trabajás con documentos vivos, como reglamentos, listados, guías, materiales institucionales o documentos que se corrigen con frecuencia.

Ahorro de espacio en el servidor

Al no cargar el archivo directamente en WordPress, evitás ocupar espacio de almacenamiento en tu hosting.

Esto puede ser útil para sitios con muchos documentos o archivos pesados.

Organización

Google Drive permite mantener archivos ordenados en carpetas y controlar permisos de acceso.

Esto facilita la gestión de documentos cuando trabajan varias personas en un mismo proyecto.

Variedad de formatos

Desde Drive se pueden compartir distintos tipos de archivos, como PDFs, documentos, hojas de cálculo, imágenes, presentaciones o videos.

De todos modos, para videos suele ser más práctico usar plataformas como YouTube o Vimeo, especialmente si el objetivo es reproducir contenido audiovisual de forma fluida.

Antes de empezar: revisar los permisos del archivo

Antes de incrustar un archivo de Google Drive en WordPress, hay un paso fundamental: revisar los permisos.

Si el archivo está restringido, los visitantes no podrán verlo dentro de la página. En su lugar, les aparecerá un mensaje de acceso denegado o una solicitud para pedir permiso.

Para evitarlo, el archivo debe estar compartido correctamente.

La configuración recomendada es:

• acceso: cualquier persona con el enlace;
• permiso: lector.

De esta manera, las personas podrán ver el documento, pero no editarlo.

Este punto es importante porque no alcanza con pegar el iframe en WordPress. El archivo también debe estar disponible para los usuarios que visiten la web.

Paso 1: copiar el enlace del archivo en Google Drive

El primer paso es entrar a Google Drive y ubicar el archivo que querés incrustar.

Una vez que lo encontraste, podés hacer clic derecho sobre el archivo y seleccionar la opción para compartir.

También podés abrir el documento y usar el botón de compartir que aparece en la parte superior derecha.

Desde esa ventana, copiá el enlace del archivo.

Un enlace típico de Drive puede verse parecido a este:

https://drive.google.com/file/d/ID_DEL_ARCHIVO/view?usp=drive_link

Lo importante en ese enlace es el identificador del archivo, que aparece después de /d/.

Ese identificador es lo que Google Drive usa para mostrar el documento correcto.

Paso 2: cambiar el enlace de “view” a “preview”

Para incrustar el documento en WordPress, conviene usar la versión preview del enlace.

Eso significa reemplazar la parte final:

/view?usp=drive_link

por:

/preview

Entonces, si el enlace original es:

https://drive.google.com/file/d/ID_DEL_ARCHIVO/view?usp=drive_link

el enlace preparado para incrustar quedaría así:

https://drive.google.com/file/d/ID_DEL_ARCHIVO/preview

Este cambio permite que el archivo se muestre dentro del iframe de forma más adecuada.

Paso 3: crear el iframe

Una vez que tenés el enlace en formato preview, podés crear el código iframe.

El iframe es el fragmento de HTML que le indica a WordPress que debe mostrar un contenido externo dentro de la página.

Un ejemplo básico sería:

<iframe src="https://drive.google.com/file/d/ID_DEL_ARCHIVO/preview" width="100%" height="400"></iframe>

En este código:

• src contiene el enlace del archivo;
• width define el ancho;
• height define la altura.

Para que el documento se adapte mejor al ancho del sitio, conviene usar:

width="100%"

En la altura, podés usar un número en píxeles. Por ejemplo:

height="400"

Si el documento se ve muy bajo, podés probar con 500, 600 o más, según el diseño de la página.

Paso 4: insertar el iframe en WordPress

Ahora entrá al administrador de WordPress y abrí la entrada o página donde querés mostrar el documento.

Dentro del editor de bloques, agregá un nuevo bloque haciendo clic en el botón +.

Buscá el bloque llamado HTML personalizado.

También podés escribir:

/html

en un bloque vacío y seleccionar la opción correspondiente.

Una vez agregado el bloque, pegá el iframe completo.

Por ejemplo:

<iframe src="https://drive.google.com/file/d/ID_DEL_ARCHIVO/preview" width="100%" height="400"></iframe>

Después, usá la vista previa para verificar que el documento se cargue correctamente.

Paso 5: revisar la vista previa

Después de pegar el código, es importante revisar cómo se ve el documento.

Comprobá lo siguiente:

• que el archivo cargue correctamente;
• que no aparezca una solicitud de acceso;
• que el ancho se adapte al contenedor;
• que la altura sea cómoda para leer;
• que se vea bien en computadora;
• que se vea bien en celular;
• que no genere scroll horizontal innecesario;
• que esté ubicado en el lugar correcto de la entrada.

Si el archivo no se ve, lo más probable es que el problema esté en los permisos de Drive o en el enlace usado dentro del iframe.

Código recomendado

Una versión simple y ordenada del iframe podría ser esta:

<iframe 
  src="https://drive.google.com/file/d/ID_DEL_ARCHIVO/preview" 
  width="100%" 
  height="500" 
  style="border:0;" 
  allow="autoplay">
</iframe>

Esta versión ocupa todo el ancho disponible del contenedor, tiene una altura de 500 píxeles y elimina el borde visual del iframe.

Podés modificar el valor de height según el tipo de documento.

Para un PDF largo, puede convenir una altura mayor. Para un documento breve, 400 o 500 píxeles suelen ser suficientes.

Cómo centrar un documento con ancho menor

En algunos casos, quizás no quieras que el documento ocupe todo el ancho de la página.

Por ejemplo, podrías usar:

width="70%"

El problema es que, si solo cambiás el ancho, el iframe puede quedar alineado hacia la izquierda.

Una forma más moderna de centrarlo es envolverlo en un contenedor div con estilo.

Por ejemplo:

<div style="text-align:center;">
  <iframe 
    src="https://drive.google.com/file/d/ID_DEL_ARCHIVO/preview" 
    width="70%" 
    height="500" 
    style="border:0;">
  </iframe>
</div>

Otra opción es usar un contenedor con margin:auto:

<iframe 
  src="https://drive.google.com/file/d/ID_DEL_ARCHIVO/preview" 
  width="70%" 
  height="500" 
  style="border:0; display:block; margin:0 auto;">
</iframe>

Conviene evitar la etiqueta <center>, porque es una forma antigua de centrar contenido y ya no es la opción más recomendable para HTML moderno.

Cómo hacer que el iframe sea más responsive

Usar width="100%" ayuda a que el documento se adapte al ancho del contenedor, pero no siempre resuelve todos los problemas en mobile.

Para una integración simple, este código suele funcionar bien:

<iframe 
  src="https://drive.google.com/file/d/ID_DEL_ARCHIVO/preview" 
  width="100%" 
  height="500" 
  style="border:0;">
</iframe>

En celulares, puede ser necesario ajustar la altura para evitar que el documento ocupe demasiado espacio o quede incómodo de navegar.

Una buena práctica es revisar la publicación desde un teléfono real antes de darla por terminada.

Qué tipos de archivos conviene incrustar

Google Drive puede servir para mostrar distintos tipos de documentos, pero no todos funcionan igual de bien dentro de una entrada.

PDFs

Son una de las mejores opciones para incrustar.

Sirven para reglamentos, informes, guías, documentos institucionales, fichas técnicas o catálogos.

Documentos de texto

Pueden funcionar bien si necesitás mostrar un archivo editable o actualizado desde Drive.

Sin embargo, si el contenido es central para el SEO de la página, conviene incluirlo también como texto dentro de WordPress, no solo incrustado.

Hojas de cálculo

Pueden ser útiles para tablas, listados o información que se actualiza con frecuencia.

Hay que revisar que se vean bien en mobile.

Presentaciones

Pueden funcionar como material complementario, especialmente en tutoriales, clases o recursos institucionales.

Videos

Se pueden alojar en Drive, pero para videos públicos suele ser más recomendable usar YouTube, Vimeo u otra plataforma pensada específicamente para reproducción audiovisual.

Buenas prácticas SEO

Incrustar un documento puede ser útil, pero no conviene depender únicamente del iframe para posicionar una página.

Los buscadores no siempre interpretan el contenido incrustado como parte principal del texto de la entrada.

Por eso, si el documento contiene información importante para SEO, es recomendable acompañarlo con contenido escrito dentro del artículo.

Por ejemplo:

• una introducción que explique qué contiene el documento;
• un resumen de los puntos principales;
• una descripción del archivo;
• enlaces relacionados;
• preguntas frecuentes;
• una llamada a la acción;
• datos de contacto cuando corresponda.

De esta manera, la página no depende solo del documento incrustado y ofrece más contexto al lector.

Buenas prácticas de experiencia de usuario

Además del SEO, conviene pensar en la comodidad del usuario.

Algunas recomendaciones:

• indicá qué tipo de documento se está mostrando;
• agregá una breve explicación antes del iframe;
• revisá que el archivo sea visible sin pedir permisos;
• evitá incrustar muchos documentos en una misma página;
• usá una altura suficiente para leer cómodamente;
• verificá la experiencia móvil;
• agregá un enlace alternativo para abrir el documento en Drive;
• no incrustes archivos privados o sensibles.

El objetivo es que el documento ayude al usuario, no que complique la navegación.

Problemas frecuentes y soluciones

El documento pide acceso

Esto ocurre cuando el archivo no está compartido públicamente.

Solución: revisar los permisos de Google Drive y configurar el acceso como “cualquier persona con el enlace” en modo lector.

El iframe no carga

Puede deberse a un enlace incorrecto o incompleto.

Solución: revisar que el enlace termine en /preview.

El documento queda muy bajo

La altura del iframe puede ser insuficiente.

Solución: aumentar el valor de height.

El documento genera scroll lateral

Puede pasar si el ancho está definido en píxeles o si el contenedor no es responsive.

Solución: usar width="100%" o ajustar el contenedor donde está insertado.

El documento se ve mal en celular

Puede deberse al tamaño del archivo, el formato o el diseño de la página.

Solución: revisar la vista mobile y probar con otra altura o con un enlace alternativo al documento.

Cuándo conviene subir el archivo directamente a WordPress

Aunque Drive puede ser muy práctico, hay casos donde conviene subir el archivo a la biblioteca de medios de WordPress.

Por ejemplo:

• cuando querés que el archivo dependa totalmente de tu sitio;
• cuando no querés usar una plataforma externa;
• cuando necesitás controlar mejor la URL del archivo;
• cuando el documento no se actualiza con frecuencia;
• cuando el archivo forma parte de una estrategia SEO específica.

En cambio, Drive puede ser mejor cuando el documento se actualiza seguido, cuando es pesado o cuando varias personas colaboran en su edición.

Conclusión: incrustar Google Drive en WordPress es simple y útil

Incrustar documentos de Google Drive en WordPress es una solución práctica para compartir archivos dentro de una entrada o página sin cargar todo directamente en el servidor.

El proceso consiste en preparar el enlace del archivo, cambiarlo a formato preview, pegarlo dentro de un iframe y usar el bloque de HTML personalizado de WordPress.

También es importante configurar bien los permisos, revisar la experiencia móvil y acompañar el documento con texto útil para el usuario y para el SEO.

En ArgentoIA desarrollamos sitios web en WordPress pensados para ser claros, funcionales y fáciles de administrar. También ayudamos a empresas, medios y organizaciones a mejorar sus contenidos, optimizar la experiencia de usuario e integrar recursos como documentos, mapas, formularios, botones de WhatsApp y automatizaciones.

Un documento bien incrustado puede hacer que tu página sea más completa, más útil y más fácil de consultar.