Pular para o conteúdo
CMSKite

Adicione seu blog com duas linhas

Duas linhas numa página do seu site mostram seus posts ali, com as fontes e cores do próprio site. A lista fica nessa página; um post abre na mesma página, com endereço próprio. Tudo abaixo é opcional: as duas linhas funcionam do jeito que estão.

Atualizado em

Nesta página
  1. As duas linhas
  2. Onde colar
  3. O que isso faz pelos buscadores
  4. Endereços como /blog/meu-post
  5. Um post em qualquer página
  6. Um sitemap para os seus posts

As duas linhas

As suas duas linhas, já com o nome do seu blog, estão na página Conectar seu site do painel. Elas são assim:

html
<div id="cmskite-blog"></div>
<script src="https://cmskite.com/embed.js" data-blog="seu-blog" async></script>
AtributoO que faz
data-blogO nome do seu blog. O único obrigatório.
data-pathDá a cada post um endereço como /blog/meu-post. Veja abaixo.
data-paramO nome em ?post=meu-post, se post conflitar com algo do seu site.
data-accentUma cor para links e rótulos, por exemplo #2563eb.
data-targetO id do elemento onde o blog é desenhado, se não for cmskite-blog.
data-postO slug de um post: mostra só esse post, em qualquer lugar. Veja abaixo.

Onde colar

Crie uma página chamada Blog no seu site e cole as duas linhas na caixa que sua plataforma oferece para código. Cada plataforma tem uma página com os passos e as particularidades dela:

PlataformaOnde as duas linhas entramPassos
WordPressUm bloco HTML personalizado na página do blogCMSKite para WordPress
WixElementos → Incorporar código → HTML incorporadoCMSKite para Wix
ShopifyUm modelo de página só para o blog, com uma seção Custom LiquidCMSKite para Shopify
WebflowUm elemento Code Embed na página do blog (exige um plano de site pago)CMSKite para Webflow
SquarespaceUm bloco de código na página do blog (plano Core ou superior)CMSKite para Squarespace
LovableNada para colar: copie o prompt pronto do painel para o chat do LovableCMSKite para Lovable
Qualquer página HTMLEm qualquer ponto do body da página, onde os posts devem aparecerEsta página

O que isso faz pelos buscadores

Com um post aberto, o script passa para a sua página o título e a descrição do post, um link canônico para o único endereço do post no seu site e dados estruturados de Article (título, descrição, imagem, autor, datas de publicação e de atualização), os mesmos que a página do seu blog gratuito tem. O Google executa o script quando renderiza a página, então lê tudo isso.

Depois que sua página mostra os posts, a página do seu blog gratuito em cmskite.com aponta os buscadores para o seu site, e assim as duas nunca disputam o mesmo post.

Endereços como /blog/meu-post

Por padrão, o endereço de um post é a página do blog mais ?post=meu-post. Isso funciona em qualquer lugar, e o Google indexa. Se a sua hospedagem permite uma regra de reescrita, você pode ter /blog/meu-post: adicione data-path="/blog" (o caminho da sua página do blog) à tag do script e configure o servidor para responder a todo endereço /blog/… com a própria página do blog.

html
<div id="cmskite-blog"></div>
<script src="https://cmskite.com/embed.js" data-blog="seu-blog" data-path="/blog" async></script>

Links antigos com ?post= continuam funcionando, e o link canônico deles aponta para o endereço novo. A regra de reescrita para cada hospedagem:

  1. WordPress

    A página do blog precisa ser a página com o slug blog. Adicione isto com o plugin Code Snippets (ou no functions.php do tema), depois abra Configurações → Links permanentes e clique em Salvar alterações uma vez.

    php
    add_action('init', function () {
      add_rewrite_rule('^blog/([^/]+)/?$', 'index.php?pagename=blog', 'top');
    });
  2. HTML simples no Apache (.htaccess)

    Junto dos arquivos do site. Use o arquivo que a sua página do blog realmente é.

    apache
    RewriteEngine On
    RewriteRule ^blog/[^/]+/?$ /blog/index.html [L]
  3. HTML simples no Nginx

    Dentro do bloco server { } do seu site; depois recarregue o Nginx.

    nginx
    location ~ ^/blog/[^/]+/?$ {
      try_files /blog/index.html =404;
    }
  4. Netlify ou Cloudflare Pages (_redirects)

    Um arquivo chamado _redirects na raiz do que você publica. O 200 faz disso uma reescrita, não um redirecionamento.

    plain
    /blog/*  /blog/index.html  200
  5. Vercel (vercel.json)

    Na raiz do projeto.

    json
    { "rewrites": [{ "source": "/blog/:slug", "destination": "/blog/index.html" }] }

Numa página servida por uma reescrita, escreva os caminhos do seu CSS e das suas imagens a partir da raiz (/style.css, não style.css); senão, eles são procurados dentro de /blog/meu-post/.

Um post em qualquer página

Para mostrar um único post em outro lugar, como uma landing page, o site de um parceiro ou uma central de ajuda, adicione data-post com o slug do post. Só esse post aparece: sem a lista dos outros e sem link de voltar. A página de cada post publicado no painel já tem estas duas linhas prontas para copiar.

html
<div id="cmskite-post-meu-post"></div>
<script src="https://cmskite.com/embed.js" data-blog="seu-blog" data-post="meu-post" async></script>

O post é um convidado nessa página: a página mantém o próprio título, descrição e link canônico, e a visualização continua contando. Vários posts podem ficar na mesma página: cada par de linhas desenha no seu próprio elemento cmskite-post-…. Um post despublicado depois mostra “Este post não está disponível.”

Um sitemap para os seus posts

Um sitemap informa aos buscadores o endereço de cada post, o que importa mais enquanto o blog é novo. O seu site não conhece os seus posts, então mantemos um para você, com cada post no endereço dele no seu site:

plain
https://cmskite.com/b/seu-blog/site-sitemap.xml

Ele passa a usar os endereços do seu site depois que um visitante abre a sua página do blog com as duas linhas; antes disso, lista os do seu blog gratuito. Depois, faça uma destas opções:

  1. Cite o sitemap no seu robots.txt (melhor: ele se mantém atualizado). Adicione a linha Sitemap: https://cmskite.com/b/seu-blog/site-sitemap.xml. Os buscadores aceitam um sitemap em outro site quando o seu próprio robots.txt o cita. WordPress: o editor de robots.txt do seu plugin de SEO (Yoast: Yoast SEO → Ferramentas → Editor de arquivos). Shopify: Online Store → Themes → Edit code → adicione o modelo robots.txt (nomes da interface em inglês). Webflow: Site settings → SEO → Robots.txt (interface em inglês).
  2. Ou envie o arquivo. Abra o endereço acima, salve o arquivo, envie para o seu site (por exemplo como /blog-sitemap.xml) e cadastre esse endereço no Google Search Console, em Sitemaps. Envie de novo depois de publicar posts novos.

Se a sua hospedagem não permite nenhuma das duas, os buscadores encontram seus posts do mesmo jeito, seguindo os links da página do blog; só leva mais tempo. No Wix não há nada a fazer: os posts ranqueiam no seu link gratuito do blog, que já está no nosso próprio sitemap.