Categorias
Tutoriais Web WordPress

Feeding Google Search – Structure data

Content is one of the keys to the success on the internet, categorizing your content makes it more visible to the search engines and structure data will be your best friend to do it. This simple action could make you a step forward in the competitive market.  On 2011, Google, Bing and Yahoo launched an initiative called Schema.org, this project’s objective is to create and support schemas for structured data. And now this information start to be more relevant to the search engines, Google especially, uses the structure date to shows the content in a special format called Rich cards. Actually, Google.

Now, this information starts to be more relevant to the search engines, Google especially, uses the structure date to shows the content in a special format called Rich cards.

Actually, Google gives to us these options to pages enhancements: 

  • Breadcrumbs
  • Corporate contact information
  • Carousels for sequential results
  • Logos
  • Sitelinks Search box
  • Social profile links

Content types:

  • Articles
  • Books
  • Courses
  • Events
  • Job postings
  • Local businesses
  • Music
  • Products
  • Recipes
  • Tv and movies
  • Videos

For each situation, needs some required information, for example, recipes we will need to specify, numbers of calories, ingredients, and time to cook. Google uses the structure data to display these categories in a different layout in the search result, in that way help the users find the right content and increase the click rate for the websites that show the content with more quality.

Ok, what about the code?

There are three different formats JSON-LD(Recommended by google), Microdata and RDFa. For a long time, I used Microdata but now I’m working with different projects again and different markups the JSON-LD makes the changes simple.

Code examples:

JSON-LD

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "NewsArticle",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://google.com/article"
  },
  "headline": "Article headline",
  "image": {
    "@type": "ImageObject",
    "url": "https://google.com/thumbnail1.jpg",
    "height": 800,
    "width": 800
  },
  "datePublished": "2015-02-05T08:00:00+08:00",
  "dateModified": "2015-02-05T09:20:00+08:00",
  "author": {
    "@type": "Person",
    "name": "John Doe"
  },
   "publisher": {
    "@type": "Organization",
    "name": "Google",
    "logo": {
      "@type": "ImageObject",
      "url": "https://google.com/logo.jpg",
      "width": 600,
      "height": 60
    }
  },
  "description": "A most wonderful article"
}
</script>

 

Microdata

<div itemscope itemtype="http://schema.org/NewsArticle">
  <meta itemscope itemprop="mainEntityOfPage"  itemType="https://schema.org/WebPage" itemid="https://google.com/article"/>
  <h2 itemprop="headline">Article headline</h2>
  <h3 itemprop="author" itemscope itemtype="https://schema.org/Person">
    By <span itemprop="name">John Doe</span>
  </h3>
  <span itemprop="description">A most wonderful article</span>
  <div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
    <img src="https://google.com/thumbnail1.jpg"/>
    <meta itemprop="url" content="https://google.com/thumbnail1.jpg">
    <meta itemprop="width" content="800">
    <meta itemprop="height" content="800">
  </div>
  <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
    <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
      <img src="https://google.com/logo.jpg"/>
      <meta itemprop="url" content="https://google.com/logo.jpg">
      <meta itemprop="width" content="600">
      <meta itemprop="height" content="60">
    </div>
    <meta itemprop="name" content="Google">
  </div>
  <meta itemprop="datePublished" content="2015-02-05T08:00:00+08:00"/>
  <meta itemprop="dateModified" content="2015-02-05T09:20:00+08:00"/>
</div>

As we can see above, JSON-LD we create a structure independent from the content. But we need write the same information twice. Microdata the advantage is we just need to write the content once but the information is totally markup dependent. Especially for articles, we have two different rich cards, one for pages that support AMP and other for Non-AMP pages.

Search result without AMP

Search result with AMP

After adding this information to your content we need to validate it, for that we use the Structured Data Testing Tool

If you are using WordPress there are many different plugins to use Structure data in your Website: https://wordpress.org/plugins/tags/structured-data/

Categorias
Geral

Otimização de imagens para SEO

Quando estava preparando a palestra para o WordCamp BH, na minha palestra do “Marketplace ao WordPress” um dos pontos da palestra foi a otimização de imagens para SEO. Dei uma lida em alguns posts do Yoast, um deles foi um post sobre otimizar imagens em seu site, que até usei como referência da minha palestra.

Uma ótima opção para ajudar no entendimento do nosso conteúdo, descrever um determinado produto ou explicar um fluxo de uma operação. Temos um ditado “Uma imagem vale mais que mil palavras”. Não poderia ser diferente para que gera conteúdo web e nos itens a seguir vou listar alguns cuidados especiais para melhorar o SEO do seu conteúdo utilizando imagens, está lista é uma adaptação do post: http://yoast.com/image-seo/

