Si bien React es a menudo elogiado por hacer que el desarrollo front-end sea más eficiente, esta popular biblioteca puede ser problemática para los motores de búsqueda si no configuramos el sitio web correctamente.
¿Por qué React SEO es pobre?
React le brinda un SPA (aplicación de una sola página) que requiere Javascript para mostrar el contenido de la página. El problema es que el robot de rastreo de Google, que escanea todas las páginas en Internet, no es tan bueno como para entender una página con javascript, ya que el index.html devuelve una página HTML en blanco al principio y, según el enrutamiento, cambia el contenido de la página. página en comparación con una página que consta de código HTML normal.
Casco React: el componente React reutilizable React Helmet gestionará todos los cambios en el encabezado del documento.
Helmet toma etiquetas HTML simples y genera etiquetas HTML simples. Es muy simple y React es fácil de usar para principiantes.
Características:
- Admite todas las etiquetas de encabezado válidas: título, base, meta, enlace, guión, no guión y estilo.
- Admite atributos para etiquetas de cuerpo, html y título.
- Admite la representación del lado del servidor.
- Los componentes anidados anulan los cambios de cabeza duplicados (los componentes más abajo en el árbol pueden anular los valores proporcionados al componente Casco en un nivel superior).
- Los cambios de cabeza duplicados se conservan cuando se especifican en el mismo componente (soporte para etiquetas como «icono táctil de manzana»).
- Devolución de llamada para el seguimiento de los cambios de DOM.
Instalación y uso:
Paso 1: Creación de la aplicación React e instalación del módulo:
npx create-react-app helmet
Paso 2: después de crear la carpeta de su proyecto iereact-helmet, acceda a ella con el siguiente comando:
cd helmet
Paso 3: Podemos proceder a agregar casco.
npm i react-helmet
Estructura del proyecto : Se verá como lo siguiente.
Estructura del proyecto
Paso 4: agregue React-Router-Dom para el enrutamiento
npm i react-router-dom
Nota: Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.
Paso 5: Cree 2 archivos en el mismo directorio: Lyrics.js y Audio.js
Lyrics.js
import React from 'react'; const Lyrics = () => ( <div> <h2>Lyrics</h2> </div> ); export default Lyrics;
Audio.js
import React from 'react'; const Audio = () => ( <div> <h2>Audio</h2> </div> ); export default Audio;
App.js
import React from "react";
import { Helmet } from "react-helmet";
import { BrowserRouter as Router, Route,
Link } from "react-router-dom";
import Audio from "./Audio";
import Lyrics from "./Lyrics";
const App = () => (
<Router>
<Helmet>
<title>Music Website</title>
<meta
name="description"
content="Get stats about every music from every movie"
/>
<meta
name="keywords"
content="Music, Audio, Lyrics"
/>
</Helmet>
<div>
<ul>
<li>
<Link to="/Audio">Audio</Link>
</li>
<li>
<Link to="/Lyrics">Lyrics</Link>
</li>
</ul>
<hr />
<Route path="/Lyrics" component={Lyrics} />
<Route path="/Audio" component={Audio} />
</div>
</Router>
)
export default App ;
Ahora el título se cambiará a Sitio web de música y puede consultar la descripción de las herramientas de desarrollo
Paso 6: Ahora haga lo mismo en el resto de las rutas ya que el Componente Casco en el Componente Hijo anulará el Componente Casco del Componente Padre. Agregue el título y la etiqueta meta relacionada con Lyrics.js. Hay 2 componentes secundarios de la aplicación Parent Component y con la ayuda del casco de reacción. Podemos insertar varias etiquetas <head> y <meta> con los mismos atributos (nombre y contenido) y, debido a esto, se aumenta el SEO de los sitios web de reacción.
Lyrics.js
import React from 'react';
import { Helmet } from "react-helmet";
const Lyrics = () => (
<div>
<Helmet>
<title>Music Lyrics</title>
<meta
name="description"
content="Get lyrics of every music for free"
/>
</Helmet>
<h2>Lyrics</h2>
</div>
);
export default Lyrics;
Ahora, si alguien en Internet escribe algo relacionado con la letra o el audio, su sitio web se priorizará primero, ya que hay etiquetas meta y de título (que indican la descripción de la página). Si alguien termina en el componente secundario, react-helmet anula la metaetiqueta de descripción de nivel de sitio/índice y muestra la de nivel inferior, la específica para la página secundaria (aquí lyrics.js/audio.js). Agregue el título y la etiqueta meta relacionada con Audio.js (igual que Lyrics.js).
Audio.js
import React from 'react';
import { Helmet } from "react-helmet";
const Audio = () => (
<div>
<Helmet>
<title>Music Audio</title>
<meta
name="description"
content="Get audio of every music for free"
/>
</Helmet>
<h2>Audio</h2>
</div>
);
export default Audio;
Paso 7: ahora agregue palabras clave dentro de la metaetiqueta que son muy relevantes en el componente de casco que aumenta el SEO. Sus palabras clave de SEO son las palabras clave y frases en su contenido web que hacen posible que las personas encuentren su sitio a través de los motores de búsqueda.
Código completo:
App.js
import React from "react";
import { Helmet } from "react-helmet";
import { BrowserRouter as Router,
Route, Link } from "react-router-dom";
import Audio from "./Audio";
import Lyrics from "./Lyrics";
const App = () => (
<Router>
<Helmet>
<title>Music Website</title>
<meta
name="description"
content="Get stats about every music from every movie"
/>
<meta
name="keywords"
content="Music, Audio, Lyrics"
/>
</Helmet>
<div>
<ul>
<li>
<Link to="/Audio">Audio</Link>
</li>
<li>
<Link to="/Lyrics">Lyrics</Link>
</li>
</ul>
<hr />
<Route path="/Lyrics" component={Lyrics} />
<Route path="/Audio" component={Audio} />
</div>
</Router>
)
export default App;
Lyrics.js
import React from 'react';
import { Helmet } from "react-helmet";
const Lyrics = () => (
<div>
<Helmet>
<title>Music Lyrics</title>
<meta
name="description"
content="Get lyrics of every music for free"
/>
<meta
name="keywords"
content="Music, Audio, Lyrics"
/>
</Helmet>
<h2>Lyrics</h2>
</div>
);
export default Lyrics;
Audio.js
import React from 'react';
import { Helmet } from "react-helmet";
const Audio = () => (
<div>
<Helmet>
<title>Music Audio</title>
<meta
name="description"
content="Get audio of every music for free"
/>
<meta
name="keywords"
content="Music, Audio, Lyrics"
/>
</Helmet>
<h2>Audio</h2>
</div>
);
export default Audio;
Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:
npm start
Salida: Ahora abra su navegador y vaya a http://localhost:3000/ y verá un título y una descripción diferentes para cada ruta.
Publicación traducida automáticamente
Artículo escrito por prasanna1995 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA