ARPSeo

A arp-seo é uma biblioteca para gerenciar metadados de SEO em aplicações React, funcionando tanto em projetos criados com Vite quanto com Next.js. A biblioteca permite que você busque dados de SEO de uma API e atualize o título e as meta tags da sua página dinamicamente.

Instalação

Você pode instalar a biblioteca usando npm ou yarn:

npm install arp-seo

ou

yarn add arp-seo

Uso

Configuração da API

Para usar a biblioteca, você precisará de uma API que forneça dados de SEO no seguinte formato:

{
  "title": "Título da Página",
  "description": "Descrição da Página",
  "keywords": "palavras-chave, separadas, por vírgula"
}

Exemplo de Uso

Exemplo de Uso (react busca na api)

Importe e utilize o componente SeoManager em sua aplicação:

import React from 'react';
import { SeoManager } from 'arp-seo';
const dataSeo = {
  title: "Título da Página",
  description: "Descrição da Página",
  keywords: "palavras-chave, separadas, por vírgula"
}

const App = () => {

  return (
    <>
      <SeoManager seoData={dataSeo} /> {/* adicione ao header da pagina */}
      <div>
        <h1>Conteúdo da Página</h1>
        <p>Esta é a sua página.</p>
      </div>
    </>
  );
};

export default App;

Exemplo de Uso (react input data)

Importe e utilize o componente SeoManager em sua aplicação:

import React from 'react';
import { SeoManager } from 'arp-seo';

const App = () => {
  const apiUrl = 'https://api.example.com/seo'; // Substitua pela URL da sua API

  return (
    <>
      <SeoManager apiUrl={apiUrl} /> {/* adicione ao header da pagina */}
      <div>
        <h1>Conteúdo da Página</h1>
        <p>Esta é a sua página.</p>
      </div>
    </>
  );
};

export default App;

Exemplo de Uso (Next busca na api)

Importe e utilize o componente SeoManager em sua aplicação:

import React from 'react';
import { SeoManager } from 'arp-seo';
const dataSeo = {
  title: "Título da Página",
  description: "Descrição da Página",
  keywords: "palavras-chave, separadas, por vírgula"
}

const App = () => {

  return (
    <>
      <SeoManagerNext seoData={dataSeo} /> {/* adicione ao header da pagina */}
      <div>
        <h1>Conteúdo da Página</h1>
        <p>Esta é a sua página.</p>
      </div>
    </>
  );
};

export default App;

Exemplo de Uso (Next input data)

Importe e utilize o componente SeoManager em sua aplicação:

import React from 'react';
import { SeoManager } from 'arp-seo';

const App = () => {
  const apiUrl = 'https://api.example.com/seo'; // Substitua pela URL da sua API

  return (
    <>
      <SeoManagerNext apiUrl={apiUrl} /> {/* adicione ao header da pagina */}
      <div>
        <h1>Conteúdo da Página</h1>
        <p>Esta é a sua página.</p>
      </div>
    </>
  );
};

export default App;

Props do SeoManager

• apiUrl (string): URL da API que fornece os dados de SEO.
• seoData (object, opcional): Dados de SEO fornecidos diretamente (substitui a busca pela API).

Estrutura do Projeto

A estrutura básica do seu projeto pode ser semelhante a esta:

/seu-projeto
├── src
│   ├── components
│   │   └── SeoManager.tsx
│   ├── types
│   │   └── index.tsx
│   └── index.ts
├── package.json
└── README.md

Licença

Este projeto está licenciado sob a MIT License. Veja o arquivo LICENSE para mais detalhes.