Achando a imagem correta

Se você tem a oportunidade de adicionar uma imagem, por favor faça. Suas páginas precisam de imagens, inicialmente seu post precisa de imagens que remetam ao artigo. Se você usa imagem somente para otimizar as métricas de plugin de SEO, você está fazendo errado “meu parça”, a imagem deve refletir o tópico do post.

Existe uma simples razão para isso: uma imagem que é cercada por conteúdo relacionado “rankeia” melhor seu conteúdo. Adicionamos imagens ao nosso conteúdo pelas seguintes razões:

  • Elas enfatizam o título ou o assunto do post
  • Ela vai atrair um visitante para ler o post, sem ele ver o texto
  • As imagens serão usadas por redes sociais como: Facebook e Twitter

Se você não tem como usar fotos do seu próprio conteúdo, existem várias fontes de conteúdo com licença Creative Commons, por exemplo, Flicker outra ferramenta que podemos utilizar é freeimages.com. Mas tome cuidado fique longe das chamadas obvious stock photos, produzir suas próprias imagens tornam o conteúdo mais original.

Outro tipo de imagem que é bem popular hoje são os gifs, podemos utilizar a sequencia de imagens para demonstrar um passo-a-passo, ou uma cena curta. Um portal bastante conhecido começou a utilizar gif’s nas chamadas das matérias um momento chave de um acidente ou fato inusitado, estamos falando do globo.com, alguns gifs entraram até na home do canal de esportes.

Preparando a imagem para uso no seu artigo

Quando você imagem correta o próximo passo será otimizar a imagem para isso temos que levar em conta as seguintes considerações:

Escolha o nome correto para imagem

O inicio para otimizar uma imagem para SEO é dar o nome correto para o arquivo, uma forma de ganhar tráfego organico é  adicionando ao nome do arquivo o que a foto remete, nada de subir imagens no post com o nome DSC938293829.jpg, o formato ideal seria  museu-louvre-paris.jpg.

Escale sua imagem

Será que você realmente precisa realizar o upload de imagens com 2500×1800 pixels por exemplo? Na maioria dos casos a resposta é NÃO. Tempo de carregamento é um fator importante para a experiência do usuário e SEO, quanto mais rápido o site carrega mais fácil torna-se a visita do usuário, Outro fator importante são os usuários mobile, eles não possuem uma experiência totalmente imersiva em relação aos usuários desktop, segundo no carregamento da página são cruciais para você não perde-lo. E o uso de imagens corretas ajudam no tempo de carregamento, muitas vezes em alguns sites e blogs as imagens são os principais gargalos da velocidade de carregamento do site.

Otimize o tamanho do arquivo

Além de utilizar a escala a imagem no tamanho correto, podemos reduzir ainda mais os kb’s de nossas imagens sem ficar longe do resultado original. Primeiro passo é reduzir EXIF data de nossas imagens, também podemos utilizar ferramentas como ImageOptim ou sites como JPEGmini ou PunyPNG.

Podemos analizar o desempenho de nossas imagens com ferramentas como YSlow e PageSpeed Test.

Adicionando a imagem ao nosso artigo

Depois das etapas de otimização da imagem, vamos adicionar nossa imagem ao conteúdo. Primeiramente o conteúdo deve estar situado em um parágrafo que remete a imagem, a imagem deve fazer parte do contexto.

Legendas

As legendas das imagens devem ser um conteúdo que complementa a imagem, Porque isso é importante para o SEO da imagem? Pessoas usam um texto para “scannear” o artigo, depois dos cabeçalhos elas olham para as legendas das imagens como um scanner. Nilsen em 1997 escreveu em sua pesquisa fala sobre os elementos que melhoram a leitura do texto, cabeçalhos, fonts largas, texto em negrito, texto destacados, listas, gráficos e legendas. Em 2012 uma pesquisa publicada pela KissMetric, fala que legendas das imagens são lidas 300% a mais que o corpo dos textos, por isso não usa-las ou fazer o mau uso delas, significa jogar fora uma grande oportunidade de engajar os leitores.

Propriedades Alt e title

O texto alt é adicionado para criar uma um texto alternativo descritivo da imagem, quando por alguma razão o conteúdo não pode ser exibido para usuário como também por questões de acessibilidade, tenha certeza que os possua alguma keyword de SEO em seu conteúdo e relação ao conteúdo do post.

