{"id":11200,"date":"2023-08-16T16:03:02","date_gmt":"2023-08-16T16:03:02","guid":{"rendered":"https:\/\/wcanvas.com\/?post_type=blogs&#038;p=11200"},"modified":"2024-12-09T17:55:00","modified_gmt":"2024-12-09T17:55:00","slug":"yoast-seo-para-wordpress-sin-cabeza-como-configurarlo-con-graphql-y-next-js","status":"publish","type":"blogs","link":"https:\/\/wcanvas.com\/es\/blog\/yoast-seo-para-wordpress-sin-cabeza-como-configurarlo-con-graphql-y-next-js\/","title":{"rendered":"Yoast SEO para WordPress sin cabeza: c\u00f3mo configurarlo con GraphQL y Next.js"},"content":{"rendered":"\n<p>Como muchos desarrolladores de WordPress headless saben, mejorar el SEO del frontend de tu sitio es muy desafiante cuando se utilizan ciertos frameworks de frontend, como React. Pero en la actualidad, el SEO es un elemento esencial del desarrollo web. Algo que no pod\u00e9s ignorar. Entonces, tiene que haber una soluci\u00f3n, \u00bfcierto?<\/p>\n\n\n\n<p>Afortunadamente, hay muchas soluciones a los desaf\u00edos de SEO que enfrentan los sitios WordPress headless. Este art\u00edculo se enfoca en una de ellas: hacer que el plugin de SEO m\u00e1s popular, Yoast SEO, sea compatible con una implementaci\u00f3n de WordPress headless que utilice una API GraphQL y Next.js para el sitio frontend.<\/p>\n\n\n\n<p>Cuando termines, tendr\u00e1s las herramientas para sacar el m\u00e1ximo provecho de la flexibilidad de la arquitectura headless y de las caracter\u00edsticas SEO de la arquitectura monol\u00edtica. \u00a1Vamos a entrar en tema!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfC\u00f3mo es diferente el SEO en las implementaciones de WordPress headless?<\/h2>\n\n\n\n<p>Un <a href=\"https:\/\/wcanvas.com\/es\/blog\/what-is-a-headless-cms\/\" target=\"_blank\" rel=\"noreferrer noopener\">CMS headless<\/a> separa el frontend y el backend, permitiendo una mayor flexibilidad en la entrega de contenido a m\u00faltiples plataformas y dispositivos a trav\u00e9s de frameworks modernos de frontend, mientras el CMS act\u00faa como el backend del sitio web. WordPress ingres\u00f3 al mercado headless relativamente hace poco, pero ya est\u00e1 siendo adoptado, con nuevos frameworks y plugins que simplifican las implementaciones de WordPress headless apareciendo cada vez m\u00e1s.<\/p>\n\n\n\n<p>Separar el frontend y el backend de WordPress no solo proporciona mayor flexibilidad, sino que tambi\u00e9n conduce a cambios significativos en c\u00f3mo los desarrolladores gestionan la optimizaci\u00f3n para motores de b\u00fasqueda (SEO). WordPress ha sido hist\u00f3ricamente un CMS muy amigable para SEO, y los desarrolladores quieren naturalmente preservar eso, pero el enfoque segregado presenta algunos desaf\u00edos, tales como:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Asegurar que el esquema, los metadatos y la estructura de URL se mantengan desde el backend hasta el frontend.<\/li>\n\n\n\n<li>Validar que el contenido sea amigable para m\u00f3viles.<\/li>\n\n\n\n<li>Asegurar que los nuevos contenidos actualizan el sitemap XML autom\u00e1ticamente.&nbsp;<\/li>\n\n\n\n<li>Implementar soluciones para aumentar la velocidad y mejorar el rendimiento.<\/li>\n<\/ul>\n\n\n\n<p>Navegar estos y otros desaf\u00edos es clave para aprovechar los beneficios de WordPress headless sin sacrificar la hist\u00f3rica alta amigabilidad para SEO de WordPress. Vamos a explorar por qu\u00e9 elegimos Next.js como el framework frontend que proporciona la mejor funcionalidad SEO para tu proyecto de WordPress headless.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfPor qu\u00e9 usar Next.js como framework frontend enfocado en SEO para WordPress headless?<\/h2>\n\n\n\n<p>En nuestra experiencia con desarrolladores, <a href=\"https:\/\/nextjs.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">Next.js<\/a> es el mejor framework frontend para potenciar el SEO en un proyecto de WordPress headless.<\/p>\n\n\n\n<p>Next.js es un framework de React que ofrece excelentes capacidades de SEO. Su principal ventaja en t\u00e9rminos de SEO es que admite la renderizaci\u00f3n del lado del servidor (SSR). Con SSR, los servidores generan contenido HTML y env\u00edan una p\u00e1gina completamente renderizada al cliente (navegador) para mostrar. Dado que los rastreadores de motores de b\u00fasqueda acceden y entienden f\u00e1cilmente el HTML pre-renderizado (en lugar de generarlo din\u00e1micamente), indexan el contenido m\u00e1s eficazmente, mejorando los rankings de b\u00fasqueda.<\/p>\n\n\n\n<p>Adem\u00e1s de SSR, Next.js soporta meta tags. Los meta tags son fragmentos de c\u00f3digo que indican a los motores de b\u00fasqueda de qu\u00e9 trata una p\u00e1gina espec\u00edfica y c\u00f3mo deber\u00edan mostrarla en las p\u00e1ginas de resultados de b\u00fasqueda. Tambi\u00e9n informan a los navegadores c\u00f3mo mostrar la p\u00e1gina a los visitantes. Pod\u00e9s usar el siguiente componente para agregar meta tags a la secci\u00f3n <strong>&lt;head&gt;<\/strong> de la p\u00e1gina:&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript line-numbers\">import Head from 'next\/head'<\/code><\/pre>\n\n\n\n<p>Ahora pod\u00e9s insertar nuevas tags en el HTML de la p\u00e1gina, como:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript line-numbers\">const Example = () =&gt; {\n\n&nbsp;&nbsp;return (\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;Head&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Yoast SEO para WordPress headless con GraphQL y Next.js&lt;\/title&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta name=\"description\" content=\"Generado por Create Next App\" \/&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link rel=\"icon\" href=\"\/favicon.ico\" \/&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/Head&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n\n&nbsp;&nbsp;)\n\n}<\/code><\/pre>\n\n\n\n<p>El SEO de tu p\u00e1gina mejorar\u00e1 usando las tags m\u00e1s relevantes para los resultados de b\u00fasqueda: t\u00edtulo, descripci\u00f3n, robots, redirecci\u00f3n refresh, charset y viewport.<\/p>\n\n\n\n<p>Next.js tambi\u00e9n proporciona seguimiento nativo de estad\u00edsticas SEO esenciales como First Contentful Paint (FCP) y Largest Contentful Paint (LCP) creando un componente App personalizado y definiendo una funci\u00f3n reportWebVitals:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markdown\" class=\"language-markdown line-numbers\">export function reportWebVitals(metric) {\n\n&nbsp;&nbsp;console.log(metric)\n\n}<\/code><\/pre>\n\n\n\n<p>Aparte de estas y otras caracter\u00edsticas para SEO, Next.js es la base de <a href=\"https:\/\/wcanvas.com\/es\/blog\/headless-wordpress-and-faust-js-benefits-and-set-up\/\" target=\"_blank\" rel=\"noreferrer noopener\">Faust.js<\/a>, un framework de WordPress headless creado por WP Engine. Dada la creciente adopci\u00f3n y popularidad de Faust entre los desarrolladores de WordPress headless, tiene sentido familiarizarse con Next.js para aprovechar al m\u00e1ximo sus capacidades.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">C\u00f3mo configurar Yoast SEO para WordPress headless usando GraphQL y Next.js<\/h2>\n\n\n\n<p>Ahora pasemos a configurar Yoast SEO en tu instalaci\u00f3n de WordPress headless, paso a paso.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Paso 1: Instalar los plugins necesarios<\/strong><\/h3>\n\n\n\n<p>Necesitar\u00e1s tres plugins de WordPress para configurar Yoast SEO usando GraphQL y Next.js:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/wordpress.org\/plugins\/wordpress-seo\/\" target=\"_blank\" rel=\"noreferrer noopener\">Yoast SEO<\/a>. El principal plugin de SEO para WordPress.<\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/plugins\/wp-graphql\/\" target=\"_blank\" rel=\"noreferrer noopener\">WPGraphQL<\/a>. El plugin que proporciona un esquema y API GraphQL extendible para cualquier sitio WordPress.<\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/plugins\/add-wpgraphql-seo\/\" target=\"_blank\" rel=\"noreferrer noopener\">WPGraphQL Yoast SEO Addon<\/a>. El plugin para soportar Yoast SEO mientras us\u00e1s WPGraphQL.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Paso 2: Configurar la URL del sitio frontend<\/strong><\/h3>\n\n\n\n<p>Para que el sitio frontend de Next.js refleje los cambios que realizar\u00e1s usando Yoast SEO, deb\u00e9s vincularlo a tu backend de WordPress. Para hacer esto, vamos al panel de administraci\u00f3n, luego a <strong>Settings<\/strong> &gt; <strong>General<\/strong> para acceder a las <strong>Configuraciones Generales<\/strong>. Vamos a la <strong>Direcci\u00f3n del Sitio (URL)<\/strong> y pegamos la URL del sitio frontend.<\/p>\n\n\n\n<p>En este caso, usamos el puerto del servidor de desarrollo predeterminado de Next.js, &#8220;http:\/\/localhost:3000&#8221;. Tambi\u00e9n pod\u00e9s pegar la URL de un sitio en vivo.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"623\" src=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-yoast-seo-next.js-1-1024x623.jpg\" alt=\"captura de pantalla configurando el servidor de desarrollo\" class=\"wp-image-2881\" srcset=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-yoast-seo-next.js-1-1024x623.jpg 1024w, https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-yoast-seo-next.js-1-300x182.jpg 300w, https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-yoast-seo-next.js-1-768x467.jpg 768w, https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-yoast-seo-next.js-1-1536x934.jpg 1536w, https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-yoast-seo-next.js-1.jpg 1730w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Paso 3: Confirmar que Yoast SEO est\u00e1 activo y funcionando<\/h3>\n\n\n\n<p>Ve a cualquier publicaci\u00f3n o p\u00e1gina y hac\u00e9 clic en Editar. Una vez en la interfaz del editor, confirm\u00e1 que pod\u00e9s acceder a la barra lateral de Yoast SEO y desplazarte para confirmar que pod\u00e9s interactuar con las configuraciones de Yoast SEO.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"623\" src=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-yoast-seo-next.js-2-1024x623.jpg\" alt=\"captura de pantalla al hacer clic en el bot\u00f3n de Yoast SEO\" class=\"wp-image-2882\" srcset=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-yoast-seo-next.js-2-1024x623.jpg 1024w, https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-yoast-seo-next.js-2-300x182.jpg 300w, https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-yoast-seo-next.js-2-768x467.jpg 768w, https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-yoast-seo-next.js-2-1536x934.jpg 1536w, https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-yoast-seo-next.js-2.jpg 1730w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"623\" src=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-yoast-seo-next.js-3-1024x623.jpg\" alt=\"captura de pantalla de las configuraciones de Yoast SEO\" class=\"wp-image-2883\" srcset=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-yoast-seo-next.js-3-1024x623.jpg 1024w, https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-yoast-seo-next.js-3-300x182.jpg 300w, https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-yoast-seo-next.js-3-768x467.jpg 768w, https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-yoast-seo-next.js-3-1536x934.jpg 1536w, https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-yoast-seo-next.js-3.jpg 1730w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Una vez que hayas confirmado que Yoast SEO funciona, es hora de experimentar con el campo SEO del IDE GraphiQL.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Paso 4: Exponer los metadatos SEO en el IDE GraphiQL<\/strong><\/h3>\n\n\n\n<p>Desde la barra lateral del panel de administraci\u00f3n, vamos a <strong>GraphQL<\/strong> &gt; <strong>GraphiQL IDE<\/strong>. Te encontrar\u00e1s con esta pantalla. Us\u00e1 el Compositor de Consultas para agregar campos, incluyendo el campo SEO.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"623\" src=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-yoast-seo-next.js-4-1024x623.jpg\" alt=\"captura de pantalla del IDE GraphiQL\" class=\"wp-image-2884\" srcset=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-yoast-seo-next.js-4-1024x623.jpg 1024w, https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-yoast-seo-next.js-4-300x182.jpg 300w, https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-yoast-seo-next.js-4-768x467.jpg 768w, https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-yoast-seo-next.js-4-1536x934.jpg 1536w, https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-yoast-seo-next.js-4.jpg 1730w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>El plugin WPGraphQL Yoast SEO Addon hace realmente f\u00e1cil exponer y consultar los datos SEO en el esquema de WPGraphQL en WordPress. Pod\u00e9s exponer el campo SEO en el IDE GraphiQL y solicitar los datos espec\u00edficos que queremos de vuelta. En este caso, usaremos la siguiente consulta para solicitar la meta descripci\u00f3n SEO, t\u00edtulo y encabezado completo de una p\u00e1gina espec\u00edfica de WordPress:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markdown\" class=\"language-markdown line-numbers\">query PostBySlug($slug: String!): {\n\n&nbsp;&nbsp;&nbsp;&nbsp;generalSettings {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;title\n\n&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&nbsp;&nbsp;postBy(slug: $slug) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;title\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;slug\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;seo {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;metaDesc\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;title\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fullHead\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&nbsp;&nbsp;}\n\n}<\/code><\/pre>\n\n\n\n<p>Usaremos el slug de una publicaci\u00f3n o p\u00e1gina individual como la variable de consulta:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"graphql\" class=\"language-graphql line-numbers\">{\n\n&nbsp;&nbsp;&nbsp;&nbsp;slug: \"tu-slug-aqu\u00ed\"\n\n}<\/code><\/pre>\n\n\n\n<p>Como recordatorio, el slug de WordPress es el texto despu\u00e9s de tu nombre de dominio, que identifica p\u00e1ginas espec\u00edficas en tu sitio (excepto en la p\u00e1gina de inicio). Al crear una consulta donde solicitamos informaci\u00f3n detallada relacionada con SEO y usar el slug de una publicaci\u00f3n o p\u00e1gina como la variable de consulta, estamos solicitando la informaci\u00f3n de SEO para una p\u00e1gina o publicaci\u00f3n espec\u00edfica.<\/p>\n\n\n\n<p>Si hac\u00e9s clic en Play, deber\u00edas recibir la informaci\u00f3n de SEO que solicitaste:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"623\" src=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-yoast-seo-next.js-5-1024x623.jpg\" alt=\"captura de pantalla del IDE GraphiQL\" class=\"wp-image-2885\" srcset=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-yoast-seo-next.js-5-1024x623.jpg 1024w, https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-yoast-seo-next.js-5-300x182.jpg 300w, https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-yoast-seo-next.js-5-768x467.jpg 768w, https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-yoast-seo-next.js-5-1536x934.jpg 1536w, https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-yoast-seo-next.js-5.jpg 1730w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>A este punto, hemos convertido nuestra instalaci\u00f3n de WordPress en un servidor GraphQL listo para proporcionar contenido a nuestra implementaci\u00f3n de Next.js, con el beneficio agregado de entregar metadatos SEO. Nuestro pr\u00f3ximo paso ser\u00e1 usar Next.js para consumir datos de SEO, convertirlos en HTML, y mejorar c\u00f3mo los motores de b\u00fasqueda indexan nuestro sitio frontend.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Paso 5: Consumir los datos SEO desde tu sitio web frontend<\/strong><\/h3>\n\n\n\n<p>Para este paso, necesitar\u00e1s usar tu propio proyecto de Next.js o clonar una demo de un repositorio. Si no ten\u00e9s un proyecto actualmente, pod\u00e9s clonar <a href=\"https:\/\/github.com\/Fran-A-Dev\/buddy-run-\" target=\"_blank\" rel=\"noreferrer noopener\">esta demo de Next.js<\/a> del desarrollador de WP Engine, Francis Agulto.<\/p>\n\n\n\n<p>Abr\u00ed el repositorio en Visual Studio Code, y desde el ra\u00edz del proyecto, and\u00e1 a \u201cpages \/ [slug].js\u201d. \u201c[slug].js\u201d es el archivo de rutas din\u00e1micas para las p\u00e1ginas de detalles de cada publicaci\u00f3n. Si est\u00e1s usando el repositorio clonado, busc\u00e1 la funci\u00f3n <strong>getStaticProps<\/strong> y peg\u00e1 el siguiente c\u00f3digo sobre ella, o cre\u00e1 una nueva funci\u00f3n <strong>getStaticProps<\/strong> si est\u00e1s usando tu propio proyecto:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markdown\" class=\"language-markdown line-numbers\">export async function getStaticProps({ params }) {\n\n&nbsp;&nbsp;const GET_POST = gql`\n\n&nbsp;&nbsp;&nbsp;&nbsp;query PostBySlug($id: ID!) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;post(id: $id, idType: SLUG) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;title\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;date\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;seo {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;metaDesc\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fullHead\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;title\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;author {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;node {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;firstName\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;lastName\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;`;<\/code><\/pre>\n\n\n\n<p>Como pod\u00e9s ver, estamos obteniendo la meta descripci\u00f3n SEO, el encabezado completo, y el t\u00edtulo, los mismos datos que consultamos en el paso anterior. Ahora solo queda mostrarlo en nuestro sitio Next.js agreg\u00e1ndolo a nuestra variable Next.js en Next.js y desestructur\u00e1ndolo para poder agregarlo a nuestro JSX. Para hacer eso, copi\u00e1 el siguiente c\u00f3digo en la parte superior de tu archivo [slug].js:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript line-numbers\">import { client } from \"..\/lib\/apollo\";\n\nimport { gql } from \"@apollo\/client\";\n\nimport Head from \"next\/head\";\n\nexport default function SlugPage({ post }) {\n\n&nbsp;&nbsp;const { seo } = post;\n\n&nbsp;&nbsp;return (\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;Head&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;{seo.title}&lt;\/title&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta name=\"description\" content={seo.metaDesc} \/&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link rel=\"icon\" href=\"\/favicon.ico\" \/&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/Head&gt;<\/code><\/pre>\n\n\n\n<p>Al hacer esto, estamos desestructurando las propiedades SEO en el post y agreg\u00e1ndolas a nuestro etiqueta head de Next.js con la ayuda de next\/head. Si inspeccion\u00e1s tu p\u00e1gina frontend, deber\u00edas ver las propiedades que solicitaste como parte de la etiqueta HTML &lt;head&gt;!<\/p>\n\n\n\n<p>Pod\u00e9s usar este m\u00e9todo para agregar propiedades SEO adicionales a tu sitio web y mejorar su ranking en los motores de b\u00fasqueda.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Mejor\u00e1 el SEO de tu sitio web WordPress headless usando Next.js y GraphQL<\/h2>\n\n\n\n<p>Transicionar a una implementaci\u00f3n headless de WordPress abre nuevas oportunidades para la entrega de contenido, pero viene con algunos desaf\u00edos \u00fanicos para mantener el SEO. Afortunadamente, hay varias soluciones para esos desaf\u00edos, siendo una la combinaci\u00f3n de GraphQL y Next.js.<\/p>\n\n\n\n<p>Next.js ofrece capacidades de renderizaci\u00f3n del lado del servidor (SSR), meta tags y otras caracter\u00edsticas que potencian el SEO, convirti\u00e9ndolo en una excelente alternativa para los desarrolladores de WordPress que incursionan en las aguas headless. Siguiendo los pasos de este art\u00edculo, incorporar\u00e1s Yoast SEO en tu backend WordPress potenciado por GraphQL y aprovechar\u00e1s al m\u00e1ximo el potencial SEO de Next.js.<\/p>\n\n\n\n<p><a href=\"https:\/\/wcanvas.com\/es\/blogs\/\" target=\"_blank\" rel=\"noreferrer noopener\">Visit\u00e1 nuestro blog<\/a> para m\u00e1s gu\u00edas, consejos e insights sobre WordPress.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Como muchos desarrolladores de WordPress headless saben, mejorar el SEO del frontend de tu sitio es muy desafiante cuando se utilizan ciertos frameworks de frontend, como React. Pero en la actualidad, el SEO es un elemento esencial del desarrollo web. Algo que no pod\u00e9s ignorar. Entonces, tiene que haber una soluci\u00f3n, \u00bfcierto? Afortunadamente, hay muchas [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3473,"template":"","blog-categories":[77,79],"class_list":["post-11200","blogs","type-blogs","status-publish","has-post-thumbnail","hentry","blog-categories-paso-a-paso","blog-categories-wordpress-seo"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Yoast SEO para WordPress sin cabeza: c\u00f3mo configurarlo con GraphQL y Next.js - White Canvas<\/title>\n<meta name=\"description\" content=\"El SEO es un desaf\u00edo en proyectos headless. Implement\u00e1 Yoast SEO para WordPress headless y empez\u00e1 a aprovechar al m\u00e1ximo las caracter\u00edsticas de SEO de Next.js.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wcanvas.com\/es\/blog\/yoast-seo-para-wordpress-sin-cabeza-como-configurarlo-con-graphql-y-next-js\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Yoast SEO para WordPress sin cabeza: c\u00f3mo configurarlo con GraphQL y Next.js - White Canvas\" \/>\n<meta property=\"og:description\" content=\"El SEO es un desaf\u00edo en proyectos headless. Implement\u00e1 Yoast SEO para WordPress headless y empez\u00e1 a aprovechar al m\u00e1ximo las caracter\u00edsticas de SEO de Next.js.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wcanvas.com\/es\/blog\/yoast-seo-para-wordpress-sin-cabeza-como-configurarlo-con-graphql-y-next-js\/\" \/>\n<meta property=\"og:site_name\" content=\"White Canvas\" \/>\n<meta property=\"article:modified_time\" content=\"2024-12-09T17:55:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/08\/headless-wordpress-yoast-seo-next.js-HERO.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"11 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t    \"@context\": \"https:\/\/schema.org\",\n\t    \"@graph\": [\n\t        {\n\t            \"@type\": [\n\t                \"Article\",\n\t                \"BlogPosting\"\n\t            ],\n\t            \"@id\": \"https:\/\/wcanvas.com\/es\/blog\/yoast-seo-para-wordpress-sin-cabeza-como-configurarlo-con-graphql-y-next-js\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/wcanvas.com\/es\/blog\/yoast-seo-para-wordpress-sin-cabeza-como-configurarlo-con-graphql-y-next-js\/\"\n\t            },\n\t            \"author\": {\n\t                \"@type\": \"Organization\",\n\t                \"name\": \"Wcanvas\",\n\t                \"url\": \"https:\/\/wcanvas.com\/\"\n\t            },\n\t            \"headline\": \"Yoast SEO para WordPress sin cabeza: c\u00f3mo configurarlo con GraphQL y Next.js\",\n\t            \"datePublished\": \"2023-08-16T16:03:02+00:00\",\n\t            \"dateModified\": \"2024-12-09T17:55:00+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@type\": \"WebPage\",\n\t                \"@id\": \"https:\/\/wcanvas.com\/es\/blog\/yoast-seo-para-wordpress-sin-cabeza-como-configurarlo-con-graphql-y-next-js\/\"\n\t            },\n\t            \"wordCount\": 1699,\n\t            \"publisher\": {\n\t                \"@type\": \"Organization\",\n\t                \"name\": \"Wcanvas\",\n\t                \"logo\": {\n\t                    \"@type\": \"ImageObject\",\n\t                    \"url\": \"https:\/\/wcanvas.com\/wp-content\/themes\/wcanvas\/assets\/img\/elements\/logo-white-white.png\"\n\t                }\n\t            },\n\t            \"image\": [],\n\t            \"thumbnailUrl\": \"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/08\/headless-wordpress-yoast-seo-next.js-HERO.jpg\",\n\t            \"inLanguage\": \"es\",\n\t            \"description\": null\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"https:\/\/wcanvas.com\/es\/blog\/yoast-seo-para-wordpress-sin-cabeza-como-configurarlo-con-graphql-y-next-js\/\",\n\t            \"url\": \"https:\/\/wcanvas.com\/es\/blog\/yoast-seo-para-wordpress-sin-cabeza-como-configurarlo-con-graphql-y-next-js\/\",\n\t            \"name\": \"Yoast SEO para WordPress sin cabeza: c\u00f3mo configurarlo con GraphQL y Next.js - White Canvas\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/wcanvas.com\/es\/#website\"\n\t            },\n\t            \"primaryImageOfPage\": {\n\t                \"@id\": \"https:\/\/wcanvas.com\/es\/blog\/yoast-seo-para-wordpress-sin-cabeza-como-configurarlo-con-graphql-y-next-js\/#primaryimage\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/wcanvas.com\/es\/blog\/yoast-seo-para-wordpress-sin-cabeza-como-configurarlo-con-graphql-y-next-js\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/08\/headless-wordpress-yoast-seo-next.js-HERO.jpg\",\n\t            \"datePublished\": \"2023-08-16T16:03:02+00:00\",\n\t            \"dateModified\": \"2024-12-09T17:55:00+00:00\",\n\t            \"description\": \"El SEO es un desaf\u00edo en proyectos headless. Implement\u00e1 Yoast SEO para WordPress headless y empez\u00e1 a aprovechar al m\u00e1ximo las caracter\u00edsticas de SEO de Next.js.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/wcanvas.com\/es\/blog\/yoast-seo-para-wordpress-sin-cabeza-como-configurarlo-con-graphql-y-next-js\/#breadcrumb\"\n\t            },\n\t            \"inLanguage\": \"es\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"ReadAction\",\n\t                    \"target\": [\n\t                        \"https:\/\/wcanvas.com\/es\/blog\/yoast-seo-para-wordpress-sin-cabeza-como-configurarlo-con-graphql-y-next-js\/\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"ImageObject\",\n\t            \"inLanguage\": \"es\",\n\t            \"@id\": \"https:\/\/wcanvas.com\/es\/blog\/yoast-seo-para-wordpress-sin-cabeza-como-configurarlo-con-graphql-y-next-js\/#primaryimage\",\n\t            \"url\": \"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/08\/headless-wordpress-yoast-seo-next.js-HERO.jpg\",\n\t            \"contentUrl\": \"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/08\/headless-wordpress-yoast-seo-next.js-HERO.jpg\",\n\t            \"width\": 1200,\n\t            \"height\": 628,\n\t            \"caption\": \"javascript code\"\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/wcanvas.com\/es\/blog\/yoast-seo-para-wordpress-sin-cabeza-como-configurarlo-con-graphql-y-next-js\/#breadcrumb\",\n\t            \"itemListElement\": [\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 1,\n\t                    \"name\": \"Home\",\n\t                    \"item\": \"https:\/\/wcanvas.com\/es\/\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 2,\n\t                    \"name\": \"Blogs\",\n\t                    \"item\": \"https:\/\/wcanvas.com\/es\/blogs\/\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 3,\n\t                    \"name\": \"Yoast SEO para WordPress sin cabeza: c\u00f3mo configurarlo con GraphQL y Next.js\"\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebSite\",\n\t            \"@id\": \"https:\/\/wcanvas.com\/es\/#website\",\n\t            \"url\": \"https:\/\/wcanvas.com\/es\/\",\n\t            \"name\": \"White Canvas\",\n\t            \"description\": \"\",\n\t            \"publisher\": {\n\t                \"@id\": \"https:\/\/wcanvas.com\/es\/#organization\"\n\t            },\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"SearchAction\",\n\t                    \"target\": {\n\t                        \"@type\": \"EntryPoint\",\n\t                        \"urlTemplate\": \"https:\/\/wcanvas.com\/es\/?s={search_term_string}\"\n\t                    },\n\t                    \"query-input\": {\n\t                        \"@type\": \"PropertyValueSpecification\",\n\t                        \"valueRequired\": true,\n\t                        \"valueName\": \"search_term_string\"\n\t                    }\n\t                }\n\t            ],\n\t            \"inLanguage\": \"es\"\n\t        },\n\t        {\n\t            \"@type\": \"Organization\",\n\t            \"@id\": \"https:\/\/wcanvas.com\/es\/#organization\",\n\t            \"name\": \"White Canvas\",\n\t            \"url\": \"https:\/\/wcanvas.com\/es\/\",\n\t            \"logo\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"es\",\n\t                \"@id\": \"https:\/\/wcanvas.com\/es\/#\/schema\/logo\/image\/\",\n\t                \"url\": \"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/01\/logowhitecanvas.svg\",\n\t                \"contentUrl\": \"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/01\/logowhitecanvas.svg\",\n\t                \"width\": 115,\n\t                \"height\": 32,\n\t                \"caption\": \"White Canvas\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/wcanvas.com\/es\/#\/schema\/logo\/image\/\"\n\t            },\n\t            \"alternateName\": \"Wcanvas\",\n\t            \"contactPoint\": [\n\t                {\n\t                    \"@type\": \"ContactPoint\",\n\t                    \"telephone\": \"+1 (347) 688 2902\",\n\t                    \"contactType\": \"sales\",\n\t                    \"contactOption\": \"TollFree\",\n\t                    \"areaServed\": \"US\",\n\t                    \"availableLanguage\": \"en\"\n\t                },\n\t                {\n\t                    \"@type\": \"ContactPoint\",\n\t                    \"telephone\": \"+54 (11) 5236 4717\",\n\t                    \"contactType\": \"sales\",\n\t                    \"contactOption\": \"TollFree\",\n\t                    \"areaServed\": \"AR\",\n\t                    \"availableLanguage\": \"es\"\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"Person\",\n\t            \"@id\": \"https:\/\/wcanvas.com\/es\/#\/schema\/person\/ea362f7fa9eb0239142e5e982bd8c198\",\n\t            \"name\": \"Nicolas Pisani\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"es\",\n\t                \"@id\": \"https:\/\/wcanvas.com\/es\/#\/schema\/person\/image\/\",\n\t                \"url\": \"https:\/\/wcanvas.com\/wp-content\/uploads\/2022\/12\/cropped-avatar-nico-96x96.png\",\n\t                \"contentUrl\": \"https:\/\/wcanvas.com\/wp-content\/uploads\/2022\/12\/cropped-avatar-nico-96x96.png\",\n\t                \"caption\": \"Nicolas Pisani\"\n\t            },\n\t            \"sameAs\": [\n\t                \"https:\/\/wcanvas.com\",\n\t                \"#\",\n\t                \"https:\/\/www.instagram.com\/whitecanvasteam\/\",\n\t                \"https:\/\/x.com\/wcanvas\"\n\t            ]\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Yoast SEO para WordPress sin cabeza: c\u00f3mo configurarlo con GraphQL y Next.js - White Canvas","description":"El SEO es un desaf\u00edo en proyectos headless. Implement\u00e1 Yoast SEO para WordPress headless y empez\u00e1 a aprovechar al m\u00e1ximo las caracter\u00edsticas de SEO de Next.js.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/wcanvas.com\/es\/blog\/yoast-seo-para-wordpress-sin-cabeza-como-configurarlo-con-graphql-y-next-js\/","og_locale":"es_ES","og_type":"article","og_title":"Yoast SEO para WordPress sin cabeza: c\u00f3mo configurarlo con GraphQL y Next.js - White Canvas","og_description":"El SEO es un desaf\u00edo en proyectos headless. Implement\u00e1 Yoast SEO para WordPress headless y empez\u00e1 a aprovechar al m\u00e1ximo las caracter\u00edsticas de SEO de Next.js.","og_url":"https:\/\/wcanvas.com\/es\/blog\/yoast-seo-para-wordpress-sin-cabeza-como-configurarlo-con-graphql-y-next-js\/","og_site_name":"White Canvas","article_modified_time":"2024-12-09T17:55:00+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/08\/headless-wordpress-yoast-seo-next.js-HERO.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Tiempo de lectura":"11 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/wcanvas.com\/es\/blog\/yoast-seo-para-wordpress-sin-cabeza-como-configurarlo-con-graphql-y-next-js\/#article","isPartOf":{"@id":"https:\/\/wcanvas.com\/es\/blog\/yoast-seo-para-wordpress-sin-cabeza-como-configurarlo-con-graphql-y-next-js\/"},"author":{"@type":"Organization","name":"Wcanvas","url":"https:\/\/wcanvas.com\/"},"headline":"Yoast SEO para WordPress sin cabeza: c\u00f3mo configurarlo con GraphQL y Next.js","datePublished":"2023-08-16T16:03:02+00:00","dateModified":"2024-12-09T17:55:00+00:00","mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/wcanvas.com\/es\/blog\/yoast-seo-para-wordpress-sin-cabeza-como-configurarlo-con-graphql-y-next-js\/"},"wordCount":1699,"publisher":{"@type":"Organization","name":"Wcanvas","logo":{"@type":"ImageObject","url":"https:\/\/wcanvas.com\/wp-content\/themes\/wcanvas\/assets\/img\/elements\/logo-white-white.png"}},"image":[],"thumbnailUrl":"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/08\/headless-wordpress-yoast-seo-next.js-HERO.jpg","inLanguage":"es","description":null},{"@type":"WebPage","@id":"https:\/\/wcanvas.com\/es\/blog\/yoast-seo-para-wordpress-sin-cabeza-como-configurarlo-con-graphql-y-next-js\/","url":"https:\/\/wcanvas.com\/es\/blog\/yoast-seo-para-wordpress-sin-cabeza-como-configurarlo-con-graphql-y-next-js\/","name":"Yoast SEO para WordPress sin cabeza: c\u00f3mo configurarlo con GraphQL y Next.js - White Canvas","isPartOf":{"@id":"https:\/\/wcanvas.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wcanvas.com\/es\/blog\/yoast-seo-para-wordpress-sin-cabeza-como-configurarlo-con-graphql-y-next-js\/#primaryimage"},"image":{"@id":"https:\/\/wcanvas.com\/es\/blog\/yoast-seo-para-wordpress-sin-cabeza-como-configurarlo-con-graphql-y-next-js\/#primaryimage"},"thumbnailUrl":"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/08\/headless-wordpress-yoast-seo-next.js-HERO.jpg","datePublished":"2023-08-16T16:03:02+00:00","dateModified":"2024-12-09T17:55:00+00:00","description":"El SEO es un desaf\u00edo en proyectos headless. Implement\u00e1 Yoast SEO para WordPress headless y empez\u00e1 a aprovechar al m\u00e1ximo las caracter\u00edsticas de SEO de Next.js.","breadcrumb":{"@id":"https:\/\/wcanvas.com\/es\/blog\/yoast-seo-para-wordpress-sin-cabeza-como-configurarlo-con-graphql-y-next-js\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wcanvas.com\/es\/blog\/yoast-seo-para-wordpress-sin-cabeza-como-configurarlo-con-graphql-y-next-js\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/wcanvas.com\/es\/blog\/yoast-seo-para-wordpress-sin-cabeza-como-configurarlo-con-graphql-y-next-js\/#primaryimage","url":"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/08\/headless-wordpress-yoast-seo-next.js-HERO.jpg","contentUrl":"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/08\/headless-wordpress-yoast-seo-next.js-HERO.jpg","width":1200,"height":628,"caption":"javascript code"},{"@type":"BreadcrumbList","@id":"https:\/\/wcanvas.com\/es\/blog\/yoast-seo-para-wordpress-sin-cabeza-como-configurarlo-con-graphql-y-next-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wcanvas.com\/es\/"},{"@type":"ListItem","position":2,"name":"Blogs","item":"https:\/\/wcanvas.com\/es\/blogs\/"},{"@type":"ListItem","position":3,"name":"Yoast SEO para WordPress sin cabeza: c\u00f3mo configurarlo con GraphQL y Next.js"}]},{"@type":"WebSite","@id":"https:\/\/wcanvas.com\/es\/#website","url":"https:\/\/wcanvas.com\/es\/","name":"White Canvas","description":"","publisher":{"@id":"https:\/\/wcanvas.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wcanvas.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/wcanvas.com\/es\/#organization","name":"White Canvas","url":"https:\/\/wcanvas.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/wcanvas.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/01\/logowhitecanvas.svg","contentUrl":"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/01\/logowhitecanvas.svg","width":115,"height":32,"caption":"White Canvas"},"image":{"@id":"https:\/\/wcanvas.com\/es\/#\/schema\/logo\/image\/"},"alternateName":"Wcanvas","contactPoint":[{"@type":"ContactPoint","telephone":"+1 (347) 688 2902","contactType":"sales","contactOption":"TollFree","areaServed":"US","availableLanguage":"en"},{"@type":"ContactPoint","telephone":"+54 (11) 5236 4717","contactType":"sales","contactOption":"TollFree","areaServed":"AR","availableLanguage":"es"}]},{"@type":"Person","@id":"https:\/\/wcanvas.com\/es\/#\/schema\/person\/ea362f7fa9eb0239142e5e982bd8c198","name":"Nicolas Pisani","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/wcanvas.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/wcanvas.com\/wp-content\/uploads\/2022\/12\/cropped-avatar-nico-96x96.png","contentUrl":"https:\/\/wcanvas.com\/wp-content\/uploads\/2022\/12\/cropped-avatar-nico-96x96.png","caption":"Nicolas Pisani"},"sameAs":["https:\/\/wcanvas.com","#","https:\/\/www.instagram.com\/whitecanvasteam\/","https:\/\/x.com\/wcanvas"]}]}},"_links":{"self":[{"href":"https:\/\/wcanvas.com\/es\/wp-json\/wp\/v2\/blogs\/11200","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wcanvas.com\/es\/wp-json\/wp\/v2\/blogs"}],"about":[{"href":"https:\/\/wcanvas.com\/es\/wp-json\/wp\/v2\/types\/blogs"}],"author":[{"embeddable":true,"href":"https:\/\/wcanvas.com\/es\/wp-json\/wp\/v2\/users\/1"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wcanvas.com\/es\/wp-json\/wp\/v2\/media\/3473"}],"wp:attachment":[{"href":"https:\/\/wcanvas.com\/es\/wp-json\/wp\/v2\/media?parent=11200"}],"wp:term":[{"taxonomy":"blog-categories","embeddable":true,"href":"https:\/\/wcanvas.com\/es\/wp-json\/wp\/v2\/blog-categories?post=11200"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}