Karayô News

Karayô News

Template wordpress amp para blog em geral, notícias e receitas. Excelente desempenho nos resultados orgânicos, discovery e webstories.


Introdução

Este tema foi desenvolvido utilizando tecnologia Google AMP nativa. Isso significa que ele só tem uma versão web, esta é a versão amp.

diferente de outros templates amp que possuem duas versões, este é um projeto que tem o benefício de não gerar erros decorrentes de canonical e muito menos duplicidade de conteúdos o que acaba sendo um problema mesmo demarcando as canonicas.

Este projeto ainda esta na versão beta, no entanto existem dezenas de websites que ja utilizam este modelo de tema, e os resultados orgânicos vem sendo surpriendentes.


Benefícios do Tema

Utilizar este template pode ser um diferencial significativo se o seu foco é resultados orgânicos, dediquei certo tempo e habilidades únicas minhas para construi-lo, você pode contar com os seguintes benefícios neste projeto:

  • Hierarquia do HTML5 + Amphtml;
  • Semântica muito bem planejada no quesito categorias  e posts;
  • Dados estruturados completos em um sistema exclusivo de cadastro;
  • Sistema de Post padrão do WordPress;
  • Compatibilidade com plugins amp diversos;
  • Sistema de Webstories Nativo;
  • Sistema de Webstories Semi-Auto;
  • Tecnologia Google Amp;
  • Integração com Sitemas xml e google-news;
  • Integração com Indexador instantâneo via Google API;
  • Integração com Search Console;
  • Integração com Google Analytics;
  • Integração com Google Adsense e uso do Auto-Ads (só disponível no amp);
  • Notas Razoavelmente boas junto ao core webvitals;
  • Direito a todos os updates futuros;
  • Suporte Exclusivo 1 a 1.
Trabalha com meus temas é uma libertação inquestionavel para muitos fins, claro que sempre é possível melhorar o que já da resultados a muitas pessoas, no entanto é importante entender que tudo demanda de tempo e testes.

Instalação do Template

Para instala-lo é bastante simples, navegue no seu Dashboard até Aparências > Temas  e envie o arquivo karayo.zip que você baixou da área de membros da Old School.

 

Após instalar o template você vai notar que o tema pede que você instale alguns plugins que são requisitos para o seu funcionamento. Basta fazer a instalação e ativar todos os plugins solicitados pelo tema.

Note: Você não precisa configurar nada ainda, vamos fazer a configuração juntos a partir deste tutorial

Campos Personalizados

Após instalar o Advanced Custom Field você precisa carregar os arquivos de campos personalizados conforme imagem abaixo! Para isso navegue no seu Dashboard > Campos Personalizados > Ferramentas e Importe o arquivo Campos ACF.json

Se você importou já importou os campos conforme a imagem acima note que precisamos salvar a estrutura de campos personalizados que utilizaremos no tema junto ao banco de dados.

Agora é a hora de você acessar cada um dos sub-menus conforme imagem abaixo clicar no botão azul “Atualizar”. Fazendo este processo você garante que todas as informações padrões e campos do projeto sejam salvos no banco de dados do seu wordpress.


Configuração do Plugin do Amp

Para que o Template se torne uma versão única do Amp utilizaremos o plugin do Gogole Amp do Gogole para enfileirar todos os scripts necessarios e configurar a validação do amp em todas as paginas do website.

Pode parecer complexo, mas é simples e rápido, vamos lá! Navegue no seu Dashboard > Amp > Configurações e você vai se deparar com esta tela, clique em Reabrir Assistente de Configurações conforme imagem abaixo

Após reabrir o assitente de configurações ou Abrir você vai se deparar com a tela a seguir: Clique em Seguinte

 

Agora marque a seguinte box: Desenvolvedor ou Técnicamente Experiente conforme imagem abaixo e novamente Clique em Seguinte

Se tudo deu certo até você vera uma imagem como a que esta abaixo, selecione a opção Padrão e novamente Clique em Seguinte

Agora basta finalizar o processo de configuração básica do Amp, Clique em Finalizar

Navegando até configurações avançadas e assinale as seguintes opções para validar os tipos de conteúdos que deseja transformar em Amp Nativo.

 

