WordCamp SP 2014 - SEO para Desenvolvedores WordPress

Preview:

DESCRIPTION

Slides da palestra "SEO para Desenvolvedores" apresentada no WordCamp São Paulo 2014 para a comunidade do WordPress. Foi utilizado uma abordagem de SEO Onpage direcionada para desenvolvedores WordPress que englobam cenários de novos sites, migrações, sites existentes e de marcações de dados estruturados. Além disso, é apresentado sugestões de otimizações de SEO para sites que utilizam WooCommerce e também um direcionamento de boas práticas para acompanhamento das melhorias de SEO. Um material complementar pode ser conferido em: http://ruanbarbosa.com.br/novidades/wordcamp-sp-seo-para-desenvolvedores-wordpress/

Citation preview

SEO para Desenvolvedores Ruan Barbosa

Ruan Barbosa Formado em Física e mestrando em Educação pela

UFPR. Possui experiência na web desde 2008 e

começou a estudar SEO em 2010 após conhecer o

WordPress. Pela i-Cherry trabalhou com contas da

Tecnisa, Lopes, Meliã, Lojas KD e 3M. Atualmente é

analista SEO no marketplace Canal da Peça.

Conteúdo da Palestra

SEO para Desenvolvedores:

• Por onde começar?

• Dados estruturados

• Migração de Sites

• Dicas de SEO para WooCommerce

• Acompanhamento de Resultados

3 SEO para Desenvolvedores - WordCamp SP 2014

ONPAGE OFFPAGE

ON-PAGE OFF-PAGE

ON PAGE OFF PAGE

< />

Por onde começar?

5 SEO para Desenvolvedores - WordCamp SP 2014

• URLs amigáveis

• Hierarquia

• Tempo de carregamento

• Títulos e Metadados

• Sitemap XML

Plugin WordPress SEO

6 SEO para Desenvolvedores - WordCamp SP 2014

URLs amigáveis

7 SEO para Desenvolvedores - WordCamp SP 2014

Hierarquia

8 SEO para Desenvolvedores - WordCamp SP 2014

• Breadcrumb

• Categorização

• Sitemap HTML get_pages()

Tempo de Carregamento

9 SEO para Desenvolvedores - WordCamp SP 2014

WordCamp Porto Alegre – Israel Cefrin - 2013 WordCamp Porto Alegre – Fernando Daciuk - 2013

WordCamp São Paulo – Claudio Sanches - 2013 WordCamp Porto Alegre – Guga Alves - 2013

Títulos e Metadados

11 SEO para Desenvolvedores - WordCamp SP 2014

Regras: Edição única:

Edição em massa:

Sitemap XML

12 SEO para Desenvolvedores - WordCamp SP 2014

Odin

13 SEO para Desenvolvedores - WordCamp SP 2014

Odin e SEO • Boas práticas de

desenvolvimento

• Código limpo e

semântico

• Marcações de

dados estruturados

• Design Responsivo

• Grunt.js, Compass e

Sass.

WordCamp Belo Horizonte – Rafael Funchal - 2014 Odin Framework

DADOS ESTRUTURADOS

O site é do que?

15 SEO para Desenvolvedores - WordCamp SP 2014

...

http://schema.org/docs/full.html

Marcações schema.org

16 SEO para Desenvolvedores - WordCamp SP 2014

Itemscope=“” itemtype=“xxx”

itemprop

Itemscope - itemprop 1 - itemprop 2 - itemprop 3

Marcações schema.org

17 SEO para Desenvolvedores - WordCamp SP 2014

Exemplo de marcação:

Marcações schema.org

18 SEO para Desenvolvedores - WordCamp SP 2014

Ferramenta de dados estruturados do Google Webmaster Tools

Breadcrumbs

19 SEO para Desenvolvedores - WordCamp SP 2014

Fonte: Ruan Barbosa

Exemplo de breadcrumb com data-vocabulary:

Ferramenta de teste de dados estruturados

20 SEO para Desenvolvedores - WordCamp SP 2014

MIGRAÇÃO DE SITES

Screaming Frog SEO

22 SEO para Desenvolvedores - WordCamp SP 2014

Ferramenta Screaming Frog para verificação de links internos

Xenu

23 SEO para Desenvolvedores - WordCamp SP 2014

Ferramenta Xenu para verificação de links internos

Troca de domínio

• Redirecionar o domínio antigo para o novo (com e

sem WWW)

• Para sites com poucas URLs olhe caso a caso.

• Para sites com muitas URLs utilize regras de

redirecionamento por grupo.

24 SEO para Desenvolvedores - WordCamp SP 2014

URLs

25 SEO para Desenvolvedores - WordCamp SP 2014

WordPress SEO (by Yoast):

Não exclua páginas

ou posts. Use o

redirecionamento!

URLs

26 SEO para Desenvolvedores - WordCamp SP 2014

Plugin Redirection

Plugin SEO Redirection

Utilize o redirect 301

também para casos de

alterações em slugs de

categorias, páginas ou

posts!

