Construya un componente principal de SEO para NEXTJS / REACT

Sep 11, 2025

Cómo

[dieciséis] (Crédito de la imagen: espacio negativo en pexels)

Si bien reacciona es una poderosa biblioteca de JavaScript, no incluye todas las piezas que necesita para construir un simple funcionamiento Diseño de sitio web . NEXTJS es un marco de reacción que le permite crear aplicaciones y sitios web renderizados por servidores con facilidad.

NEXTJS también incluye una serie de herramientas y características desde la caja como WEBPACK, BABEL, Ruta dinámica y Prefetching. Lo más importante es que he encontrado que Soxjs es muy amable.

Este marco le permite utilizar la representación del lado del servidor, que no solo hace que sus aplicaciones y sitios web se carguen considerablemente más rápido, pero también hacen que sus sitios web reaccionen sean mucho más fáciles de que los motores de búsqueda se arrastre.

Nextjs también facilita la creación de una arquitectura del sitio bien segmentado utilizando Enrutamiento dinámico o Enrutamiento de servidor personalizado . Por ejemplo, puede segmentar fácilmente su sitio web en diferentes silos como / artículos /, / productos /, y / servicios / para una mejor estructuración de contenido.

Lo mejor de todo, puede utilizar todas las cosas que hacen que reaccionen muy bien, como componentes, propiedades de componentes y estados de componentes para implementar técnicas de optimización realmente flexibles en la página. En este artículo, voy a construir detalle un componente principal bien optimizado para reaccionar.

La importancia del elemento principal para SEO.

Ahora, antes de entrar en cómo construir este componente principal, primero hablemos de por qué es importante y lo que vamos a optimizar.

El elemento principal de su sitio web será una de las secciones más importantes cuando se trata de SEO técnico. Para uno, todos los metadatos del sitio web se establecen en la cabeza. Estas etiquetas incluyen título, meta descripción, palabras clave de la página, cualquier información relevante de la información y la configuración de la ventana.

El elemento principal también es responsable de establecer otras etiquetas importantes como su etiqueta de URL canónica, cualquier etiqueta de fotografía de Facebook relevantes (Etiquetas OG) o tarjetas de Twitter, y sus etiquetas Meta Robots. Cada una de estas etiquetas es responsable de transmitir información diferente a Google o en las redes sociales para que puedan comprender mejor, indexar y compartir su contenido.

Tener metadatos configurados incorrectamente en su sitio web puede ser catastrófico a su optimización general del sitio web y definitivamente puede hacer que sus clasificaciones tomen una narida.

Tener metadatos configurados incorrectamente en su sitio web puede ser catastrófico a su optimización general del sitio web y definitivamente puede hacer que sus clasificaciones tomen una grasa.

Por ejemplo, dos de las peores sanciones que su sitio web podría enfrentar desde un punto de vista de optimización en la página son una penalización de "etiqueta de título duplicado" y una penalización 'Duplicar META TAG'. Estas dos etiquetas son responsables de darle a Google's 'Elevator Litch' de su sitio web. También dictan el texto que un usuario verá cuando aparezca su sitio web en los resultados de búsqueda de Google.

Si cada página en su sitio web tiene el mismo título exacto y el mismo conjunto de descripción exacta, Google tendrá un tiempo difícil de entender de qué se trata su sitio web. Como resultado, Google no le prestará demasiada atención a su sitio web y definitivamente no lo considerará una propiedad de autoridad.

Si está interesado en aprender más sobre el SEO técnico en la página. [sesenta y cinco] De

Ver más en mi enfoque en Speckyboy .

Ahora que entiendes un poco más sobre el elemento principal y por qué es tan importante bajo la capucha, echemos un vistazo a cómo construir un componente principal para reaccionar.

Construir un componente principal de SEO

El componente principal favorable con SEO que detalle en este artículo es específico de los próximos SIXTS. Sin embargo, si está utilizando un marco de reacción diferente o simplemente está utilizando reaccionar, puede usar Casco reaccionar en lugar del componente principal de próximajs.

Lo primero que querrá hacer es configurar su estructura de cabeza básica. El código a continuación puede servir como un ejemplo, pero siéntase libre de agregarlo o eliminarlo como se lee en forma. Sin embargo, a través del mínimo, su cabeza debe incluir una etiqueta de título, etiqueta de descripción meta, URL canónica y cualquier etiqueta social relevante.

