Adicionar o atributo Alt automaticamente nas imagens | Quero Dicas | Tutoriais para seu blogs


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.
Espero ter ajudado a todos e lembre-se, se você implantou este script e trouxe resultados positivos ou negativos, deixe seu comentário.
Beijinhos


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

Comente. Mais peço que leia antes:

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 xingamentos entre outros, não serão publicados ou respondidos.

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

4 - Comentários somente URLs de terceiros, não serão publicados.

♥ - Caso queira divulgar seu blog gratuitamente, Acesse, Galeria de Blogs
♥ - Eu terei o maior prazer em colocar o link ou seu banner nesta galeria.

Muito obrigada por seu comentário e por sua vista.
Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

Obrigada por seu comentário! Ele é muito importante para mim.