Páginas Internas

27 SEO para Desenvolvedores - WordCamp SP 2014

<meta name="robots" content="noindex,nofollow"/>

• noindex: impede que a página

seja indexada.

• nofollow: evita que o Googlebot

siga os links a partir desta página.

SEO PARA

Listagem de Produtos

• Enriqueça suas páginas de listagem de produtos:

– Categorias

– Tags

– Marcas

– Arquivos

• Alguns exemplos de conteúdo:

– Descrições mais detalhadas das categorias

– Informações úteis ao usuário

– Reviews relacionados

– Notícias relacionadas

– Vídeos relacionados

29 SEO para Desenvolvedores - WordCamp SP 2014

Listagem de Produtos

30 SEO para Desenvolvedores - WordCamp SP 2014

Permitir HTML nas páginas de categorias e tags:

foreach ( array( 'pre_term_description' ) as $filter ) {

remove_filter( $filter, 'wp_filter_kses' );

}

foreach ( array( 'term_description' ) as $filter ) {

remove_filter( $filter, 'wp_kses_data' );

}

Fonte: WooCoomerce Docs

Exibir imagens nas páginas de arquivos das categorias:

add_action( 'woocommerce_archive_description', 'woocommerce_category_image', 2 );

function woocommerce_category_image() {

if ( is_product_category() ){

global $wp_query;

$cat = $wp_query->get_queried_object();

$thumbnail_id = get_woocommerce_term_meta( $cat->term_id, 'thumbnail_id', true );

$image = wp_get_attachment_url( $thumbnail_id );

if ( $image ) {

echo '<img src="' . $image . '" alt="" />';

}

}

}

Fonte: WooCoomerce Docs

Listagem de Produtos

31 SEO para Desenvolvedores - WordCamp SP 2014

Exemplo de página de categorias com conteúdo diferenciado.

Listagem de Produtos

32 SEO para Desenvolvedores - WordCamp SP 2014

Exemplo de página de categorias com conteúdo diferenciado.

Página de Produto

• O WooCommerce já vem com marcações

schema.org nas páginas de produtos!

33 SEO para Desenvolvedores - WordCamp SP 2014

Página de Produto

• O que eu poderia melhorar?

– Informando o tipo de loja

(https://schema.org/docs/full.html)

– Detalhes e descrição dos produtos com marcações

(http://schema.org/Product)

34 SEO para Desenvolvedores - WordCamp SP 2014

Página de Produto

• Adicione Vídeos (free) http://www.woothemes.com/products/html5-video/

• Estimule Reviews e Testemunhos ($29) http://www.woothemes.com/products/review-for-discount/

• Engaje seu usuários (free ou premium) https://wordpress.org/plugins/wysija-newsletters/

• Customize a sidebar (free) http://www.woothemes.com/woosidebars/

• Testemunhos (free) https://wordpress.org/plugins/testimonials-by-woothemes/

35 SEO para Desenvolvedores - WordCamp SP 2014

Quer saber mais?

36 SEO para Desenvolvedores - WordCamp SP 2014

WordCamp Porto Alegre – Claudio Sanches - 2013

ACOMPANHAMENTO

Google Webmaster Tools

38 SEO para Desenvolvedores - WordCamp SP 2014

• Avisos de problemas no site

• Acompanhamento de erros 404 e 500

• Envio de Sitemaps XML

• Dados estruturados

• Melhorias de HTML

• Links internos e externos

• Páginas indexadas

• Ferramentas

Google Analytics

39 SEO para Desenvolvedores - WordCamp SP 2014

<?php add_action('wp_footer',

'add_googleanalytics');

function add_googleanalytics() { ?>

// Inclua o código do Google Analytics aqui

<?php } ?>

Fonte: wpbeginner

Código:

Plugin:

Google Tag Manager

Algumas vantagens... Interface da web fácil de usar

Publicação em segundos

Controle de versões

Permissões para níveis de usuários

Modelo de tags

Regras de disparo

Console de depuração

Armazenamento em cache inteligente

Definição de variáveis reutilizáveis

Carregamento assíncrono de tags

40 SEO para Desenvolvedores - WordCamp SP 2014

Google Tag Manager - WordPress

41 SEO para Desenvolvedores - WordCamp SP 2014

<!-- Google Tag Manager -->

<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-MPH4NX"

height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':

new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],

j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=

'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);

})(window,document,'script','dataLayer','GTM-XXXXXX');</script> <!-- End Google Tag Manager -->

Código:

Plugin:

Exemplo de código do Google Tag Manager inserido após o <body>

Google Tag Manager - WordPress

Configurações:

42 SEO para Desenvolvedores - WordCamp SP 2014

Painel de configurações Gerais do Google Tag Manager for Wordpress

Google Tag Manager - WordPress

43 SEO para Desenvolvedores - WordCamp SP 2014

Integrações:

Opções de integrações do Google Tag Manager for Wordpress

DÚVIDAS?

http://ruanbarbosa.com.br

ruancwb@gmail.com

facebook.com/seuruan