& lt; cabeza y gt;
& lt; title & gt; & lt; / title & gt;
& lt; meta name = "Descripción" contenido = "" / & gt;
& lt; Meta Property = "Og: tipo" contenido = "Sitio web" / & GT;
& lt; meta name = "og: title" property = "og: title" content = "" / & gt;
& lt; meta name = "og: description" property = "og: descripe" content = "" / & gt;
& lt; meta propiedad = "og: sitio_name" contenido = "" / & gt;
& lt; metta propiedad = "OG: URL" contenido = "" / & gt;
& lt; meta name = "Twitter: Tarjeta" contenido = "Resumen" / & GT;
& lt; meta name = "twitter: title" content = "" / & gt;
& lt; meta name = "twitter: description" content = {props.desc} / & gt;
& lt; meta name = "twitter: sitio" contenido = "" / & gt;
& lt; meta name = "twitter: creador" contenido = "" / & gt;
& lt; link rel = "icon" type = "image / png" href = "/ estática / imágenes / favicon.ico" / & gt;
& lt; link rel = "Apple-touch-icon" href = "/ estática / imágenes / favicon.ico" / & gt;
& lt; link rel = "stylesheet" href = "" / & gt;
& lt; metta propiedad = "og: imagen" contenido = "" / & gt;
& lt; Meta Name = "Twitter: Image" Content = "" / & gt;
& lt; link rel = "canonical" href = "" / & gt;
& lt; script type = "Text / Javascript" src = "" & gt; & lt; / script & gt;
& lt; / cabeza y gt;

Configurar el componente

A continuación, querrá crear un nuevo archivo parcial para su componente. Puede llamar al archivo parcial seo-meta.js o similar. Este archivo debe mantenerse en el parcial directorio.

Su componente de inicio se verá como esto:

 Importar cabeza de 'Siguiente / Head'
const meta = (props) = & gt; (
& lt; cabeza y gt;
& lt; title & gt; & lt; / title & gt;
& lt; meta name = "Descripción" contenido = "" / & gt;
& lt; Meta Property = "Og: tipo" contenido = "Sitio web" / & GT;
& lt; meta name = "og: title" property = "og: title" content = "" / & gt;
& lt; meta name = "og: description" property = "og: descripe" content = "" / & gt;
& lt; meta propiedad = "og: sitio_name" contenido = "" / & gt;
& lt; metta propiedad = "OG: URL" contenido = "" / & gt;
& lt; meta name = "Twitter: Tarjeta" contenido = "Resumen" / & GT;
& lt; meta name = "twitter: title" content = "" / & gt;
& lt; meta name = "twitter: description" content = {props.desc} / & gt;
& lt; meta name = "twitter: sitio" contenido = "" / & gt;
& lt; meta name = "twitter: creador" contenido = "" / & gt;
& lt; link rel = "icon" type = "image / png" href = "/ estática / imágenes / favicon.ico" / & gt;
& lt; link rel = "Apple-touch-icon" href = "/ estática / imágenes / favicon.ico" / & gt;
& lt; link rel = "stylesheet" href = "" / & gt;
& lt; metta propiedad = "og: imagen" contenido = "" / & gt;
& lt; Meta Name = "Twitter: Image" Content = "" / & gt;
& lt; link rel = "canonical" href = "" / & gt;
& lt; script type = "Text / Javascript" src = "" & gt; & lt; / script & gt;
& lt; / cabeza y gt;
)
Meta predeterminado de exportación

Notarás que estoy pasando accesorios , o propiedades, a mi componente. Utilizaremos estas propiedades para rellenar nuestras etiquetas meta.

Importar el componente

Una vez que haya configurado su componente básico, puede impulsarlo a sus páginas. Puede importar el componente al incluir lo siguiente en la parte superior de su página.

 Importar meta de'/Partials/SeO-Meta.js'

Ahora puede colocar el Meta Componente dentro de su función de render, como lo haría con el componente principal nativo de Soxjs.

Crea las propiedades del componente

Ahora que ha importado y haya colocado su Meta Componente, querrá configurar las propiedades que necesitará para sus metadatos. Por lo general, debe incluir el título, la descripción y la URL para cada página, pero también puede incluir imágenes y otros datos según sea necesario.

También es posible que desee incluir propiedades para los archivos CSS y JavaScript para que pueda cargarlos condicionalmente en las páginas según sea necesario. Con todas esas propiedades establecidas, su componente se vería como esto:

 & lt; meta
title = "Este es un título | Nombre del Sitio Web"
DESC = "Esta es la descripción"
Canonical = "https://www.someurl.com"
CSS = '/ estática / css / styles.css'
js = '/ estática / js / scripts.js'
/ & gt;

Si solo está construyendo un sitio web estático con NEXTJS, debe poder rellenar las propiedades con contenido estático. Sin embargo, si está cargando páginas de rutas dinámicas y está poblando las plantillas de página con código dinámico, querrá establecer estas propiedades dinámicamente.

Nuestra página web, Nombre propio , utiliza la API de WordPress como fuente de datos, pero puede usar las instrucciones a continuación usando un poco de descanso o API de GraphQL.

Al solicitar la página, querrá agarrar y devolver los metadatos relevantes y los datos de la página durante el GetInitialprops () Async función. Esto le permitirá usar los datos dinámicos dentro de la función de renderista para que Google y otros robots puedan rastrear la información.

Dependiendo de su fuente de datos y algunos otros factores, puede tomar un enfoque diferente para obtener las propiedades iniciales, pero aquí hay un enfoque básico para comenzar.