Note que você deve navegar até a opção desenvolvedor e desmarcar as opções abaixo já que você não é desenvolvedor e não entende porra nenhuma de amp.

 

Pronto a sua configuração de compatibilidade com o Gogole Amp esta 100% configurada para o template.

Configuração do XML Sitemap

As configurações do plugin que gera os sitemaps deve respeitar as configurações conforme imagem abaixo.

 

Outra situação importante a ser considerada é a configuração do sitemap para news caso o seu website trabalhe com este tipo de conteúdo. Para isso navegue no seu Dashboard > Configurações > Leitura e marque as opções conforme a imagem abaixo.

Pronto o seu sitemap já esta configurado, agora basta pegar o caminho de cada um deles clicando em Ver, copiando o Link e adicionando junto a sua conta no Google Search Console 


Como Configurar os Menus

Para que você consiga criar os Menus corretamente é importante fazer exatamente conforme este guia. Para isto navegue no Dashboard > Aparências > Menus e Criar um novo menu conforme imagem abaixo.

 

Note que cada menu deve ter os nomes idênticos aos caracteres apresentados na box. Se você não fizer exatamente com a nomenclatura citada abaixo vai ter erros…

Exemplo:

  1. Menu Desktop
  2. Menu Mobile
  3. Menu Rodape

Template

Se você chegou até aqui é para o template estar 100% configurado já, basta apenas alguns ajustes técnicos relacionados a estilos e integrações para que você tenho a ferramenta pronta para o trabalho.

Ao acessar o Dashboard > Template você vai se deparar com algumas informações relacionadas ao tema que deixei lá junstamente para facilitar algumas possíveis dúvidas que possam vir a surgir e você não ter que sair do seu painel para encontrar uma resposta.

Em resumo são apenas informações técnicas e de usabilidade, de uma lida lá. ‘-‘

 


Cabeçalho

Nada complexo, basta entrar com suas informações de preferencia para configurar a aparência do Menu Desktop,  coloração para os itens citados acima.

Nada complexo, basta entrar com suas informações de preferencia para configurar a aparência do Menu Mobile,  coloração para os itens citados acima.


Post Colors

Considere estes campos apenas para fins de definição dos estilos de coloração e font utilizadas no projeto. Note que a fonte definida como padrão para o projeto é a Roboto, Sans-serif e não recomendo que mude a não ser que tente adaptar outra fonte do próprio Google.


Pagina Inicial

Nesta etapa definiremos as informações relacionadas ao que vai ser apresentado na pagina inicial do tema, na imagem abaixo você pode definir um título para pagina inicial e uma pequena descrição, sendo o título aplicado a uma tag H1 e a descrição aplicada a uma tag H2, potanto não exagere muito no comprimento da descrição 😉

Se o projeto que você esta desenvolvendo é relacionado a receitas segue um exemplo simples de como configurar estas informações

Neste caso estamos definido o looping de publicações referente ao segundo bloco da pagina inicial

Já neste caso configuramos o último looping disponível da home

Não poderiamos de deixar o SEO Manual por fora, para isso preencha as informações referente ao Título e descrição que você deseja que seja apresentado no Google para pagina inicial do website conforme imagem abaixo:

Você pode consultar o tema demo de receitas que esta hospedado no FINODOBINO

 


Mídias

Na sessão de configuração de mídias é importante que você preencha todos os campos de imagens com as reespectivas imagens e dimensões solicitadas em cada um dos campos.

Note que é importante que todos os campos sejam preenchidos, tire um tempo para criar as imagens solicitadas pois elas fazem total diferença no que dis respeito ao preenchimento de informações como os dados estruturados, snippets de serp para webstories, carrosseu e outros fins…

Nesta etapa não tem segredo tambem, basta seguir as dimensões de imagens solicitadas e de preferência enviar arquivos no formato webp. Caso não você não tenha um conversor de imagens webp utilize o Squoosh para isso.


Integrações Search Console

