Communitygithub.com

Demian-T/plugin-landing-page-creation

Gera um plano SEO completo para uma landing page antes da escrita do código. Abrange arquitetura do site, meta tags por página, tipos de schema markup, configuração de sitemap XML, robots.txt e dicas de otimização para busca por IA.

O que é plugin-landing-page-creation?

Este skill, chamado 'Landing Page SEO Planner', é um assistente especializado em SEO técnico para desenvolvedores que constroem landing pages usando frameworks modernos como Next.js. Ele atua antes da fase de codificação, garantindo que a arquitetura do site e a configuração de SEO estejam planejadas, evitando retrabalho. O skill recebe como entrada o nome da empresa, setor, lista de páginas e um resumo de conteúdo (proveniente do skill 'landing-page-copy'). Em seis etapas, ele valida a arquitetura do site (sugerindo páginas adicionais com base no setor), gera meta tags otimizadas (título, descrição, Open Graph) para cada página, especifica os schemas JSON-LD apropriados (Organization, Offer, Article, FAQPage, etc.), define a configuração do sitemap XML com prioridades de rastreamento, fornece dicas de otimização de Core Web Vitals (imagens, fontes, CSS, JavaScript) e recomenda práticas para SEO de IA (citabilidade por assistentes como ChatGPT e Perplexity). O resultado final é um plano estruturado que pode ser diretamente aplicado em arquivos como `app/layout.tsx`, `app/sitemap.ts` e `app/robots.ts`. Funciona em qualquer plataforma que suporte skills de IA, como Claude Code, Cursor ou Codex, mas foi projetado sob medida para projetos Next.js com App Router.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Demian-T/plugin-landing-page-creation/tree/HEAD/skills/landing-page-seo

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

Planejador de SEO para Landing Page

Produza um plano de SEO estruturado cobrindo todas as páginas. Sem código — apenas a configuração de SEO pronta para ser injetada em app/layout.tsx, app/sitemap.ts, app/robots.ts e metadados por página.

Entradas

  • {company_name} — nome da marca
  • {industry} — setor
  • {pages} — lista de páginas a cobrir (padrão: /, /tarifs, /a-propos, /blog, /cas-clients)
  • {content_brief} — título do herói, cópia de recursos, etc. do landing-page-copy

Etapa 1 — Validação da Arquitetura do Site

Avalie se o conjunto de páginas padrão é ideal para este setor. Pergunte:

  1. Este setor precisa de uma página /contact ou /demo separada? (B2B SaaS → sim)
  2. Existem páginas de palavras-chave de alta intenção ausentes? (ex.: /comparatif, /alternatives-[competitor], /[use-case])
  3. O /blog deveria ser /ressources ou /guides para este setor?
  4. A página de preços precisa de seu próprio /tarifs ou uma âncora #pricing é suficiente?

Produza uma lista final de páginas com URL, título e finalidade. Padrão:

URLTítulo da PáginaFinalidade
/Página InicialConversão — herói + prova + recursos
/tarifsTarifasComparação de planos, intenção de upgrade
/a-proposSobre nósConstrução de confiança, história da marca
/blogBlogTráfego orgânico SEO
/cas-clientsCasos de ClientesConfiança + estágio de decisão

Adicione até 2 páginas extras se fortemente justificadas pelo setor.


Etapa 2 — Meta Tags por Página

Para cada página, gere:

página:        [url]
título:        [50-60 caracteres. Palavra-chave primária perto do início. Marca no final após " | "]
descrição:     [140-160 caracteres. Verbo de ação. Benefício. CTA suave. Inclui palavra-chave primária.]
og_title:     [Igual ao título ou ligeiramente mais envolvente]
og_description: [Igual à descrição ou variante conversacional]
palavras-chave: [3-5 palavras-chave primárias para esta página]

Regras de tag de título:

  • Página Inicial: {Palavra-chave primária} | {Nome da Empresa} ou {Nome da Empresa} — {Proposta de valor principal}
  • Recurso/preços: {Recurso/Preço} {Empresa} — {Benefício}
  • Blog: {Título do Artigo} | {Blog da Empresa}
  • 50-60 caracteres para evitar truncamento no SERP

Regras de meta descrição:

  • Única por página — sem copiar e colar
  • Incluir palavra-chave primária naturalmente
  • CTA suave: "Descubra", "Comece gratuitamente", "Compare os planos"
  • Máximo de 140-160 caracteres

Etapa 3 — Plano de Schema Markup

Para cada página, especifique quais schemas JSON-LD implementar:

Página Inicial (/)

