A importância de redimensionar imagens com CSS e SEO
blog
,
css
,
redimensionar
,
seo
2 comentários
SEO
Neste post, iremos falar sobre o redirecionamento de imagens através de CSS. Daremos dicas de como redimensionar, a maneira correta de inserir as imagens em seu blog, e falaremos sobre a importância das imagens relacionadas ao SEO.A importância do redimensionamento
Primeiro, você deve saber que o Google gosta de imagens (pra falar a verdade, o Google adora imagens). O problema é que inseri-las no blog de maneira incorreta, pode causar punição, fazendo com que seu artigo, ao invés de conseguir uma boa colocação nos buscadores, acabe decaindo nas pesquisas.Existem algumas técnicas que são fundamentais para aplicar na imagem ao inseri-la em seu blog. São elas: tag title=" ", endereço de URL específico ao nome da imagem, conteúdo relevante (à imagem - acima e abaixo), e dimensões devidamente especificadas (por CSS ou HTML).
Estas são as técnicas corretas para se aplicar em uma imagem ao inseri-la em seu blog. Com isso, junto à imagem que você inseriu, você está, também, aplicando técnicas de SEO, fazendo com que as imagens inseridas em seu artigo, ajudem a "ranquear" melhor nos buscadores.
Qual a maneira correta de inserir imagens no blog?
Vamos abordar os tópicos citados acima de forma mais específica.
Comecemos com a tag title=" "
Esta tag é de suma importância para que o Google associe a imagem ao seu conteúdo. Com ela, o Google consegue analisar o seu conteúdo e ver se a imagem inserida tem relevância com o que você publicou. Para este caso específico, aconselhamos que toda vez que você for publicar uma imagem junto ao seu artigo, insira a tag title=" " na imagem e coloque uma descrição coerente com aproximadamente 140 caracteres, estilo "twitada".
Veja o exemplo abaixo do que fizemos com uma imagem dentro deste artigo:
<img alt="redimensionamento de imagem" src="http://comosehace.co/wp-content/uploads/2013/02/Redimensionar-imagenes.jpg" title="redimensionar imagem com css" /></div>
Neste exemplo, aplicamos uma imagem no começo do artigo, relacionada ao conteúdo, e aplicamos a tag title=" " Dentro dela, escrevemos um texto que tem a ver com o artigo, e está próximo ao conteúdo do qual estamos tratando.
Agora, iremos falar das URL's.
Mesmo que a sua imagem tenha a tag title=" " inserida, o Google terá uma certa deficiência ao analisar a imagem, se a sua URL não estiver em concordância com esta tag. Por isso, recomendamos que sempre que você for hospedar uma imagem, você insira uma URL específica com um nome claro e relacionado ao conteúdo e à sua tag title=" " com sua descrição.
Veja no exemplo abaixo a maneira errada e a maneira correta de se publicar uma imagem:
Errado:
http://2.bp.blogspot.com/-RP-rX8djSmA/U3cHS2KFzKI/AAAAAAAACmg/ANYkNP1OiBM/s320.png
O Google não entenderá a URL da imagem, e portanto, não irá ranqueá-la bem, pois os Spiders ou Crawlers terão uma certa deficiência em otimizar as URL's, pois não há como associar números e letras a algum tipo de conteúdo.
Certo:
http://2.bp.blogspot.com/bloggerenciado.png
Desse jeito, o Google irá entender a URL da imagem e associar ao conteúdo.
O último item é o redimensionamento ou imagens inseridas na web com suas dimensões bem definidas, para que assim os Spiders ou Crawlers posicionem seu artigo de maneira correta.
Maneiras para redimensionar as imagens
O redimensionamento das imagens pode ser feito através da CSS, tanto na folha de estilo quanto dentro do próprio HTML, onde a imagem foi inserida. Caso não seja possível especificar a dimensão da imagem, aconselhamos que você edite-a em algum editor, como o Photoshop, e coloque a dimensão da imagem na sua URL, onde ela foi hospedada.Na folha de estilo, você pode usar os seguintes parâmetros para redimensionar:
background-size:...; força um redimensionamento por porcentagem ou pixel (altura/largura) ou width:...; define a largura da imagem height:...; define a altura da imagem
Aplicando no HTML onde a imagem se encontra, pode ser feito da seguinte maneira:
<div style="height:...; width:...; "> <img src="URL da imagem" title="texto da imagem" /></div>
Para definir altura e largura, ou
<div style="background-size:...;">
<img src="URL da imagem" title="texto da imagem" /></div>
Para forçar um redimensionamento, mesmo que não se encaixe na área onde ela foi inserida.
Onde aceita o redimensionamento?
Em Gadgets ou Widgets, aceita tanto a <div style=" " e sua respectiva imagem embutida quanto folhas de estilo, que devem ser inseridas entre as tags <style> e </style> O mesmo vale para postagens, artigos ou páginas estáticas.Caso queira inserir a imagem no código fonte, a <div style=" " deve ficar abaixo da tag </head>
No caso de folhas de estilo, os códigos de redimensionamento devem ser inseridos antes da tag ]]</b:skin> Assim, você estará trabalhando da forma correta com suas imagens.
Quais os programas adequados para ajudar no redimensionamento?
Felizmente, você pode trabalhar com vários editores de imagem na web. Vamos citar alguns deles:Google+ Essa Rede Social comprou o Picnic, que era um dos editores online mais completos, e passou para seu editor todas aquelas ótimas ferramentas. Para usufruir deste editor, você precisa fazer parte do Google+
Photoshop
Todos conhecem este editor completo, que também possui uma versão online. Acesse http://www.photoshoponline.com.br/editor/
Flickr
Um dos mais populares sites de hospedagem, onde você pode editar também.
Estes são apenas alguns dos editores mais conhecidos, mas se você fizer uma busca na web, acabará encontrando algum de sua preferência.
Boa sorte!
Este artigo está disponível para publicação em outros blogs ou sites desde que seja seguida a Política do BG
2 comentários :
O BG entrará em contato com você em até 24 horas! Para deixar seu link, escolha a opção Nome/URL. Spans ou links para pedidos de visita serão excluídos imediatamente. Para mais informações, leia a Política BG.
Assinar:
Postar comentários
(
Atom
)
O que eu não entendi é como conseguir uma URL diferente para a imagem, pois no blogger inserimos a imagem e ele cria uma URL que é sempre com muitos caracteres estranhos.
ResponderExcluirOlá Catarino, para conseguir URL's personalizadas você hospedar as imagens em algum host nós particularmente usamos a hostinger para hospedar arquivos com URL's personalizadas.
ResponderExcluirAbraços Andrew Silva do BG.