[{"data":1,"prerenderedAt":455},["ShallowReactive",2],{"\u002Fblog\u002Fgestionar-redirecciones-permanentes-con-nuxt":3},{"id":4,"title":5,"body":6,"date":433,"description":434,"extension":435,"headerImage":436,"isActive":437,"keywords":438,"meta":445,"navigation":437,"path":446,"seo":447,"stem":448,"subject":449,"summary":451,"tags":452,"__hash__":454},"blog\u002Fblog\u002Fgestionar-redirecciones-permanentes-con-nuxt.md","Gestionar redirecciones permanentes con Nuxt",{"type":7,"value":8,"toc":426},"minimark",[9,14,36,68,71,78,85,89,96,118,121,125,143,155,168,193,208,221,257,271,366,369,373,376,387,390,415,419,422],[10,11,13],"h2",{"id":12},"introducción","Introducción",[15,16,17,18,26,30,31,35],"p",{},"Antes de entrar a la solución es buena idea repasar bien el problema. Cuando hacemos una petición get por HTTP a una dirección web como ",[19,20],"a",{"href":21,"rel":22,"target":25},"https:\u002F\u002Fwww.example.com",[23,24],"noopener","noreferrer","_blank",[19,27,21],{"href":21,"rel":28},[29],"nofollow"," el protocolo va a buscar un fichero con nombre ",[32,33,34],"strong",{},"index"," para servirlo. Esta petición puede definirse de 3 formas:",[37,38,39,49,58],"ul",{},[40,41,42,43,46],"li",{},"Petición a ",[19,44],{"href":21,"rel":45,"target":25},[23,24],[19,47,21],{"href":21,"rel":48},[29],[40,50,42,51,55],{},[19,52],{"href":53,"rel":54,"target":25},"https:\u002F\u002Fwww.example.com\u002F",[23,24],[19,56,53],{"href":53,"rel":57},[29],[40,59,42,60,64,67],{},[19,61],{"href":62,"rel":63,"target":25},"https:\u002F\u002Fwww.example.com\u002Findex.html",[23,24],[19,65,62],{"href":62,"rel":66},[29]," (U otra extensión)",[15,69,70],{},"Las 3 formas son perfectamente válidas y podemos utilizar cualquiera de ellas para servir el contenido de nuestra web (Está lógica aplica a cualquier otro directorio de la web).",[15,72,73,74,77],{},"El problema viene cuando empezamos a analizar el tráfico de nuestra web ya que ",[32,75,76],{},"encontraremos el tráfico segmentado"," en las peticiones posibles, lo que puede dificultar sacar las métricas. Pero algo más problemático es que en algunos casos podemos encontrarnos con que nuestras páginas sean consideradas como contenido duplicado por los buscadores, cosa que puede penalizarnos mucho.",[15,79,80,81,84],{},"Por ello es importante definir una estrategia global en toda nuestra aplicación web para servir el contenido. Ahora vamos a ver cómo hacerlo de forma sencilla para tu aplicación de  ",[32,82,83],{},"Nuxt",".",[10,86,88],{"id":87},"definiendo-una-estrategia-de-urls","Definiendo una estrategia de urls",[15,90,91,92,95],{},"El primer paso es elegir cómo quieres que las urls estén disponibles en tu web. Por ejemplo vamos a suponer que quieres que todas terminen con la barra inclinada (",[32,93,94],{},"Slash",") final.",[15,97,98,99,102,103,106,107,113,114,84],{},"Esto significará que todas tus urls ",[32,100,101],{},"canónicas"," van a estar definidas con la barra al final y tus enlaces internos deben incluir siempre el \"",[32,104,105],{},"\u002F","\". Por ejemplo un push a una url sería de la siguiente forma: ",[108,109,112],"span",{"className":110},[111],"inline-coding","$router.push('\u002Fsample-page\u002F')"," o de forma nativa ",[108,115,117],{"className":116},[111],"window.location = '\u002Fsample-page\u002F'",[15,119,120],{},"Ahora que hemos definido cómo van a estar disponibles nuestras url pasamos a hacer las redirecciones automáticas.",[10,122,124],{"id":123},"configurando-las-redirecciones","Configurando las redirecciones",[15,126,127,128,131,132,135,136,138,139,142],{},"Como vamos a querer que toda url que no acabe en ",[32,129,130],{},"slash"," sea redireccionada siempre a la url que sí lo tiene, vamos a configurar una ",[32,133,134],{},"redirección permanente",", de manera que nuestra aplicación al recibir peticiones en urls que no acaben en ",[32,137,130],{}," responderá con un código ",[32,140,141],{},"301"," y hará la redirección automática a la página con slash.",[15,144,145,146,149,150,84],{},"Afortunadamente tenemos un ",[32,147,148],{},"módulo de Nuxt"," con el que podemos configurar de forma sencilla todo tipo de redirecciones: ",[19,151,152],{"href":152,"rel":153,"title":154},"https:\u002F\u002Fgithub.com\u002Fnuxt-community\u002Fredirect-module#readme",[29],"Documentación del módulo redirect de Nuxt",[15,156,157,158,162,163,167],{},"Lo podemos con ",[108,159,161],{"className":160},[111],"npm"," o ",[108,164,166],{"className":165},[111],"yarn",":",[169,170,176],"pre",{"className":171,"code":172,"filename":173,"language":174,"meta":175,"style":175},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm install @nuxtjs\u002Fredirect-module\n","NPM","bash","",[177,178,179],"code",{"__ignoreMap":175},[108,180,183,186,190],{"class":181,"line":182},"line",1,[108,184,161],{"class":185},"sBMFI",[108,187,189],{"class":188},"sfazB"," install",[108,191,192],{"class":188}," @nuxtjs\u002Fredirect-module\n",[169,194,197],{"className":171,"code":195,"filename":196,"language":174,"meta":175,"style":175},"yarn add @nuxtjs\u002Fredirect-module\n","YARN",[177,198,199],{"__ignoreMap":175},[108,200,201,203,206],{"class":181,"line":182},[108,202,166],{"class":185},[108,204,205],{"class":188}," add",[108,207,192],{"class":188},[15,209,210,211,216,217,167],{},"Una vez instalado el paquete añadimos el módulo a Nuxt. Dentro del fichero ",[108,212,215],{"className":213},[214],"inline-file","nuxt.config.js"," en el atributo ",[108,218,220],{"className":219},[111],"modules",[169,222,226],{"className":223,"code":224,"filename":215,"language":225,"meta":175,"style":175},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","modules: [\n  '@nuxtjs\u002Fredirect-module'\n]\n","js",[177,227,228,239,251],{"__ignoreMap":175},[108,229,230,232,235],{"class":181,"line":182},[108,231,220],{"class":185},[108,233,167],{"class":234},"sMK4o",[108,236,238],{"class":237},"sTEyZ"," [\n",[108,240,242,245,248],{"class":181,"line":241},2,[108,243,244],{"class":234},"  '",[108,246,247],{"class":188},"@nuxtjs\u002Fredirect-module",[108,249,250],{"class":234},"'\n",[108,252,254],{"class":181,"line":253},3,[108,255,256],{"class":237},"]\n",[15,258,259,260,262,263,267,268,270],{},"Ya tenemos instalado el módulo por lo que vamos a aplicar la configuración para que todas las rutas acaben con ",[32,261,130],{},". Para ello creamos el atributo ",[108,264,266],{"className":265},[111],"redirect"," dentro de la configuración de ",[32,269,83],{}," (Puedes ponerlo justo debajo de los módulos):",[169,272,274],{"className":223,"code":273,"filename":215,"language":225,"meta":175,"style":175},"redirect: [\n  { from: '^.*(?\u003C!\u002F)$', to: (from, req) => req.url + '\u002F', statusCode: 301 }\n]\n",[177,275,276,284,362],{"__ignoreMap":175},[108,277,278,280,282],{"class":181,"line":182},[108,279,266],{"class":185},[108,281,167],{"class":234},[108,283,238],{"class":237},[108,285,286,289,293,295,298,301,304,307,311,313,316,320,322,325,328,332,334,336,339,342,344,346,348,350,353,355,359],{"class":181,"line":241},[108,287,288],{"class":234},"  {",[108,290,292],{"class":291},"swJcz"," from",[108,294,167],{"class":234},[108,296,297],{"class":234}," '",[108,299,300],{"class":188},"^.*(?\u003C!\u002F)$",[108,302,303],{"class":234},"'",[108,305,306],{"class":234},",",[108,308,310],{"class":309},"s2Zo4"," to",[108,312,167],{"class":234},[108,314,315],{"class":234}," (",[108,317,319],{"class":318},"sHdIc","from",[108,321,306],{"class":234},[108,323,324],{"class":318}," req",[108,326,327],{"class":234},")",[108,329,331],{"class":330},"spNyl"," =>",[108,333,324],{"class":237},[108,335,84],{"class":234},[108,337,338],{"class":237},"url ",[108,340,341],{"class":234},"+",[108,343,297],{"class":234},[108,345,105],{"class":188},[108,347,303],{"class":234},[108,349,306],{"class":234},[108,351,352],{"class":291}," statusCode",[108,354,167],{"class":234},[108,356,358],{"class":357},"sbssI"," 301",[108,360,361],{"class":234}," }\n",[108,363,364],{"class":181,"line":253},[108,365,256],{"class":237},[15,367,368],{},"Es importante que indiquemos que el código de redirección sea 301 ya que queremos que aparezca la redirección como permanente.",[10,370,372],{"id":371},"probando-las-redirecciones","Probando las redirecciones",[15,374,375],{},"Tenemos todo listo y configurado por lo que vamos a probarlo. Al ejecutar nuestra aplicación en local y acceder a cualquier url, vamos a utilizar el inspector de nuestro navegador para comprobar que todo funciona como esperamos.",[15,377,378,379,382,383,386],{},"Para ello abrimos la pestaña ",[32,380,381],{},"Network"," y filtramos por peticiones a documentos (Subpestaña ",[32,384,385],{},"Doc","). De esta forma vemos las peticiones a los documentos HTML que sirven nuestras url.",[15,388,389],{},"Si inspeccionamos por ejemplo las peticiones de esta página podremos comprobar que hemos aplicado los cambios de la redirección mirando las cabeceras de las peticiones HTTP.",[37,391,392,404],{},[40,393,394,395,167,397,400],{},"Petición terminada en ",[32,396,130],{},[398,399],"br",{},[401,402],"img",{"alt":175,"src":403},"\u002Fimages\u002Fredirect-200.webp",[40,405,406,407,167,410,412],{},"Petición sin ",[32,408,409],{},"slash redireccionada con 301",[398,411],{},[401,413],{"alt":175,"src":414},"\u002Fimages\u002Fredirect-301.webp",[10,416,418],{"id":417},"para-terminar","Para terminar",[15,420,421],{},"Es muy sencillo gestionar las redirecciones permanentes con este módulo, pero igualmente te recomiendo echarle un vistazo porque tiene varias opciones interesantes y puedes configurar otro tipo de redirecciones como varias páginas a una sola u otros trucos más avanzados.",[423,424,425],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":175,"searchDepth":241,"depth":253,"links":427},[428,429,430,431,432],{"id":12,"depth":241,"text":13},{"id":87,"depth":241,"text":88},{"id":123,"depth":241,"text":124},{"id":371,"depth":241,"text":372},{"id":417,"depth":241,"text":418},"2022-06-07","Aprende a gestionar las redirecciones HTTP permanentes en tu sitio web con Nuxt.","md","blog\u002Fnuxt-redirect",true,[439,440,441,442,443,444],"nuxt redirect","redireccion 301 nuxt","301 nuxt","nuxt slash final","redireccion nuxt","nuxt",{},"\u002Fblog\u002Fgestionar-redirecciones-permanentes-con-nuxt",{"title":5,"description":434},"blog\u002Fgestionar-redirecciones-permanentes-con-nuxt",[83,450],"SEO","Si tienes problemas con las redirecciones en tu aplicación con Nuxt y quieres saber como unificar tus url y mantener una misma estructura de cara a optimizar tus urls para SEO y evitar contenido duplicado, te interesa este artículo.",[453],"Programación","TIBfFflSjcCzEc6KqBrJLnCyDPTGMsDp-UCEpIE_U6M",1786401736521]