Quando você estaciona o mouse sobre a imagem O IE mostra o conteúdo do alt já o chrome exibe o conteúdo do title. “O atributo title é muito importante mas não é um modo seguro de exibir alguma informação crucial. Em vez disso, ele oferece um modo de fornecer informações não essenciais, por exemplo, o humor da imagem, ou que isso significa no contexto.” É bom ter a informação mas isso não é levado em conta para SEO da imagem.

OpenGraph

Use a imagem correta no HEAD do seu HTML com a meta tags do facebook “og:image”, isto irá garantir que estará usando a imagem correta nas interações com o facebook o openGraph também é usado para o Pinterest. O plugin do Yoast possui uma seção de social onde você pode definir que imagem será usada. A qualidade da imagem será importante, quanto maior a qualidade mais fácil será para estas ferramentas trabalharem com sua imagem, para verificar como o Facebook está lendo seu site pode utilizar o Facebook Debugger. O Plugin do Yoast também dá suporte aos cards do Twitter.

sitemap.xml de imagens

Se você é um desenvolvedor web, você pode se perguntar sobre sitemaps para imagens, o Google é bastante claro sobre isso:

“Para dar ao Google informações sobre as imagens em seu site você vai precisar adicionar tags específicas de imagem a um sitemap. Você pode listar separadamente as imagens, ou você pode adicionar a um sitemap já existente. Use o método que funciona melhor para você.”

O plugin do Yoast não gera um sitemap para imagens, mas em seus posts eles adicionam no sitemap do post a lista de imagens presentes, adicionar imagens ao sitemap ajudo o google indexar suas imagens facilmente.

Resumo

SEO para imagens é uma soma de uma série de elementos, o Google cada dia está reconhecendo melhor estes elementos nas imagens, faz sentido garantir que imagem e todos os elementos apresentados contribuem na experiência do usuário, então tome nota disso para entregar uma experiência melhor e não apenas tentar rankear melhor no Google.

Tome nota dos seguintes pontos

  • Use imagens relevantes ao texto
  • Aplique o nome correto a imagem
  • Tenha certeza que está utilizado as dimensões corretas das imagens
  • Otimize suas imagens
  • Adicione legenda a suas imagens
  • Use alt, o title é opcional
  • Adicione OpenGraph e Twitter Card
  • Use imagens no seu XML sitemap
Categorias
Eventos WordPress

Terceiro Wordtalks DRC

No dia 05 de fevereiro as 19:30 no auditório da DRC Treinamentos será realizado o terceiro Wordtalks. Para quem não conhece o evento, ele tem o seguinte forma, convidados e ex-alunos da DRC abordam assuntos sobre desenvolvimento relacionados ao WordPress.

Neste terceiro encontro terá o que rolou de melhor em 2012, mas calma as apresentações já ocorreram, em um evento “fechado” para os alunos e foram modificadas para esse encontro. Neste evento vai ter a duração de 1:50h, divido em três palestras de 30 minutos e 20 minutos para debate geral.

Para iniciar a noite como de costume, a primeira palestra será com Fellyph Cintra(eu) irá apresentar a palestra :

Utilizando o WordPress como CMS para aplicativos mobile. A palestra aborda alguns recursos disponíveis no HTML5 para a plataforma mobile e mostra como portar uma aplicação web para um dispositivo móvel.

A segunda apresentação da noite será com Luis Felipe Veiga com a apresentação: Não jogue seu projeto no lixo, Abordando pontos importantes ao contratar um plano de hospedagem para um site em WordPress e as diferenças entre os tipos de servidores.

E fechando a noite Rodrigo Simoni – Resumo da apresentação: 10 dicas de seo para WordPress. O WordPress é um ótimo CMS para trabalhar com SEO. Porém, há uma série de técnicas de SEO On Page, além de alguns plugins que são essenciais e obrigatórios para que seu site possa ganhar visibilidade e conseguir bons posicionamentos nas Serps do Google. Sitemap, Robots, URL amigáveis, canonical tags, conteúdo relevante, long tails e outras técnicas e ferramentas que farão toda a diferença.

Interessado? Para realizar a inscrição vá no seguinte link: 

http://www.drcconference.com.br/int_agenda/mostra_agenda.php?valor=043c5a5f32b221336aj42c8&valor2=cf40032f32b222576aj42c8

O encontro ocorre no auditório da DRC que fica no seguinte endereço :

Rua Joaquim Floriano, 733 – 10º Andar
São Paulo, 04534-012


Exibir mapa ampliado

Categorias
Vagas

Vaga Front-end fishy

Conhecimentos: html, css, desejavél javascript.
Noções de: SEO, usabilidade, acessibilidade.

Interessados enviar e-mail para irving[a]fishy.com.br

fonte : http://www.muqueca.blog.br/comentarios/comentarios.php?id=464