Outil d’intégration d’image: Embed Código Generator
Cet outil gratuit a pour objectif de faciliter la promotion et la visibilité de vos contenus visuels sur des sites web tiers.
Pour cela, vous allez pouvoir intégrer un code sous votre image qui permettra aux propriétaires de sites tiers d'intégrer votre contenu, en vous citant comme source.
Ainsi, vous obtiendrez plus de backlinks (liens entrant) et plus de visibilité.
Vous trouverez depois l'outil des explications supplémentaires, sous formats vidéos, infographies et articles afin de vous aider à exploiter au mieux le potentiel du embed code generator.
Código à intégrer sur votre site
Resultado du code sur votre site web
GERADOR DE CÓDIGO DE INCORPORAÇÃO | Ferramenta de integração de imagens
Neste tutorial em vídeo, apresento passo a passo como funciona a ferramenta de integração de imagens:
Hoje, apresento uma ferramenta que facilitará o processo de integração e compartilhamento de imagens, para você e para qualquer pessoa que deseje usar suas imagens: o gerador de código de incorporação.
Com essa ferramenta completamente gratuita, você pode atingir dois objetivos:
- facilitar o uso e a integração de suas imagens/infografias por outros blogueiros para obter backlinks;
- integrar facilmente imagens/infografias com atribuição, sem precisar fazer download da imagem.
Vou além explicando os motivos dessa estratégia e mostrando como usar suas imagens para obter backlinks.
Você sabia? Mais de 3,2 bilhões de imagens são compartilhadas todos os dias nas redes sociais.
Esse número, que é obviamente astronômico, se explica em parte pela simplicidade infantil que permite compartilhar conteúdo nas redes sociais com um único clique.
De fato, é preciso reconhecer que tudo está em lugar para facilitar o compartilhamento e/ou republicação em nossos feeds de notícias.
No entanto, essa mesma fluidez não é observada em sites, particularmente no que diz respeito à adição de conteúdo visual.
Na web, há regras a seguir, particularmente para atribuição de créditos aos autores e nomes de empresas.
E o processo pode ser considerado um pouco mais complexo do que nas redes sociais, na medida em que você precisa fazer upload desses visuais em seu site antes de inseri-los nos artigos.
Por fim, você receberá dicas para integrar em seus artigos todos os tipos de conteúdo:
- MS Office: Word, Excel, PowerPoint…
- Google: Doc, Slide, Sheet…
- vídeos;
- áudios;
- páginas web.
Pronto? Vamos lá!
Capítulo 1: Como gerar o código de integração de sua imagem?
Primeiro, vejamos o processo de geração de código de integração, para ir direto ao assunto principal deste artigo: mostrar como usar o gerador de código de incorporação da Twaino.
Se esse conceito ainda é novo para você e deseja entender seu funcionamento, não hesite em ir direto ao capítulo 2. Depois, você pode voltar aqui para aproveitar plenamente os códigos de integração.
Uma vez no gerador de código de integração, você deve preencher este formulário:
Vamos proceder passo a passo.
Etapa 1: Preencha o “nome do site”
Esta é a URL para a qual você deseja que as pessoas que incorporam sua infografia façam uma atribuição.
Ou é o domínio onde você encontrou a imagem que deseja integrar em seu site:
Isso permite atribuir a fonte da imagem/infografia ao site em questão.
Etapa 2: Indique a URL da página de origem da imagem
Esta é a URL da página onde a infografia que você está integrando está localizada:
Se você criou a imagem e deseja criar o código de integração em seu artigo, inclua a URL do artigo em questão.
Tenha cuidado para não cometer erros neste nível, pois é para onde a infografia/imagem integrada no site de outra pessoa aponta. Se você cometer um erro, perderá tráfego referente e suco de link.
No caso de ser a imagem de outra pessoa que você deseja integrar em seu conteúdo, basta indicar o endereço do artigo/página onde ela está localizada.
Etapa 3: Insira a URL da imagem
Nesta etapa, você fornece a URL da imagem hospedada em um site de terceiros ou em seu site.
Para obter a URL de uma imagem, basta clicar com o botão direito do mouse na imagem e escolher “copiar endereço da imagem”:
Depois de obter o endereço, cole-o na parte indicada do gerador de código de incorporação.
Etapa 4: Preencha o atributo Alt
Aqui, você incluirá um texto alternativo que descreve sua imagem/infografia:
No exemplo acima, escrevo: “14 maneiras de obter backlinks sem pedir”
Para infografias em particular, você pode incluir, além do título, a palavra “infografia”, para permitir que aqueles que fazem buscas de imagens encontrem rapidamente seus visuais.
Etapa 5: Ajuste a largura da imagem
Especifique a largura da infografia que deseja integrar.
Observe que a largura geralmente varia dependendo da largura do site/blog do usuário.
A largura do meu blog é de 800 pixels, mas qualquer pessoa que incorpore sua infografia também pode adaptar o código de integração às especificações particulares de seu blog/site personalizando este parâmetro.
Etapa 6: Indique a altura da imagem
Recomendo deixar este campo em branco, para que a infografia permaneça proporcional ao original, independentemente de sua largura.
Mas se essa opção existe, é porque é possível personalizá-la. Assim, você pode preencher a altura se tiver uma necessidade específica.
Etapa 7: Preencha a largura da janela contendo o código
Esta é a largura da janela (exibindo o código de integração) em sua página web ou artigo de blog.
Por exemplo, se a largura do seu blog é de 800 pixels, como o meu, você inserirá esse número para que a caixa cubra a largura do seu blog, para que não haja transbordamento ou espaço vazio.
Etapa 8: Indique a altura da janela com o código
Esta é a altura da caixa (que exibe o código de integração) em sua página web/artigo.
Quanto maior esse bloco, mais espaço ele ocupa, mas menos o usuário precisa rolar para ver o código de incorporação completo.
Etapa 9: Cole seu código no editor ou código HTML da página
Seu código agora está pronto para ser usado no editor ou código HTML de sua página.
Copie e cole este código no código HTML de sua página web/blog, no local onde deseja que o código de integração apareça.
Recomendo colocá-lo abaixo da infografia, pois é o local padrão onde os códigos de integração são colocados.
No modo “Visual”, aqui está o local onde desejo colar o código:
Clique em “Texto”, ao lado de “Visual” para obter o código HTML de sua página.
Você deve então encontrar o local exato para colocar seu código.
Encontrei o meu rapidamente:
Observe que você também pode incluí-lo acima de sua infografia se desejar. Não há regra definida sobre isso, você pode personalizar as coisas de acordo com suas necessidades.
Etapa 10: Verifique o resultado de sua integração
Depois de publicar seu artigo, a janela contendo o código se apresenta assim:
Também pode aparecer assim:
<img src=’/wp-content/uploads/2019/09/infographie-14-manieres-d-obtenir-des-backlinks-sans-quemander.png’ alt=’14 maneiras de obter backlinks sem pedir’ width=’800′ border=’0’/><style>.ampenable{ display:none;}</style><h3>Você gosta desta imagem? Integre-a gratuitamente em seu site<span class =’ampenable’> com <a href=’https://www.twaino.com/embed-code-generator/’ target=’_blank’>Twaino</a></span>.</h3><xmp onclick=’this.focus();this.select()’ style=’overflow-x: auto;white-space: pre-wrap;white-space: -moz-pre-wrap;white-space: -pre-wrap;white-space: -o-pre-wrap;word-wrap: break-word;line-height: 21px;font-size: 16px;font-family: Dosis, Arial, Helvetica, sans-serif;border: 2px solid #eee;padding: 5px; width:800;height:120px’><a target=’_blank’ href=’https://www.twaino.com/seo/backlink/’ title=’14 maneiras de obter backlinks sem pedir’><img data-no-lazy=’1′ src=’/wp-content/uploads/2019/09/infographie-14-manieres-d-obtenir-des-backlinks-sans-quemander.png’ alt=’14 maneiras de obter backlinks sem pedir’ width=’800′ border=’0’/></a><br/>Fonte da imagem: 14 maneiras de obter backlinks sem pedir | <a target=’_blank’ href=’https://www.twaino.com/blog/seo/backlink/‘>twaino</a></xmp>
No site de outra pessoa, é exibido desta forma:
<a target=’_blank’ href=’https://www.twaino.com/seo/backlink/’ title=’14 maneiras de obter backlinks sem pedir’><img data-no-lazy=’1′ src=’/wp-content/uploads/2019/09/infographie-14-manieres-d-obtenir-des-backlinks-sans-quemander.png’ alt=’14 maneiras de obter backlinks sem pedir’ width=’800′ border=’0’/></a><br/>Fonte da imagem: 14 maneiras de obter backlinks sem pedir | <a target=’_blank’ href=’https://www.twaino.com/seo/backlink/’>twaino</a>
Pronto! Você terminou sua integração, mas vamos adicionar uma última etapa que pode interessá-lo.
Capítulo 2: Como funciona o gerador de código de integração?
2.1. Algumas definições
Para entender melhor o conceito de código de incorporação ou código de integração, vamos começar com algumas definições.
2.1.1. O que é um hiperlink/link?
Você provavelmente sabe o que é um hiperlink ou link, mas é importante fazer um lembrete para o que vem a seguir.
Em um conteúdo, um hiperlink é uma porção de texto destacada, na maioria das vezes por um sublinhado ou mudança de cor, de modo que quando você clica nele, o navegador exibe automaticamente outra página ou substitui a página atual por aquela para a qual o link aponta.
O elemento destacado é conhecido como hiperlink ou, em resumo, link.
2.1.2. O que é um link incorporado/link integrado?
Os links “incorporados” ou embed são links que levam a outro lugar quando clicados.
As principais diferenças entre linking e embedding são onde os dados são armazenados, bem como como são atualizados depois de terem sido vinculados ou incorporados.
Com um link padrão, seu arquivo é vinculado a um arquivo de origem ou página. Neste caso, os dados são armazenados no arquivo de origem e atualizados lá.
Ou seja, se uma pessoa deseja consultar esses dados, ela é obrigada a clicar no link e ir para a página do arquivo de origem. E como as informações são armazenadas na página de origem, as atualizações de conteúdo não são conhecidas na página contendo o link.
Não se preocupe, aqui está um exemplo para entender melhor o conceito.
Sem ir à Amazon, não terei ideia das mudanças – particularmente aquelas relacionadas ao preço – que ocorrerão na página deste livro:
Terei que clicar no link e ir para a página para saber sobre as informações.
Por outro lado, com embedding, esses dados são acessíveis diretamente do seu artigo ou página web.
Ainda com o exemplo do produto Amazon, você pode ter este tipo de bloco:
Assim, independentemente das variações de preço, a atualização é automática, pois você incorporou/embed o conteúdo (aqui produto) em sua página web.
Essa é a principal diferença entre linking e embedding. Dito isto, também existe um último ponto de diferença: a aparência da apresentação.
Enquanto os links geralmente se apresentam desta forma “https://www.twaino.com/blog/”, os códigos de integração são mais complexos.
Como você constatou até agora, um código de integração (código de incorporação) é um pedaço de código HTML que às vezes pode ser muito longo e impossível de decifrar para um iniciante:
“<a target=’_blank’ href=’https://www.twaino.com/seo/backlink/’ title=’14 maneiras de obter backlinks sem pedir’><img data-no-lazy=’1′ src=’/wp-content/uploads/2019/09/infographie-14-manieres-d-obtenir-des-backlinks-sans-quemander.png’ alt=’14 maneiras de obter backlinks sem pedir’ width=’800′ border=’0’/></a><br/>Fonte da imagem: 14 maneiras de obter backlinks sem pedir | <a target=’_blank’ href=’https://www.twaino.com/seo/backlink/’>twaino</a>”
Então por que você deveria se preocupar com tais códigos?
2.2. Por que usar códigos de integração?
Criar conteúdo de qualidade e envolvente é um dos princípios essenciais da agência SEO Twaino. Se você também valoriza esse ponto, essa ferramenta o interessará.
Os códigos de integração permitem que outros publiquem sua infografia/imagem em seu site com atribuição apropriada, na forma de um link para seu site.
Isso significa que sua infografia é devidamente atribuída e acessível a um número maior de usuários da internet, que podem acessar seu site se clicarem na imagem.
Se você se pergunta “por que se preocupar com um código de integração quando poderia simplesmente compartilhar a URL da página”, saiba que esses códigos têm o objetivo principal de facilitar o uso de suas infografias/imagens por outros blogueiros.
De fato, tudo o que eles precisam fazer é pegar seu código e integrá-lo em seu editor, o que não leva mais de um minuto, enquanto o procedimento tradicional consiste em:
- fazer download da imagem;
- fazer upload da imagem em seu site;
- inserir a imagem no artigo;
- mencionar a fonte da imagem.
Esse processo é bastante longo, não é?
Com um código de integração, você também não precisa se preocupar em mencionar a fonte, pois tudo já está integrado.
Neste caso, você pode criar seus próprios códigos de integração?
Criar manualmente um código de integração é relativamente simples para a maioria dos desenvolvedores web. Mas não é o caso de alguém que não conhece HTML.
O gerador de código de incorporação da Twaino elimina as suposições e permite que qualquer pessoa crie facilmente seu código de integração.
Integrar imagens facilmente é bom, mas por que se preocupar em criar ou usar imagens em seus conteúdos?
Capítulo 3: Por que e como usar imagens/infografias em uma estratégia de criação de conteúdo?
Indicamos regularmente em nossos artigos que infografias ou imagens em geral eram elementos muito bons para integrar em um conteúdo.
Não tivemos a oportunidade de explicar por quê. Então, aqui estão as 10 razões pelas quais você deve considerar usar visuais em todo o seu conteúdo.
3.1. Por que usar infografias em sua estratégia de criação de conteúdo?
3.1.1. As 10 razões pelas quais você deve usar infografias em seu conteúdo
De todos os visuais em forma de imagem, as infografias são as mais bem-sucedidas. Basta usar Google Trends para ver o entusiasmo que esse formato gerou desde 2008:
Frequentemente usaremos o termo infografia nas próximas seções. Mas saiba que isso também inclui qualquer tipo de imagem que pudesse chamar a atenção dos usuários da internet.
Razão 1: As infografias podem captar facilmente a atenção de seu público-alvo
Os seres humanos são criaturas visuais que, portanto, são mais facilmente atraídas por elementos visuais.
É importante ter em mente que a probabilidade de um visitante sair de sua página é muito alta nos primeiros segundos.
Em outras palavras, você tem apenas alguns segundos para causar uma boa impressão e manter seus visitantes interessados. Você então precisa de algo que capture imediatamente sua atenção.
Se as palavras não conseguem fazer isso, elementos visuais como infografias podem fazer um trabalho melhor.
Uma pesquisa conduzida por Brooke Barnett e Barbara Miller apresenta bem a importância dos elementos gráficos ou visuais:
“Texto e gráficos sozinhos são métodos de comunicação úteis e imperfeitos. A linguagem escrita permite um número quase infinito de combinações de palavras que permitem análise profunda de conceitos, mas depende muito da capacidade do leitor de processar essas informações. Os gráficos podem ser mais fáceis de entender para o leitor, mas são menos eficazes na comunicação de conceitos abstratos e complexos… A combinação de texto e gráficos permite que os comunicadores aproveitem os pontos fortes de cada mídia e diminuam as fraquezas de cada mídia.”
Combinadas com texto bem escrito, as infografias podem ser muito poderosas para ajudar seu conteúdo a ressoar com seu público-alvo e atravessar o número astronômico de informações presentes na web.
Tendemos naturalmente a gostar de fatos, números, estatísticas e outros elementos gráficos.
Se esses elementos forem convincentes o suficiente, as informações contidas em sua infografia podem realmente captar a atenção.
Razão 2: As infografias podem tornar seu conteúdo viral
A análise realizada por MDG Advertising destacou que o conteúdo com elementos visuais atraentes (imagens/gráficos) pode gerar 94% mais visualizações do que texto simples ou conteúdo sem imagens.
O mesmo relatório também destaca que os comunicados de imprensa podem gerar até 14% de aumento no número de visualizações de página se o artigo publicado contiver uma fotografia.
Além disso, se o comunicado de imprensa incluir fotos e vídeos, pode-se esperar um aumento ainda maior de 48% nas visualizações de página.
Quando bem projetadas, as infografias são conteúdos visuais convincentes que atraem tantas pessoas que a maioria delas gostaria de compartilhá-las através de suas próprias redes e círculos de influência.
O resultado é um conteúdo visual que pode realmente se tornar viral conforme as pessoas compartilham a infografia.
Razão 3: As infografias podem aumentar o reconhecimento de sua marca
Geralmente, as infografias são projetadas de forma que informações relevantes sobre o criador sejam exibidas.
Esses são elementos como:
- o logotipo;
- o endereço do site;
- o email ou até informações de contato.
Esta é uma maneira muito eficaz de aumentar o reconhecimento de sua marca que, se usada corretamente, pode facilmente aumentar seu tráfego em pelo menos 12%, como alguns editores descobriram em suas campanhas.
As infografias permitem que você vá além de simplesmente “dizer” às pessoas o que sua marca, produtos ou serviços são.
Você usa elementos visuais para dar a conhecer sua marca, o que é muito mais eficaz do que simples parágrafos de texto.
Razão 4: As infografias podem ajudá-lo a aumentar seus seguidores nas redes sociais
O poder do conteúdo visual pode ser confirmado simplesmente dando uma olhada rápida em seus feeds de notícias e paredes do Facebook.