Estadísticas Async GetInitialprops (CTX) {
Const Res = AwAit Fetch ('// api.some-url.com/case_studies/?slug=' + ctx.req.params.lugs.lugs)
const error_code = res.statuscode & gt; 200? res.statuscode: falso;
Const Data = Await res.json ();
Deje que URL = 'https: //' + ctx.req.headers.host + '/' + ctx.req.params.lugslug
Sea Meta_Title = AWAIT DATOS  .Meta_Title
Deja que meTA_DESC = AWAIT DATOS  .Meta_Desc
regreso {
código de error,
   CASE_STUDYY: DATOS,
   meta_title: meta_title,
   meta_desc: meta_desc,
   URL: URL
}
}

Ahora podrá acceder a las propiedades que configuró dentro de su función de render. Cuando se usa en su código, se verían algo así.

 & lt; meta
title = {este.props.Meta_title}
DESC = {ESTE.PROPS.METRA_DESC}
canónico = {este.props.url}
CSS = '/ estática / css / styles.css'
js = '/ estática / js / scripts.js'
/ & gt;

Utilice las propiedades en su componente

El paso final es configurar su componente para que utilice las propiedades que se está pasando. Si bien algunas de las propiedades como el título y la descripción se establecerán en cada página, otras como CSS y JS pueden estar condicionadas. Querrá tomar esto en consideración en su componente.

En nuestro ejemplo, estamos pasando nuestras propiedades al componente usando el argumento accesorios . Luego podemos acceder a los accesorios individuales usando sus nombres, por ejemplo, Proporciones. o Props.Desc .

Al configurar los bloques condicionales, puede hacer un enfoque como este:

 {
props.csss & amp; & amp;
& lt; link rel = "stylesheet" href = {'$ {propss.css} `} / & gt;
}

De esta manera, si no hay un conjunto CSS, no establecerá una etiqueta de enlace vacío en su página. Puede usar este mismo enfoque para los archivos JavaScript.

Una vez que haya terminado de rellenar su componente principal, debería verse algo así:

 Importar la cabeza de 'Siguiente / Head'
const meta = (props) = & gt; (
& lt; cabeza y gt;
& lt; title & gt; {props.title} & lt; / title & gt;
& lt; meta name = "Descripción" contenido = {props.desc} / & gt;
& lt; Meta Property = "Og: tipo" contenido = "Sitio web" / & GT;
& lt; meta name = "og: title" property = "og: title" content = {props.title} / & gt;
& lt; meta name = "og: description" property = "og: description" content = {props.desc} / & gt;
& lt; Meta Property = "OG: Site_Name" contenido = "Nombre propio" / & gt;
& lt; metta propiedad = "og: url" contenido = {'$ {propss.canonical} `} / & gt;
& lt; meta name = "Twitter: Tarjeta" contenido = "Resumen" / & GT;
& lt; meta name = "twitter: title" content = {props.title} / & gt;
& lt; meta name = "twitter: description" content = {props.desc} / & gt;
& lt; meta name = "twitter: sitio" contenido = "@ propernunco" / & gt;
& lt; meta name = "twitter: creador" contenido = "@ propernunco" / & gt;
& lt; link rel = "icon" type = "image / png" href = "/ estática / imágenes / favicon.ico" / & gt;
& lt; link rel = "Apple-touch-icon" href = "/ estática / imágenes / favicon.ico" / & gt;
{
props.csss & amp; & amp;
& lt; link rel = "stylesheet" href = {'$ {propss.css} `} / & gt;
}
{
Propss.Image? (
& lt; metta propiedad = "og: imagen" contenido = {'$ {propss.image} `} / & gt;
): (
& lt; meta property = "og: image" content = "https://www.propernoun.cohttps://cdn.thefastcode.com/static/images/proper-noun-social.png" / & gt;
)
}
{
props.image & amp; & amp;
& lt; meta name = "twitter: imagen" contenido = {'$ {propss.image} `} / & gt;
}
{
props.canonical & amp; & amp;
& lt; link rel = "canónico" href = {'$ {propss.canonical} `} / & gt;
}
{
props.js & amp; & amp;
& lt; tipo script = "Text / Javascript" src = {'$ {propss.js} `} & gt; & lt; / script & gt;
}
& lt; / cabeza y gt;
)
Meta predeterminado de exportación

Leer más:

Desarrollar componentes reaccionables reusibles
14 de las mejores API de JavaScript
15 herramientas esenciales de JavaScript que deberías estar usando

Construya un componente principal de SEO para NEXTJS / REACT

La importancia del elemento principal para SEO.

Construir un componente principal de SEO

Configurar el componente

Importar el componente

Crea las propiedades del componente

Utilice las propiedades en su componente

Cómo - Artículos más populares

Cómo dibujar una cabeza: una guía completa

Comienza con Grav CMS

Cambio de color de Photoshop: 2 herramientas que necesita saber

Crea Rays de Dios en V-Ray

Cómo pintar un zombie en la pintura de estudio de clip

Pinte un retrato en aceites

Mejora tus pinceladas en aceites

Pinte una escena épica de Nueva York

Categorías