Uma ferramenta web moderna e intuitiva, construída com Next.js, para gerar facilmente meta tags HTML essenciais para SEO e pré-visualização em redes sociais (Open Graph para Facebook/LinkedIn e Twitter Cards).
- Formulário Abrangente: Preencha campos como título, descrição, palavras-chave e imagem.
- Pré-visualização em Tempo Real: Veja instantaneamente como seu link aparecerá em redes sociais.
- Geração de Código: Obtenha o código HTML completo, incluindo tags primárias, Open Graph e Twitter, pronto para ser copiado.
- Syntax Highlighting: O código gerado é exibido com destaque de sintaxe para facilitar a leitura.
- Botão "Copiar": copie todo o código para a área de transferência com um único clique.
Este projeto foi construído utilizando um conjunto de tecnologias modernas para garantir uma experiência de desenvolvimento e de usuário de alta qualidade:
- Framework: Next.js 15
- Linguagem: TypeScript
- Biblioteca UI: React 19
- Componentes: React-Bootstrap
- Estilização: Tailwind CSS 4 e Bootstrap 5
- Syntax Highlighting: React Syntax Highlighter
- Linting: ESLint
Siga as instruções abaixo para configurar e executar o projeto em seu ambiente local.
Certifique-se de ter o Node.js (versão 20.x ou superior) instalado em sua máquina.
-
Clone o repositório:
git clone https://github.com/gabriersdev/meta-tags-generator.git
-
Navegue até o diretório do projeto:
cd meta-tags-generator -
Instale as dependências:
npm install # ou yarn install # ou pnpm install
-
Inicie o servidor de desenvolvimento:
npm run dev
-
Abra seu navegador e acesse
http://localhost:3000para ver a aplicação em funcionamento.
- Preencha os campos do formulário no lado esquerdo com as informações do seu site (título, descrição, etc.).
- Observe a pré-visualização do card social ser atualizada em tempo real no lado direito.
- Copie o código HTML gerado na seção "Código Gerado" clicando no botão "Copiar Código".
- Cole o código dentro da tag
<head>do seu arquivo HTML.
Este projeto é distribuído sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.