A integração junto ao google webmasters para que você possa enviar os sitemaps do seu website podem ser feitas de duas maneiras sendo elas:

  1. Via Meta Tag gerada no Search Console
  2. Arquivo Txt que deve ser cadastrado junto ao DNS no servidor.

 

  • Meta Tag: Ao pegar a meta tag gerada no cadastro junto ao search console você deve cadastrar o seu domínio e apenas as informações que estão contidas entre as ” ” na meta tag gerada no search console conforme imagem abaixo:

 

  • Arquivo Txt: Caso a validação via meta tag não tenha sido valida, o que ocorre parcialmente em alguns projetos, você pode acessar o seu servidor e navegar até DNS e inserir manualmente o código do arquivo txt gerado pelo google. Desta forma sua conta sera validada junto ao Google Webmasters e você pode acompanhar as informações de indexação do seu projeto, e enviar os sitemaps.

Integração com Google Analytics

Se você já possui uma conta no Gogole Analytics basta cadastrar o seu domínio lá e gerar o código de acompanhamento e adicionar-lo no campo conforme imagem abaixo:


Integração com Facebook Pixel

Para gerar seu pixel você pode pesquisar por um dos milhares de tutoriais no youtube, de posse do seu pixel basta cadastra-lo conforme imagem abaixo:


Integração com Google Adsense

A integração com o Gogole adsense neste projeto esta preparada para veicular anuncios amp-auto-ads desta forma é importante que você faça o cadastro da sua conta  Google Adsense e em seguinda configure seu domínio na plataforma do adsense para o formato AMP. Note que os 2 únicos códigos que você vai precisar para apresentar anuncios com o amp-auto-ads são iguais aos códigos da imagem abaixo:

Note que o seu script do body tem que ter o ca-pub com o seu  número de publisher.

O que é mais legal é que nesse formato você pode definir la no adsense mesmo onde quer que os anuncios sejam veiculados junto ao seu projeto e onde você não quer que apareça e o google de maneira aleatória vai definir os melhores lugares e anuncios parao seu projeto apenas respeitando os lugares onde você não quer que eles apareçam.

Para configurar esta situação você pode configurar o seus anuncios do amp-auto-ads em uma tela como esta la no Google Adsense mesmo

 

Sempre que você começa um projeto novo o Google exige que você tenha no mínimo 20 artigos muito bem escritos e não podem haver plagios de conteúdo ou imagem nestes artigos. Apos publicar estes artigos você pode solicitar a sua aprovação junto ao Gogole Adsense e aguardar a resposta do Google que pode levar até 15 dias.

  • Ele pode recusar algumas vezes a sua solicitação de parceria para o google adsense, logo procure fazer as coisas conforme as políticas e exigências do adsense para ter o seu domínio aceito o mais rapido possível.
  • há casos de pessoas que precisam enviar diversas vezes a solicitação de parceria pois são recusados diversas vezes, procure não deixar categorias sem conteúdo, ter suas paginas de cookies e políticas bem completas e construir um projeto de qualidade.

Integração com o Stories Nativo

Neste template temos disponíveis 3 formas de criar webstories, sendo 1 delas com o plugin do Webstories feito pelo Gogole 1 opção feita de forma semi automática para o modelo de recipes ( receitas ) e uma última alternativa é criando manualmente stories através do costrutor personalizado que desenvolvi.

Para começar a integração com os anuncios do adsense junto aos webstories em geral você precisara criar um bloco de anuncios responsivo na sua conta do adsense e pegar as informações referentes a ele e adicionar no campo Webstories AutoAds conforme imagem abaixo:

Feito isso os webstories nativos do tema vão veicular o anuncio que você criou com o bloco responsivo em todos os webstories que você criar utilizando o modelo Stories Para Receitas e Stories Curiosidades

Caso você vá criar seus webstories utilizando o plugin do Google Webstories ai você configura as informações do bloco de anuncio responsivo que você criou lá no próprio plugin.


Como Criar um Post Para Blog?

Publicações de Blog são simples de fazer, seguem o modelo padrão wordpress de criação você precisa estar atento apenas a algun detalhes a serem preenchidos:

  • Título
  • Url
  • Conteúdo
  • Categoria
  • Resumo
  • Imagem destaque no formato Webp e nas proporções de 1200 x 630 são obrigatórios.
  • NÃO USE TAG NENHUMA PARA PUBLICAÇÕES DE NEWS E POST DE BLOG OU DE QUALQUER OUTRA NATUREZA QUE NÃO SEJA RECEITAS.

