Um site otimizado para dispositivos m\u00f3veis n\u00e3o apenas permitir\u00e1 mais visitantes usando dispositivos diferentes, mas ter um site otimizado para dispositivos m\u00f3veis tamb\u00e9m \u00e9 crucial para SEO (otimiza\u00e7\u00e3o de mecanismos de pesquisa \u2013 veja o pr\u00f3ximo item)! O Google prioriza sites compat\u00edveis com dispositivos m\u00f3veis em seus resultados de pesquisa. E em mar\u00e7o de 2020, eles anunciaram que o Google mudar\u00e1 para a indexa\u00e7\u00e3o m\u00f3vel para todos os sites em setembro de 2020<\/a>.<\/p>\n Search Engine Optimization (SEO) \u00e9 crucial nos dias de hoje para voc\u00ea que deseja que os visitantes cheguem ao seu site. Voc\u00ea precisa tornar seu site o mais alto poss\u00edvel em mecanismos de pesquisa como o Google para esperar visitantes que se convertem em clientes. Sem SEO, seu site se afogar\u00e1 em bilh\u00f5es de outras p\u00e1ginas da Web concorrentes e ningu\u00e9m saber\u00e1 ou encontrar\u00e1 seu site.<\/p>\n SEO \u00e9 otimizar seu site para aumentar a quantidade e a qualidade do tr\u00e1fego para seu site. Isso inclui t\u00f3picos como o conte\u00fado, os aspectos t\u00e9cnicos e como o exterior v\u00ea, usa e analisa seu site. \u00c9 um t\u00f3pico bastante grande, mas para esta lista de verifica\u00e7\u00e3o estou focando nos aspectos t\u00e9cnicos.<\/p>\n Voc\u00ea provavelmente usar\u00e1 (deveria) usar um plugin de SEO. Por exemplo , Yoast SEO<\/a> \u00e9 o plugin de SEO mais conhecido e usado para WordPress. Tem uma vers\u00e3o premium, mas a vers\u00e3o gratuita est\u00e1 perfeitamente bem. Um plugin de SEO deve permitir que voc\u00ea defina t\u00edtulos, meta descri\u00e7\u00e3o, palavras-chave e gere sitemaps de mecanismos de pesquisa. O Yoast SEO tamb\u00e9m analisar\u00e1 o conte\u00fado do seu post e fornecer\u00e1 dicas sobre como melhorar sua escrita para obter uma classifica\u00e7\u00e3o mais alta.<\/p>\n Mas h\u00e1 algumas coisas que voc\u00ea precisa verificar dentro do tema \u2013 algo que um plugin de SEO n\u00e3o pode consertar.<\/p>\n Uma boa estrutura HTML desempenha um papel importante em tornar um tema amig\u00e1vel para SEO. HTML \u00e9 a estrutura do conte\u00fado de uma p\u00e1gina web, independente de seu estilo. O estilo pode encobrir a estrutura HTML ruim, mas lembre-se de que os rastreadores do Google l\u00eaem o site sem estilo.<\/p>\n Uma regra importante em uma boa estrutura HTML s\u00e3o as tags de cabe\u00e7alho; O tema tamb\u00e9m deve usar tags HTML5 mais recentes, como Outro recurso muito subutilizado \u00e9 a marca\u00e7\u00e3o de esquema \u2013 geralmente chamada de microdados. A marca\u00e7\u00e3o de esquema<\/a> \u00e9 uma tecnologia para ajudar bots e rastreadores a entender o que \u00e9 conte\u00fado. Agrupar informa\u00e7\u00f5es do produto com marca\u00e7\u00e3o de esquema permite que o Google saiba especificamente onde encontrar o pre\u00e7o, as avalia\u00e7\u00f5es, a imagem do produto e muito mais. Isso permite que o Google apresente produtos de uma maneira diferente nos resultados de pesquisa. Infelizmente, \u00e9 incomum encontrar isso em um tema do WordPress, mas se voc\u00ea encontrar um tema com marca\u00e7\u00e3o de esquema, \u00e9 uma boa dica de que o desenvolvedor do tema teve SEO em mente.<\/p>\n Finalmente, o tema deve certificar-se de gerar tags adequadas em incorpora\u00e7\u00f5es de conte\u00fado rico, especialmente imagens. As imagens devem ter no m\u00ednimo A velocidade de carregamento do seu site \u00e9 muito importante para o SEO. N\u00e3o deve demorar mais de 5 segundos para terminar de carregar uma p\u00e1gina em seu site. O tema pode otimizar a velocidade da p\u00e1gina de v\u00e1rias maneiras.<\/p>\n Tenha em mente que um tema pode implementar recursos pesados \u200b\u200be, \u00e0s vezes, externos para torn\u00e1-lo atraente. Por exemplo, fontes personalizadas, \u00edcones e v\u00e1rios elementos interativos. Solicita\u00e7\u00f5es de folhas de estilo, arquivos javascript e especialmente recursos externos como, por exemplo , GoogleFonts<\/a> para fontes e Fontawesome<\/a> para \u00edcones, realmente reduzem a velocidade da p\u00e1gina.<\/p>\n O tema tamb\u00e9m deve suportar o redimensionamento das imagens que voc\u00ea envia em tamanhos diferentes e us\u00e1-las de acordo com os tamanhos de imagem necess\u00e1rios em torno do seu conte\u00fado. Carregar imagens grandes \u00e9 uma das maiores desvantagens na velocidade da p\u00e1gina. N\u00e3o faz sentido usar uma imagem em tamanho real com largura de 1900px para uma pequena miniatura no rodap\u00e9.<\/p>\n Voc\u00ea pode verificar a velocidade da p\u00e1gina com outra das ferramentas gratuitas do Google: PageSpeed \u200b\u200bInsights<\/a>. Insira a URL do site de demonstra\u00e7\u00e3o do tema e clique em Analisar. Deixe-o funcionar e voc\u00ea deve receber uma nota e um relat\u00f3rio de coisas que voc\u00ea pode fazer para corrigir quaisquer problemas que diminuam a velocidade da p\u00e1gina. Lembre-se de verificar os relat\u00f3rios Mobile e Desktop. A velocidade da p\u00e1gina em dispositivos m\u00f3veis \u00e9 hoje em dia mais importante; tanto porque os dispositivos m\u00f3veis geralmente usam dados m\u00f3veis (que custam dinheiro) quanto porque a compatibilidade com dispositivos m\u00f3veis \u00e9 importante. Voc\u00ea n\u00e3o pulou o item anterior da lista de verifica\u00e7\u00e3o, certo?<\/p>\n Acessibilidade \u00e9 tornar seu site acess\u00edvel para todos os tipos de visitantes, incluindo aqueles com defici\u00eancia – sejam ou n\u00e3o deficientes auditivos, deficientes visuais e muito mais. H\u00e1 um conjunto internacional de diretrizes chamado Web Content Accessibility Guidelines (WCAG) que descreve como os sites devem implementar a acessibilidade. Ao n\u00e3o estar em conformidade com as WCAG, voc\u00ea est\u00e1, na verdade, infringindo uma s\u00e9rie de leis e regulamentos em escala internacional (porque os visitantes do seu site podem vir de qualquer lugar do mundo).<\/p>\n As diretrizes descrevem um grande conjunto de especifica\u00e7\u00f5es e requisitos t\u00e9cnicos para um site. A conformidade com as WCAG \u00e9 pontuada em tr\u00eas n\u00edveis; A, AA e AAA. O n\u00edvel AAA \u00e9 o n\u00edvel mais baixo aceit\u00e1vel de acessibilidade, enquanto o n\u00edvel A \u00e9 considerado acess\u00edvel de alto n\u00edvel, mas o n\u00edvel A imp\u00f5e fortes limita\u00e7\u00f5es ao design, recursos e conte\u00fado rico. A maioria dos sites, a menos que sejam direcionados a pessoas com defici\u00eancia, n\u00e3o est\u00e3o se esfor\u00e7ando para alcan\u00e7ar o n\u00edvel A em acessibilidade.<\/p>\n Seu tema deve atingir, no m\u00ednimo, o n\u00edvel AAA. Voc\u00ea pode verificar os n\u00edveis de acessibilidade em um site usando uma ferramenta gratuita chamada WAVE, dispon\u00edvel como extens\u00f5es para Chrome e Firefox<\/a>. Uma vez instalado em seu navegador, voc\u00ea pode visitar o site de demonstra\u00e7\u00e3o do tema, executar a verifica\u00e7\u00e3o e verificar o relat\u00f3rio.<\/p>\n Relat\u00f3rio WAVE do meu site. Aparentemente eu tenho algo para trabalhar!<\/p>\n O WordPress possui um editor de menus integrado para criar menus e coloc\u00e1-los em torno do seu tema. O tema escolhido n\u00e3o deve apenas suportar este editor de menus, mas tamb\u00e9m fornecer locais para coloca\u00e7\u00e3o de menus.<\/p>\n No m\u00ednimo, o tema deve fornecer um local de menu; o menu principal. O menu principal geralmente est\u00e1 localizado em algum lugar no topo do cabe\u00e7alho. \u00c9 comum tamb\u00e9m permitir menus adicionais no cabe\u00e7alho, por exemplo, menu de suporte. A adi\u00e7\u00e3o de menus a outros locais geralmente pode ser resolvida adicionando um widget de menu \u2013 se o tema suportar widgets (consulte o pr\u00f3ximo t\u00f3pico).<\/p>\n PS: Voc\u00ea se lembra do item 1. compatibilidade com dispositivos m\u00f3veis da lista de verifica\u00e7\u00e3o mencionando o menu m\u00f3vel? Verifique se o local do menu principal se converte bem em um menu m\u00f3vel. Se o tema permitir menus de suporte, eles tamb\u00e9m devem ser inclu\u00eddos no menu m\u00f3vel, e n\u00e3o apenas desaparecer.<\/p>\n Outro recurso embutido no WordPress s\u00e3o os widgets \u2013 pequenos trechos de conte\u00fado que podem ser colocados dentro de \u00e1reas de widget definidas. Assim como nos menus, o tema deve adicionar especificamente suporte para widgets e adicionar pelo menos uma \u00e1rea de widget.<\/p>\n As \u00e1reas comuns do widget est\u00e3o no rodap\u00e9 e na barra lateral, se o tema apresentar um layout de barra lateral.<\/p>\n Verifique se o tema permite colocar widgets onde voc\u00ea precisar. \u00c9 comum colocar menus e informa\u00e7\u00f5es adicionais no rodap\u00e9, e no WordPress isso geralmente \u00e9 feito usando widgets.<\/p>\n Este \u00e9 um recurso obviamente necess\u00e1rio que o tema precisa suportar: Voc\u00ea deve ser capaz de fazer upload de sua pr\u00f3pria imagem de logotipo e coloc\u00e1-la no cabe\u00e7alho.<\/p>\n O WordPress tem um recurso de upload de logotipo personalizado no Customizer, mas cabe ao tema adicionar suporte para isso. Se o tema n\u00e3o suportar a ferramenta WordPress, ele deve suportar alguma forma alternativa. Muitos temas t\u00eam suas pr\u00f3prias configura\u00e7\u00f5es de tema, seja no WordPress Customizer ou como uma p\u00e1gina de administra\u00e7\u00e3o separada. Seja qual for o m\u00e9todo usado pelo tema, certifique-se de que voc\u00ea pode fazer o upload do seu logotipo.<\/p>\n Permitir que os visitantes do site pesquisem \u00e9 muito mais importante do que costumava ser. A menos que seu conte\u00fado e menus sejam extremamente otimizados e alinhados, as pessoas geralmente apenas pesquisam em vez de clicar.<\/p>\n O WordPress possui um mecanismo de pesquisa interno para pesquisar todo o conte\u00fado e modelos prontos para uso para o formul\u00e1rio de pesquisa e os resultados da pesquisa. Mas, novamente, cabe ao tema implementar isso.<\/p>\n \u00c9 comum oferecer uma entrada de pesquisa em seu site, geralmente localizada pr\u00f3ximo ao topo do cabe\u00e7alho. A funcionalidade de pesquisa vem em v\u00e1rias formas; uma entrada de pesquisa no cabe\u00e7alho (ou rodap\u00e9) ou um \u00edcone de pesquisa que revela uma entrada de alguma forma. Se o tema n\u00e3o oferecer uma entrada de pesquisa automaticamente, voc\u00ea sempre poder\u00e1 adicionar um widget de pesquisa \u2013 desde que o tema suporte widgets (item 5 da lista de verifica\u00e7\u00e3o).<\/p>\n O WordPress CMS suporta uma grande variedade de modelos para exibir seu conte\u00fado de diferentes maneiras. \u00c0 medida que seu site cresce, voc\u00ea achar\u00e1 mais necess\u00e1rio se apoiar em modelos como arquivos e resultados de pesquisa.<\/p>\n Certifique-se de que o tema implemente uma boa parte dos modelos padr\u00e3o do WordPress e que todos tenham uma boa apar\u00eancia. Verifique modelos como categoria, tags, arquivos de data e resultados de pesquisa. Eles devem indicar claramente que tipo de arquivo estamos analisando e exibir o conte\u00fado bem e com funcionalidade de pagina\u00e7\u00e3o.<\/p>\n Se voc\u00ea deseja habilitar coment\u00e1rios, o tema deve ter implementado e projetado adequadamente esses modelos tamb\u00e9m.<\/p>\n Voc\u00ea provavelmente tem um conjunto definido de cores que deseja usar em seu site \u2013 geralmente as mesmas cores encontradas em seu logotipo. Marcar seu site com seu logotipo \u00e9 o m\u00ednimo (item 6 da lista de verifica\u00e7\u00e3o), mas o tema tamb\u00e9m deve permitir que voc\u00ea escolha algumas das cores do tema. Assim, voc\u00ea obt\u00e9m um design mais coerente quando os links, bot\u00f5es e outros elementos de design s\u00e3o as cores da sua marca.<\/p>\n N\u00e3o h\u00e1 suporte embutido no WordPress para definir um conjunto de cores usadas no tema. Os desenvolvedores de temas precisam desenvolver suporte para isso por conta pr\u00f3pria. As cores geralmente s\u00e3o definidas nas folhas de estilo do tema e o desenvolvedor deve encontrar uma solu\u00e7\u00e3o para substituir essas vari\u00e1veis \u200b\u200bde cores pelas cores escolhidas por voc\u00ea no admin.<\/p>\n Este \u00e9 um recurso bastante dif\u00edcil de implementar e pode ser resolvido de v\u00e1rias maneiras \u2013 de boas a ruins. Uma solu\u00e7\u00e3o ruim seria gerar uma grande quantidade de sobrecarga de estilo simplesmente substituindo e duplicando o estilo com cores personalizadas. Um arquivo de folha de estilo grande ou v\u00e1rias folhas de estilo t\u00eam impacto na velocidade da p\u00e1gina (consulte o item 2 da lista de verifica\u00e7\u00e3o). Uma boa solu\u00e7\u00e3o seria incorporar alguma maneira de substituir as vari\u00e1veis \u200b\u200bde cor e gerar novamente uma folha de estilo limpa ao escolher diferentes cores personalizadas.<\/p>\n Os dias em que um site apresentava conte\u00fado \u00e0 esquerda e uma barra lateral direita, independentemente da p\u00e1gina em que voc\u00ea estivesse, se foram. Sites modernos apresentam layouts diferentes: uma p\u00e1gina inicial de largura total, artigos com uma ou mais barras laterais, artigos sem barra lateral ou qualquer tipo de configura\u00e7\u00e3o de coluna diferente.<\/p>\n Este item da lista de verifica\u00e7\u00e3o depende do design e das necessidades do seu site. Se o seu site for um site pequeno com um requisito m\u00ednimo de layouts diferentes, isso n\u00e3o importa tanto. Mas quanto mais conte\u00fado seu site tiver, mais voc\u00ea encontrar\u00e1 a necessidade de criar p\u00e1ginas de destino com designs diferentes.<\/p>\n Se o tema apresentar uma barra lateral, deve ser poss\u00edvel, no m\u00ednimo, escolher post-a-post se deseja ou n\u00e3o ir na largura total (remover a barra lateral) ou n\u00e3o. Com o Gutenberg (veja o pr\u00f3ximo item da lista de verifica\u00e7\u00e3o) agora \u00e9 mais f\u00e1cil criar p\u00e1ginas de destino de largura total \u2013 se o tema suportar isso.<\/p>\n Meu tema autodesenvolvido para A White Pixel apresenta op\u00e7\u00f5es de layout para postagens<\/p>\n Quando o WordPress lan\u00e7ou a vers\u00e3o 5.0 em dezembro de 2018, veio com um editor de posts totalmente novo \u2013 chamado Gutenberg. O editor Gutenberg revolucionou a maneira como voc\u00ea pode criar conte\u00fado, permitindo que voc\u00ea crie facilmente se\u00e7\u00f5es com imagem ou cores de fundo, conte\u00fado rico, colunas e muito mais. Coisas assim n\u00e3o eram poss\u00edveis antes.<\/p>\n No entanto, como o Gutenberg requer uma linguagem de programa\u00e7\u00e3o diferente (Javascript, React) da linguagem com a qual o WordPress foi originalmente criado (PHP), o suporte na comunidade de desenvolvimento tem sido lento. No entanto, \u00e9 o ano de 2020 e o tema deve apoiar Gutenberg.<\/p>\n H\u00e1 uma abund\u00e2ncia de temas WordPress por a\u00ed que dependem de construtores de p\u00e1ginas, como Visual Composer, Elementor e Divi. O Gutenberg praticamente torna esses plugins redundantes. Fa\u00e7a um favor a si mesmo e n\u00e3o escolha um tema que exija um plugin do construtor de p\u00e1ginas, pois voc\u00ea pode obter os mesmos resultados com a nova funcionalidade padr\u00e3o do WordPress.<\/p>\n Este item do checklist \u00e9 para voc\u00ea que deseja um site em um idioma diferente do ingl\u00eas. N\u00e3o se esque\u00e7a que mesmo que voc\u00ea escreva todo o seu conte\u00fado em um idioma diferente, o tema geralmente inclui alguns textos no frontend, como “Leia mais", “Visualizar”, “Pr\u00f3xima p\u00e1gina” e assim por diante. Se for importante implementar totalmente um idioma diferente para os leitores, verifique se o tema est\u00e1 pronto para tradu\u00e7\u00e3o.<\/p>\n Existem diferentes maneiras de traduzir um tema. Se voc\u00ea \u00e9 um desenvolvedor, \u00e9 uma quest\u00e3o de usar fun\u00e7\u00f5es textdomain em seu tema e adicionar um Mas tudo isso requer que o tema seja escrito com suporte para tradu\u00e7\u00e3o de suas strings.<\/p>\n Se voc\u00ea chegou at\u00e9 aqui com um visto verde em cada um dos 12 itens da lista de verifica\u00e7\u00e3o acima, voc\u00ea escolheu um bom tema! O tema suporta a funcionalidade padr\u00e3o do WordPress e atende aos requisitos de um site para 2020 quando se trata de SEO, acessibilidade e compatibilidade com dispositivos m\u00f3veis.<\/p>\n Se o seu tema est\u00e1 faltando em algumas \u00e1reas, invista algum tempo procurando como resolv\u00ea-lo de maneiras alternativas ou continue procurando outro tema. Se voc\u00ea \u00e9 um desenvolvedor, esta lista de verifica\u00e7\u00e3o deve fornecer algumas diretrizes sobre os requisitos m\u00ednimos para criar um bom tema WordPress.<\/p>\n2 amig\u00e1vel para SEO<\/h2>\n
Boa estrutura HTML<\/h3>\n
h1<\/code>, h2<\/code>, e assim por diante at\u00e9 h6<\/code>. Os t\u00edtulos devem ser usados \u200b\u200bpara informar sobre uma nova se\u00e7\u00e3o e sobre o que ela trata, e as tags devem estar em ordem (por exemplo, seu conte\u00fado n\u00e3o deve pular de h2<\/code>para h4<\/code>sem um meio- h3<\/code>termo). h1<\/code>deve ser reservado para o t\u00edtulo mais importante; geralmente o t\u00edtulo do post ou o nome do site. E h2<\/code>deve ser usado para servir os t\u00edtulos mais importantes dentro deste post. Embora o Google tenha anunciado que permite v\u00e1rias h1<\/code>tags (de acordo com as diretrizes para HTML5), ainda \u00e9 comum garantir que h1<\/code>exista apenas uma em cada p\u00e1gina.<\/p>\n<header><\/code>, <main><\/code>, <footer><\/code>, <aside><\/code>pois elas fornecem informa\u00e7\u00f5es sem\u00e2nticas ao Google sobre o que realmente \u00e9 um conte\u00fado espec\u00edfico.<\/p>\nalt<\/code>-tags. As tags Alt s\u00e3o usadas para descrever a apar\u00eancia e a fun\u00e7\u00e3o de uma imagem em uma p\u00e1gina. Lembre-se de que os rastreadores de mecanismos de pesquisa n\u00e3o podem interpretar imagens como os humanos.<\/p>\nVelocidade da p\u00e1gina<\/h3>\n
3 Acessibilidade<\/h2>\n
![\"Lista](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153404-61e50d2db3e82.png\")
<\/a><\/p>\n4 Menus<\/h2>\n
![\"Lista](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153404-61e50d30990dc.png\")
<\/a><\/p>\n5 Suporte a widgets<\/h2>\n
![\"Lista](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153404-61e50d31d9baa.png\")
<\/a><\/p>\n6 logotipo personalizado<\/h2>\n
![\"Lista](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153404-61e50d32d3134.png\")
<\/a><\/p>\n7 Pesquisa<\/h2>\n
8 modelos padr\u00e3o<\/h2>\n
9 cores personalizadas<\/h2>\n
10 op\u00e7\u00f5es de layout<\/h2>\n
![\"Lista](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153404-61e50d339e9e4.png\")
<\/a><\/p>\n11 Suporte ao Gutenberg<\/h2>\n
12 Pronto para tradu\u00e7\u00e3o<\/h2>\n
.pot<\/code>ou .po<\/code>-file. Se voc\u00ea \u00e9 um usu\u00e1rio de tema com pouco ou nenhum conhecimento de c\u00f3digo, existem maneiras alternativas. Voc\u00ea pode, por exemplo, usar o plugin Loco Translate<\/a> para acessar diretamente os arquivos de tradu\u00e7\u00e3o do tema. Ou voc\u00ea pode usar o WPML<\/a> ou outros plugins para criar um site multil\u00edngue.<\/p>\n
\nConclus\u00e3o<\/h2>\n