(Atualizado em 6 de setembro 2021)

O iFrame é uma tag usada para inserir uma página HTML em outra. O uso dessa tag é fundamental por dois motivos principais. 

Primeiro, porque permite que você insira a página enquanto mantém a estrutura. Segundo, porque a tag também oferece a possibilidade de evitar penalidades de conteúdo duplicado, mesmo integrando o conteúdo de uma página em outra.

Na maioria das vezes, os proprietários de sites não veem problemas com cópias de conteúdos se você usar o iFrame. Isso porque, ao usar seu conteúdo na forma de um quadro, você dá credibilidade ao local de destino.

Portanto, um iFrame é usado para adicionar informações ou funcionalidades a uma página web. Neste artigo, vamos explorar todos os detalhes relacionados à tag. Entenda melhor como utilizá-la!

O que é iFrame?

Nos primórdios da web, era comum usar frames para criar sites. Eles eram partes menores de sites, armazenadas em páginas HTML únicas, integradas em um documento que continha um conjunto de quadros (conjunto de frames) e permitia especificar a área da tela que cada frame deveria ocupar, mais ou menos como acontece ao dimensionar colunas e linhas de uma tabela. 

Essa técnica foi a mais usada desde meados da década de 90 até o fim, porque era óbvio como uma página web dividida era mais eficiente em desempenho para a velocidade de download — o que era muito importante, considerando as conexões de internet lentas do período.

Anos mais tarde, a técnica de plugins tornou-se muito popular, incluindo miniaplicativos Java e Flash. Eles permitiam que desenvolvedores incorporassem conteúdo de todo tipo em páginas web, como páginas externas, vídeos, mapas e mais, o que simplesmente não era possível com HTML até então.

Por fim, o item iFrame apareceu com outros meios de integração de conteúdo. Este elemento permitiu que um documento web inteiro fosse manipulado e colocado em outro. Assim, a palavra iFrame é uma abreviação usada para se referir a “quadro embutido”, uma tag HTML usada para incorporar o conteúdo de uma página em outra.

Vamos entender melhor o que é iFrame? A princípio, cada site consiste em um único documento HTML. Caso queira inserir outros elementos, é necessário usar um frame. Isso torna possível integrar documentos, imagens ou vídeos adicionais no documento HTML. No passado, os frames HTML normais eram usados ​​para isso. Hoje, eles não são mais usados ​​e preferimos a tag iFrame. 

Quando usar o iFrame?

Geralmente, os iFrames são usados ​​para integrar objetos de outras páginas em um site. Exemplos de iFrames são vídeos do YouTube em blogs ou mapas do Google Maps, muito comuns em sites institucionais.

Como podemos observar neste exemplo de post da HostGator, no qual podemos ver um vídeo de YouTube inserido em um post de blog:

Plugins de mídia social ou aplicativos específicos, bem como documentos HTML, também podem ser integrados usando iFrame.

Uma grande vantagem é que ele permite hospedar conteúdo adicional em um documento HTML sem implicar em problemas de direito autoral, já que exibe o local de destino no quadro.

Como usar o iFrame?

Qualquer pessoa que deseja incorporar um iFrame em seu site pode inseri-lo da mesma forma que uma imagem de origem ou uma linha HTML no código fonte. Para fazer isso, a altura, o alinhamento e outros atributos são escritos nos fragmentos que determinam a aparência estética e a orientação do iFrame.

Os iFrames são criados em código HTML usando a tag da seguinte forma: <iframe>…</iframe>. É necessário indicar os seguintes atributos para preencher corretamente a tag:

• src: a fonte do conteúdo a ser integrado, especificada com uma URL;
• largura: expressa em pixels ou porcentagem;
• altura: expressa em pixels ou porcentagem,
• nome: título escolhido.

Além desses atributos relevantes, na prática, existem outros que não são mais suportados desde o HTML5. Para essas funcionalidades, é necessário o uso de soluções CSS.

Portanto, o conteúdo do iFrame, bem como parte do layout, pode ser configurado exclusivamente usando esses atributos. A princípio, os parênteses da tag não contém nenhum conteúdo. Também é possível integrar um iFrame em um web design responsivo usando alguns truques de CSS.

Integrar um iFrame no WordPress sem plugin

Integrar um iFrame no WordPress sem plugin não é tão difícil. Você pode usar a codificação HTML da seguinte forma: <iframe src = “the_webpage_url”> </iframe>. Se você deseja adicionar mais parâmetros ao seu iFrame, use as tags que comentamos, como largura, altura, alinhamento, etc.