Agora que você já construiu o seu artigo preste atenção as informações referente ao seo manual que é exatamente o que vai aparecer nos resultados da pesquisa do Gogole, não deixe de preencher estas informações:

Ainda na parte de otimização escolha que tipo de dado estruturado vai compor o seu post de blog:

  • News
  • Article
Escolha apenas um entre estes schemas disponíveis o Google Não gosta de serviço porco.

Caso seu artigo tenha vídeos, adicione o vídeo  através do botão Adicionar Mídia e informe o caminho da URL do vídeo. Neste caso você pode habilitar o schema de vídeo e preencher as informações subsequentes que forem carregadas relacionadas aos dados estruturadso do vídeo.

Ao optar por criar um webstories manual com o modelo nativo do tema utilize o  modelo de Stories Curiosidades


Como Criar Um Post Para News?

As publicações para News seguem o mesmo padrão do post para blog, no entanto o que difere é que você vai selecionar o Atributo de Post como Post Para News e ao definir o schema vai marca-lo como News.

Este formato de post tambem não permite que você utilize tags, isso é importante pelo amor de Deus não use tags, no Modelo de Post Padrão e nem no Modelo de Post Para News

Ao optar por criar um webstories manual com o modelo nativo do tema utilize o  modelo de Stories Curiosidades


Como Criar Um Post Para Recipes?

Para cadastrar uma receita você vai selecionar o Atributo de Post como Post Para Receitas note que os schemas para recipes ja estão 100% configurados neste modelo de pagina e você não precisa habilitar nada por aqui, basta preencher as informações referente ao cadastro da receita.

Não vou entrar em detalhes por aqui pois você pode navegar entre as abas e preencher as informações que os campos pedem, não tem segredo! Inclusive já pode preparar o Storie para ser publicado a partir do cadastro da receita!

Sensacional né?


Como Cadastrar Produtos Para Indicação

Update de 11/03/2022 trouxe uma atualização importante com o objetivo de monetizar posts e stories publicados no modelo “Stories Para Receitas”.

O cadastro é feito através do Dashboard > Meus Produtos > Adicionar Novo

Neste cadastro você não precisa escrever um artigo sobre o produto, vai apontar diretamente com o seu link de afiliado para pagina de vendas criada pelo fornecedor.

O Legal é que você pode recomendar este produto em qualquer post que você for fazer, seja ele no Modelo:

  • Post Para Receitas
  • Post Para News
  • Post Para Produtos

Um situação importante neste cadastro é que você suba uma imagem respeitando exatamente as Medidas de 720 x 1280, isso porque esta mesma imagem alem de aparecer no post que você habilitar para aparecer, tambem pode ser usada como imagem no webstorie quando for publica-lo.

Assim as chances de converter este anuncio em vendas são bem maiores, e o nosso objetivo aqui é maximizar a monetização do projeto, seja com receita proveniente do adsense ou da venda como afiliado indicando um produto.

 

Como indicar um produto no post?

Para mostrar o produto cadastrado em um post de receitas, news ou até mesmo de produtos  habilite o botão de produto conforme imagem abaixo e selecione o produto desejado:

Ao habilitar o produto para ser apresentado na publicação ele sera apresentado conforme banner que você criou, descrição e título como na imagem abaixo

Como indicar um produto no modelo de storie para receitas?

O processo é exatamente o mesmo, mas desta vez nos stories que podem ser acessados pelo Dashboard > Meus Stories e pode ser habilitado conforme imagem abaixo:

 

O resultado sera a apresentação do banner no meio do storie…

O legal é que o trafego dos stories são bem intensos, e dependendo da sua sorte você pode veicular este anuncio de produto gratuitamente para centenas de milhares de pessoas, o que é um potêncial bem grande de gerar vendas…

Como Habilitar o Suporte Para Imagens Avif

Acesse o dashboard > Configurações > Mime Type Settings e adicione  a linha conforme imagem abaixo e salve