https://github.com/gabriersdev/meta-tags-generator
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).
https://github.com/gabriersdev/meta-tags-generator
html meta-props meta-tags-generator seo seo-optimization tags-generator
Last synced: about 2 months ago
JSON representation
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).
- Host: GitHub
- URL: https://github.com/gabriersdev/meta-tags-generator
- Owner: gabriersdev
- License: mit
- Created: 2025-08-31T16:07:25.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2025-08-31T16:51:23.000Z (6 months ago)
- Last Synced: 2025-08-31T18:19:51.402Z (6 months ago)
- Topics: html, meta-props, meta-tags-generator, seo, seo-optimization, tags-generator
- Language: TypeScript
- Homepage: https://gabriersdev.github.io/meta-tags-generator
- Size: 141 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🚀 Gerador de Meta Tags
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).
## ✨ Funcionalidades
* **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.
-----
## 🛠️ Tecnologias Utilizadas
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**
-----
## 🏁 Começando
Siga as instruções abaixo para configurar e executar o projeto em seu ambiente local.
### Pré-requisitos
Certifique-se de ter o **Node.js** (versão 20.x ou superior) instalado em sua máquina.
### Instalação
1. **Clone o repositório:**
```sh
git clone https://github.com/gabriersdev/meta-tags-generator.git
```
2. **Navegue até o diretório do projeto:**
```sh
cd meta-tags-generator
```
3. **Instale as dependências:**
```sh
npm install
# ou
yarn install
# ou
pnpm install
```
4. **Inicie o servidor de desenvolvimento:**
```sh
npm run dev
```
5. Abra seu navegador e acesse [`http://localhost:3000`](http://localhost:3000) para ver a aplicação em funcionamento.
-----
## 👨💻 Como Usar
1. **Preencha os campos** do formulário no lado esquerdo com as informações do seu site (título, descrição, etc.).
2. **Observe a pré-visualização** do card social ser atualizada em tempo real no lado direito.
3. **Copie o código** HTML gerado na seção "Código Gerado" clicando no botão "Copiar Código".
4. **Cole o código** dentro da tag `` do seu arquivo HTML.
-----
## 📄 Licença
Este projeto é distribuído sob a licença MIT. Veja o arquivo `LICENSE` para mais detalhes.