Adicionar o atributo Alt automaticamente nas imagens | Quero Dicas Quero Dicas : Adicionar o atributo Alt automaticamente nas imagens

Quero Dicas : Adicionar o atributo Alt automaticamente nas imagens

Adicionar o atributo Alt automaticamente nas imagens

|


Atributo Alt automaticamente
Olá meus amados e amadas. Hoje vamos aprender a colocar o atributo "Alt" automaticamente no blog.

Muita gente, não sabe da grande importância desse atributo no blog. e tentando resumir, vou explicar.

Quando construímos um blog, normalmente, ao criarmos uma postagem nossa unica preocupação é nas imagens, no que vamos escrever e claro, nos erros ortográficos.

Dai ao completarmos este objetivo, salvamos, visualizamos e publicamos. Pronto, o post já está no Google e no mecanismo de busca, não é verdade? Errado!

O fato é que, não basta só postar imagens, colocar um titulo legal e escrever um lindo texto. Temos que também implementar SEO sobre este e aos demais posts. Dessa forma o seu blog terá mais chance de chegar as primeiras páginas dos principais buscadores (Google, Bing, etc).

Lembrado que não existe mágica e sim fatores, portanto, temos que cercar tudo o que for possível e útil em nosso blog, Afinal, uma postagem bem indexada pelos mecanismos de busca é a chave para o crescimento de um blog.

Infelizmente, o Blogger não disponibiliza "ainda" de plugins para nos ajudar, diferente da plataforma Wordpress. No Wordpress, basta adicionar o plugin para que ele ajude "no trabalho". Já na plataforma Blogger, temos que realizarmos manualmente, por isso, é tão comum nós esquecermos de atribuir ALT as nossas imagens.

A maneira de atribuir Alt as imagens manualmente:
• Criar um nome para a sua imagem antes de adicioná-la a postagem
Reforçar a indexação:
• Clicar sobre a imagem
• Entrar em propriedade
• Adicionar texto (texto de titulo e texto alternativo)

Não entendeu? Vou fazer melhor...
1.  Criar um nome para a sua imagem antes de adicioná-la a postagem
Quando coletamos uma imagem da web, normalmente, ela está sem um nome especifico.

Exemplo: (coletada no Pixabay)
https://pixabay.com/static/uploads/photo/2015/01/21/14/14/ipad-606764_960_720.jpg

Note que não há um nome especifico (vermelho), somente o nome de onde foi coleto e o formato (azul)

Para que seja indexado a sua postagem você deve dar um nome a ela, dê preferencia, o do seu post.
Exemplo: (dessa postagem)
Adicionar%2Bo%2Batributo%2BAlt%2Bautomaticamente%2Bnas%2Bimagens.jpg

Note que em vermelho é o nome dessa postagem.

2. Reforçar a indexação:

Ao adicionar a imagem a sua postagem, você pode, ainda mais, ajudar os robots a lerem sua imagem mais corretamente. Inserindo propriedades a imagem.

Para isso, faça o seguinte: Clique sobre esta imagem e aparecerá uma barrinha azul de opções. Clique em propriedade. Na caixinha que expandir escreva a descrição da imagem. (Texto de titulo e texto alternativo). Clique em OK e pronto sua imagem esta com o atributo Alt.
Insira os textos referentes a sua postagem.
Resumindo: 
Ao fazer estas configurações, principalmente, reforçando a indexação em sua imagem, você estará dando ainda mais oportunidade ao robots acharem seu post mais rapidamente e consequentemente seu blog.

Atributo "Alt" automático no blog
Este script me ajuda muito na hora de criar minhas postagens. Por isso eu repasso a vocês.

Eu me desdobro em somente 24h. Por isso, acabo esquecendo em não atribuir Alt em minhas imagens. Quando me lembro, já visualizei e publiquei. Se você se parece comigo, ele também poderá ajudá-lo (a).
Atenção: A melhor opção e a mais adequada é escrever o título e alt manualmente. Este script é somente uma ajuda. Lembre-se disso!
1 - Para implantar o código completo, primeiro temos que pesquisar no html do seu blog o script abaixo: (para não haver conflitos desnecessários)

► Caminho a seguir:
1. Acesse o "Painel do Blogger"
2. Vá em "Modelo" e em "Editar HTML"
3. Procure por

 
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>

Caso já tenha este script, não adicione.

 2 - Caso você ainda não tenha, procure por:  </head> e cole logo acima.
 
</head>


3 -Apos o 1º script estar adicionado ao html. Logo abaixo dele, cole este seguinte:

 <Script tipo = 'text / javascript "> 
// <! [CDATA 
[/ * e atributos alt title*/ 
$ ( document ). ready ( function () { 
$ ( 'img' ). each ( function (){ 
var $img = $ ( this ); 
var filename = $img . attr ( 'src' ) 
$img . attr ( 'title' , filename . substring (( filename . lastIndexOf ( '/' ))+ 1 , filename . lastIndexOf ( '.' ))); 
$img . attr ( 'alt' , filename . substring (( filename . lastIndexOf ( '/' ))+ 1 , filename . lastIndexOf ( '.' ))); 
}); 
}); 
//]]> 
</script>
 

4 - Salve e pronto!

TESTE:
Para ver se o script está funcionando corretamente, sobre qualquer imagem que desejar, ao passar o cursor (mouse) sobre a imagem, veja se aparece a descrição correta de " alt " (titulo da postagem) sobre ela. Caso esteja tudo certinho, seu blog ou site estará melhor otimizado e posicionando nos resultados da pesquisa.

Saiba que eu achei este script, a algum tempo atrás, no blog Aizumblogt. Trouxe resultados para mim, espero que para você também.
E claro, se você implantou este script e trouxe resultados positivos ou negativos, deixe seu comentário.

Fato super importante 
Trabalhar sobre as imagens antes de adicionar ao seu post (Editar tamanho e peso).

Não coloque uma imagem diretamente (Web ou própria) em seu post antes de editá-las.
Redirecione o tamanho exato de exibição e saiba que este tamanho varia de acordo com cada template. Normalmente, a dimensão de 680px se encaixa melhor em qualquer template, mas isso, também, varia de acordo com o gosto do proprietário (a) do blog.

Eu gosto de usar imagens pequenas (250px por 200px) para a divulgação dos meus posts. Isso faz com que meus posts carregam mais rapidamente.
Lembre-se imagens grandes demais e pesadas fazem seu blog carregar mais lentamente.

Beijinhos

Compartilhe


2 comentários:


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço!

Apenas peço que leia:

1 - Devido a falta de tempo, não prometo responder a todos os comentários. Mais farei o possível.

2 - Educação sempre! Comentários com palavras de baixo calão, não serão publicados ou respondidos.

3 - Comentários não relacionados ao titulo, não serão publicados.

4 - Por favor, não adicione links externos nos comentários.

Beijinhos ♥

  1. Olá. Muito legal esse tutorial, te agradeço. Tenho uma dúvida. Ele sobrepõe os atributos alt preenchidos manualmente? Mt obrigado e parabéns pelo trabalho!

    ResponderExcluir
    Respostas
    1. Olá lucas.
      Sim, este script sobrepõe os atributos da imagem automaticamente. Vale lembrar que as imagens devem conter um nome.

      Claro, também não posso deixar de falar e ressaltar que a melhor forma ainda é manualmente, pois você tem mais liberdade de escrita. Mais para os esquecidos, como eu, este script ajuda.

      Excluir

Amigos do Blog

agenda dos blogs Universo das Dicas

Ganhe Visitantes | Inscreva-se!

GeraLinks Linkicha Atoananet Linkirado
subir