Organization {
  name, url, logo, description,
  sameAs: [URLs de perfis sociais — LinkedIn, Twitter/X, GitHub se relevante],
  contactPoint: { contactType: "atendimento ao cliente", availableLanguage: "Português" }
}
WebSite {
  name, url,
  potentialAction: SearchAction (se o site tiver busca)
}

Preços (/tarifs)

// Para cada plano:
Offer {
  name, price, priceCurrency, description,
  seller: { "@type": "Organization", name }
}
FAQPage (se houver seção de FAQ de preços) {
  mainEntity: [{ "@type": "Question", name, acceptedAnswer }]
}

Páginas de posts do blog

Article {
  headline, datePublished, dateModified,
  author: { "@type": "Organization", name },
  publisher: { "@type": "Organization", name, logo },
  image, description
}
BreadcrumbList {
  itemListElement: [Home → Blog → Artigo]
}

Páginas de estudo de caso

Article (tipo: "TechArticle" ou genérico)
BreadcrumbList {
  itemListElement: [Home → Casos de Clientes → Nome do caso]
}

Sobre (/a-propos)

AboutPage {
  name, description, url,
  mainEntity: Organization (igual à página inicial)
}

Schema SoftwareApplication — adicionar à página inicial se o setor for SaaS/tech:

SoftwareApplication {
  name, applicationCategory: "BusinessApplication",
  operatingSystem: "Web",
  offers: { price, priceCurrency }
}

Etapa 4 — Configuração do Sitemap XML

// Entradas de sitemap.ts
páginas: [
  { url: "/",            changeFreq: "weekly",  priority: 1.0 },
  { url: "/tarifs",      changeFreq: "weekly",  priority: 0.9 },
  { url: "/a-propos",    changeFreq: "monthly", priority: 0.6 },
  { url: "/blog",        changeFreq: "daily",   priority: 0.8 },
  { url: "/cas-clients", changeFreq: "monthly", priority: 0.7 },
  // posts do blog:    changeFreq: "monthly",  priority: 0.6
  // estudos de caso:  changeFreq: "monthly",  priority: 0.7
]

Ajuste prioridades com base na intenção de conversão:

  • Páginas de alta intenção de conversão (/, /tarifs): 0,9-1,0
  • Confiança / funil médio (/cas-clients): 0,7-0,8
  • Funil superior / conteúdo (/blog, /a-propos): 0,5-0,7

Etapa 5 — Dicas de Core Web Vitals

Com base nos componentes planejados, sinalize estas otimizações em tempo de construção:

Imagens:

  • Usar next/image com priority={true} na imagem do herói
  • Formato WebP via unoptimized: true (exportação estática) + ativos pré-otimizados
  • width e height explícitos para evitar CLS

Fontes:

  • Usar next/font/google com display: 'swap'
  • Adicionar preconnect para fonts.googleapis.com no <head>

CSS:

  • Usar variáveis CSS — evita recálculo de nomes de classe na troca de tema
  • Evitar @import em CSS (usar next/font em vez disso)

JavaScript:

  • 'use client' apenas em componentes interativos (DarkModeToggle, ContactForm, alternador de preços)
  • Seções estáticas (texto do herói, recursos, rodapé) = Componentes de Servidor = nenhum custo de bundle JS

Etapa 6 — Dicas de SEO para IA (Citabilidade)

Para que AI Overviews, Perplexity, ChatGPT citem este site:

Dicas de estrutura para a fase de geração de código:

  • A seção de FAQ deve usar <dl> ou HTML semântico de Q/A (não apenas div/p)
  • Estatísticas no herói devem ter <data value="X"> envolvendo
  • Artigos do blog precisam de <article> com <time datetime="..."> e <h1> claro
  • Estudos de caso precisam de estrutura explícita H2 "Desafio / Solução / Resultado"
  • Página Sobre precisa de <address> para informações de contato da empresa

Dicas de conteúdo:

  • Incluir 1-2 respostas de FAQ que respondam diretamente "O que é {company_name}?" e "Como {company_name} funciona?" (estas são citadas diretamente por IA)
  • Artigos do blog devem ter um resumo TL;DR no primeiro parágrafo
  • Estatísticas devem incluir fonte/contexto (mesmo que interno: "com base em dados de clientes")

Formato de Saída

Produza o plano como SEO_PLAN:

## SEO_PLAN

### lista_de_paginas
[Lista final de páginas com quaisquer adições]

### meta_tags
[Título, descrição, og_title, og_description, palavras-chave por página]

### plano_schema
[Tipos de schema por página + campos principais]

### configuracao_sitemap
[Prioridade + changeFreq por página]

### dicas_de_construcao
[Dicas de CWV + SEO para IA a passar para a geração de código]

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

Habilidades Relacionadas