Como integrar um iFrame no WordPress com um plugin

Existem muitos plugins iFrame disponíveis, mas, no geral, eles funcionam quase de forma idêntica. Há duas maneiras de integrar um iFrame no WordPress: usando códigos de acesso e interface do WordPress. A segunda é a mais fácil, então, se você não gosta de tags e todo aquele código HTML, dê preferência a ela.

Uso de códigos de acesso

A primeira maneira é usar códigos de acesso. Eles são semelhantes aos códigos HTML, mas um pouco mais fáceis devido ao uso de tags mais curtas. Portanto, ao abrir qualquer uma das suas postagens no site, você verá um botão “Adicionar iFrame avançado”. Clique nele para ver um código de acesso.

Por enquanto, você pode apenas editar o site que precisa inserir, além de usar outras tags adicionais.

Usando a interface do WordPress

Este método será mais fácil caso você não tenha nenhuma habilidade de codificação ou não goste de manipular conteúdo HTML. É bem simples e rápido: vá para o painel, clique em “iFrame avançado” e escolha as configurações básicas. Nessa parte, você verá uma lista na qual pode ajustar qualquer função de acordo com sua necessidade. Como mostramos no exemplo a seguir:

Cuidados com a segurança do site

Ao usar um iFrame, lidamos, principalmente, com conteúdo de terceiros sobre o qual não temos controle. Por esse motivo, estamos mais suscetíveis a problemas de segurança. Em outras palavras, você está aumentando o risco de uma vulnerabilidade potencial em seu site ou, ainda, simplesmente ter que lidar com uma experiência de usuário ruim.

Felizmente, você pode controlar isso por meio de recursos específicos. Para tanto, é interessante usar o sandbox, atributo que permite impor restrições ao iFrame. Assim, é possível definir se o iFrame pode modificar o conteúdo do site ao qual está vinculado. 

Para minimizar a possibilidade de invasores cometerem ações prejudiciais em seu site, você deve conceder ao conteúdo incorporado apenas as permissões necessárias para que ele faça seu trabalho. 

Vantagens e desvantagens de usar iFrame

Como já falamos, iFrames são úteis se você deseja incorporar material de fontes externas em seu próprio site. Graças a eles, o usuário não é enviado para outro domínio e pode navegar em seu site com tranquilidade, o que aumenta muito a facilidade de uso!

A integração também é uma vantagem técnica, pois o conteúdo do iFrame é carregado independentemente do resto do site. Em outras palavras, o usuário pode acessar o conteúdo mesmo que todos os elementos da página ainda não tenham sido carregados.

No entanto, os iFrames também têm certas desvantagens. Na verdade, os elementos integrados não são tratados de forma relevante pelos mecanismos de busca, como o Google. Isso pode afetar a otimização de SEO e o SEO geral do site. 

Também pode acontecer de alguns navegadores, bem como alguns CMS, não exibirem corretamente um iFrame. Portanto, é recomendável evitar o uso excessivo para o benefício de melhor usabilidade e acessibilidade do usuário. 

O problema no carregamento de iFrames pode ser evitado instalando extensões de navegador. O que é muito mais problemático, porém, é o risco de segurança associado aos iFrames: ao integrar conteúdo externo, corre o risco de implicar um efeito negativo no sistema ou no próprio usuário. 

O conteúdo do iFrame pode, por exemplo, conter um plugin prejudicial ou realizar ataques sem o seu conhecimento como operador do site. Assim, os iFrames estão cada vez mais sendo analisados e debatidos em razão da questão de proteção dos dados. 

Dica: integre apenas se necessário

Às vezes, é realmente bom e necessário incorporar conteúdo de terceiros em seu site, como um vídeo do YouTube que vai ilustrar um tutorial, por exemplo. No entanto, você pode evitar muitos problemas se fizer isso apenas quando for realmente necessário. 

Por isso, avalie com bastante critério a necessidade ou não do uso dessa ferramenta. Além da segurança, você precisa levar em consideração as questões de direitos autorais, pensando que a maior parte do conteúdo é protegido por ele.

Isso é verdade tanto off-line, quanto on-line, até para conteúdos que não imaginamos inicialmente. Dessa forma, evitar postar conteúdo de outros produtores em sua página web, a não ser que você consiga autorização para isso.

Por isso, reforçamos: ser muito cuidadoso nunca é demais! Esperamos que este conteúdo tenha sido útil. Compartilhe com a gente o que achou e quais são as suas dúvidas!

Assine a nossa newsletter! Receba conteúdos como este no seu e-mail 🙂