¿Alguna vez ha querido que su sitio Next.js se muestre como un objeto enriquecido cuando se comparte en las redes sociales? Si es así, debe implementar el protocolo Open Graph.
El paquete next-seo facilita la adición de etiquetas Open Graph a su sitio Next.js. También puede utilizar un enfoque más manual para un control más preciso sobre el resultado final.
Finalmente, querrá considerar exactamente qué información incluir en sus etiquetas.
¿Qué es el gráfico abierto?
El protocolo Open Graph es un estándar abierto que permite a los desarrolladores controlar cómo las redes sociales muestran su contenido. Originalmente fue desarrollado por Facebook, pero desde entonces muchas otras plataformas han adoptado el protocolo. Estos incluyen Twitter, LinkedIn y Pinterest.
Open Graph le permite especificar exactamente cómo otros sitios deben mostrar su contenido, asegurando que se vea bien y sea fácil de leer. También permite un mayor control sobre cómo se representan los enlaces. Esto facilita el seguimiento de los clics y otras métricas de participación.
¿Por qué usar el protocolo Open Graph?
Hay tres áreas principales que Open Graph debería mejorar: participación en las redes sociales, SEO y tráfico del sitio web.
Open Graph puede ayudar a mejorar la participación en las redes sociales al facilitar que los usuarios compartan su contenido. Al especificar cómo los sitios deben mostrar su contenido, puede hacerlo más atractivo visualmente y fácil de leer. Esto, a su vez, puede generar más acciones y me gusta, así como mayores tasas de clics.
2. Mejora el SEO
Open Graph también puede ayudar mejora tu seo. Al especificar el título, la descripción y la imagen de cada contenido, puede controlar cómo aparece en los resultados de búsqueda. Esto puede ayudar a aumentar la tasa de clics en su sitio web, así como a mejorar su clasificación general.
3. Aumentar el tráfico del sitio web
Finalmente, Open Graph puede ayudar a aumentar el tráfico del sitio web. Al facilitar que los usuarios compartan su contenido, puede aumentar la cantidad de personas que lo ven. Esto, a su vez, puede generar más visitantes del sitio web y un mayor tráfico.
4. Mejore la experiencia del usuario
Otro beneficio de usar el protocolo Open Graph es que puede mejorar la experiencia del usuario en su sitio web. Al incluir metadatos, puede ayudar a la accesibilidad y reutilizar los datos, asegurando que los usuarios vean la información más relevante. Esto puede conducir a una mejor experiencia general en su sitio, lo que puede generar más visitantes que regresan.
¿Por qué usar Next.js?
Hay dos razones principales para usar Next.js: mejorar el rendimiento y facilitar el desarrollo.
1. Mejorar el rendimiento
Next.js puede ayudar a mejorar el rendimiento mediante la división de código de su aplicación y la obtención previa de recursos. Esto puede conducir a un tiempo de carga más rápido y una carga de servidor reducida.
2. Facilitar el desarrollo
Next.js también puede facilitar el desarrollo al proporcionar una forma sencilla de crear aplicaciones React renderizadas por el servidor. Esto puede hacer que sea más rápido y fácil desarrollar e implementar aplicaciones React.
Cómo implementar el protocolo Open Graph en Next.js
Hay dos formas de implementar Open Graph Protocol en Next.js: usando el paquete next-seo o creando un personalizado _documento.js expediente.
Método 1: usar el paquete next-seo
La forma más fácil de implementar Open Graph Protocol en Next.js es usar el paquete next-seo. Este paquete generará automáticamente las etiquetas necesarias para usted.
Para instalar el paquete next-seo, ejecute el siguiente comando:
npm Instalar en pcSiguiente-seo --ahorrarDespués de instalar el paquete, puede usarlo agregando el siguiente código a su índice.js expediente:
importar { SiguienteSeo } de 'siguiente-seo';constante Página de demostración = () => (
<>
<SiguienteSeo
titulo="Tu título"
descripción="Esta es una descripción de demostración"
canónico ="https://www.example.com"
abrirGráfico={{
URL: 'https://www.example.com',
título: 'Abrir título de gráfico',
descripción: 'Abrir gráfico Descripción',
imágenes: [
{
URL: 'https://www.example.com/og-image01.jpg',
ancho: 800,
altura: 600,
alternativa: 'Imagen alternativa',
escribe: 'imagen/jpeg',
},
{
URL: 'https://www.example.com/og-image02.jpg',
ancho: 900,
altura: 800,
alternativa: 'Og Image Alt Segundo',
escribe: 'imagen/jpeg',
},
{ URL: 'https://www.ejemplo.com/og-image03.jpg' },
{ URL: 'https://www.ejemplo.com/og-image04.jpg' },
],
nombre del sitio: 'Nombre de su sitio',
}}
twitter={{
resolver: '@resolver',
sitio: '@sitio',
tipo de tarjeta: 'resumen_imagen_grande',
}}
/>
<pags>Página de demostración</pags>
</>
);
exportardefecto página de demostración;
Este código importa el componente NextSeo del paquete next-seo y lo usa para especificar el título, la descripción y la imagen de la página. También especifica el nombre del sitio y el identificador de Twitter.
Ejecute el siguiente comando para iniciar el servidor de desarrollo:
npm ejecutar devAbierto http://localhost: 3000 en su navegador para ver la página de demostración.
Método 2: usar el archivo _document.js personalizado
Otra forma de implementar Open Graph Protocol en Next.js es crear un personalizado _documento.js expediente. Este archivo le permitirá especificar las etiquetas Open Graph usted mismo y crear código reutilizable para todas las paginas.
Para configurar una costumbre _documento.js archivo, cree un nuevo archivo en su paginas directorio con el siguiente contenido:
importar Documento, { Html, Encabezado, Principal, NextScript } de 'Siguiente/documento';claseMi documentoextiendeDocumento{
estáticoasíncrono getInitialProps (ctx) {
constante propsinicial = esperar Documento.getInitialProps (ctx);
devolver { ...AccesoriosIniciales };
}prestar() {
devolver (
<html>
<Cabeza>
<meta propiedad ="og: URL" contenido="https://www.example.com" />
<meta propiedad ="og: titulo" contenido="Abrir título de gráfico" />
<meta propiedad ="og: descripción" contenido="Abrir gráfico Descripción" />
<meta propiedad ="og: imagen" contenido="https://www.example.com/og-image.jpg" />
<meta propiedad ="og: nombre_sitio" contenido="Nombre de su sitio" />
<metanombre="twitter: tarjeta" contenido="resumen_imagen_grande" />
<metanombre="Twitter: sitio" contenido="@sitio" />
<metanombre="twitter: creador" contenido="@resolver" />
</Head>
<cuerpo>
<Principal />
<Siguiente Script />
</body>
</Html>
);
}
}
exportardefecto Mi documento;
Agregue el siguiente contenido a su archivo index.js:
constante Página de demostración = () => (
<>
<pags>Página de demostración</pags>
</>
);
exportardefecto página de demostración;
Este código importa el componente Documento de siguiente/documento y crea un Mi documento componente. Especifica el título, la descripción y la imagen de nuestra página, así como el nombre del sitio y el identificador de Twitter.
Ejecute el siguiente comando para iniciar el servidor de desarrollo:
npm ejecutar devAbierto http://localhost: 3000 en su navegador para ver la página de demostración.
Agregar etiquetas Open Graph a su sitio web puede brindarle más control sobre cómo aparece en las publicaciones de las redes sociales y puede ayudar a mejorar las tasas de clics. También puede mejorar la forma en que su sitio web aparece en los SERP, lo que en última instancia puede conducir a una mejor clasificación del sitio web.
También hay muchas otras formas de mejorar la clasificación del sitio. Debe optimizar su sitio web para dispositivos móviles y usar títulos y descripciones ricos en palabras clave. Pero el uso de etiquetas Open Graph es una manera rápida y fácil de comenzar.
