{"id":31959,"date":"2024-11-12T12:39:32","date_gmt":"2024-11-12T12:39:32","guid":{"rendered":"https:\/\/www.seobility.net\/?post_type=wiki&p=31959"},"modified":"2025-03-18T14:06:43","modified_gmt":"2025-03-18T14:06:43","slug":"Frontend","status":"publish","type":"wiki","link":"https:\/\/www.seobility.net\/es\/wiki\/Frontend","title":{"rendered":"Frontend"},"content":{"rendered":"

\u00bfQu\u00e9 es el frontend?<\/span><\/h2>\n

Frontend es un t\u00e9rmino que se utiliza en el desarrollo de software en conjunto con el backend y se refiere a la interfaz que cubre todo lo que se puede ver, tocar y experimentar en un website o app.\n<\/p>\n

Por ejemplo, en un sitio web, es el contenido (publicaciones, p\u00e1ginas, medios y comentarios), dise\u00f1o y navegaci\u00f3n; en un software de base de datos, es la interfaz en donde las personas pueden ingresar y se les muestra su informaci\u00f3n.\n<\/p>\n

\u00bfC\u00f3mo distinguir el frontend del backend?<\/span><\/h2>\n
\n
\"Distinguir<\/a> <\/p>\n
Imagen:<\/b> Frontend vs. Backend – Autor: Seobility – Licencia: CC BY-SA 4.0<\/a><\/div>\n<\/div>\n<\/div>\n

El \u00abbackend\u00bb es todo aquello que no se puede ver en un software o sitio web. Por ejemplo: los servidores que alojan sitios web, las bases en donde se almacenan los datos de entrada de las personas y los contenidos del website.\n<\/p>\n

En el caso de los sitios web, Internet conecta el frontend y el backend. Por otro lado, cuando se trata de CMSs o sistemas de gesti\u00f3n de contenidos<\/a>, los t\u00e9rminos frontend y backend hacen referencia a la interfaz de uso final del CMS y al \u00e1rea de administraci\u00f3n. Incluso, cuando se menciona la autenticaci\u00f3n o la autorizaci\u00f3n en los sitios web, tambi\u00e9n son parte del backend.\n<\/p>\n

\u00bfCu\u00e1ndo se habla de un frontend SEO friendly?<\/span><\/h2>\n

Cuando las personas pueden navegar f\u00e1cilmente por un sitio web, tienden a permanecer m\u00e1s tiempo, lo cual resulta elemental para el rankeo de un sitio web porque los tiempos de permanencia<\/a> y las tasas de rebote son criterios de evaluaci\u00f3n importantes para Google.\n<\/p>\n

A continuaci\u00f3n, te explicamos algunos factores que hacen al frontend m\u00e1s amigable con el SEO y, por lo tanto, mejoran la usabilidad y el ranking de un sitio en Google.\n<\/p>\n

C\u00f3digo HTML limpio y sem\u00e1ntico<\/span><\/h3>\n

Un c\u00f3digo HTML limpio y sem\u00e1nticamente impecable es un requisito b\u00e1sico para una interfaz SEO friendly. Errores en el c\u00f3digo HTML podr\u00edan ser la raz\u00f3n por la cual las ara\u00f1as web<\/a> no consigan rastrear una p\u00e1gina e incluso no puedan indexarla<\/a>.\n<\/p>\n

Evitar framesets y el contenido Flash<\/span><\/h3>\n

Los framesets<\/a>, as\u00ed como el contenido Flash est\u00e1n obsoletos y no se deber\u00edan integrar en los websites.\n<\/p>\n

Velocidad de carga de la p\u00e1gina<\/span><\/h3>\n

Si una p\u00e1gina carga muy lento, las personas podr\u00edan abandonar el sitio web. As\u00ed, se considera que el m\u00e1ximo tiempo de carga aceptable son 3 segundos, siendo 200 ms la velocidad \u00f3ptima.\n<\/p>\n

De hecho, en los sitios m\u00f3viles, la pronta visualizaci\u00f3n del above the fold<\/a> juega un papel a\u00fan m\u00e1s importante. Por esta raz\u00f3n, los y las webmasters deben monitorear la velocidad de carga<\/a> de su sitio web. Este seguimiento es muy sencillo y se puede hacer con herramientas gratuitas como la PageSpeed Insights<\/a> de Google.\n<\/p>\n

Dise\u00f1o responsive<\/span><\/h3>\n

Adem\u00e1s de la velocidad de carga, el dise\u00f1o responsive tambi\u00e9n juega un papel importante cuando se trata de un buen frontend, especialmente ahora que los websites utilizan m\u00e1s el mobile first<\/a>, puesto a que la audiencia navega mucho m\u00e1s con dispositivos m\u00f3viles y distintos tama\u00f1os de pantalla.\n<\/p>\n

Por lo tanto, los sitios web y las im\u00e1genes siempre deben dise\u00f1arse de manera que se adapten a todos los viewports<\/a>, lo cual no solo ayuda en la usabilidad m\u00f3vil, sino que tambi\u00e9n facilita el rastreo de los sitios web.\n<\/p>\n

Datos estructurados y accesibilidad<\/span><\/h3>\n

Un buen marcado y datos estructurados, al igual que el dise\u00f1o web responsivo, ayudan a los rastreadores a navegar e indexar las p\u00e1ginas. Adem\u00e1s, los datos estructurados hacen posible que se muestren las clasificaciones de estrellas, precios, recetas y snippets<\/a> en las SERPs.\n<\/p>\n

Asimismo, un snippet responsive puede influir positivamente en la tasa de clics<\/a>.\n<\/p>\n

Por lo tanto, no solo los motores de b\u00fasqueda se benefician de los datos estructurados y el marcado optimizado, sino que tambi\u00e9n son importantes para las personas con necesidades especiales. Por ejemplo, herramientas como los lectores de pantalla funcionan de manera similar a las ara\u00f1as web, pues usan los datos estructurados para describir el contenido de un sitio a personas que no pueden ver o tienen problemas de visi\u00f3n.\n<\/p>\n

En este contexto, los atributos alt y title de las im\u00e1genes y enlaces tambi\u00e9n juegan un papel importante y no deber\u00edan faltar.\n<\/p>\n

Navegaci\u00f3n con migas de pan o breadcrumbs<\/span><\/h3>\n

Para sitios web con muchas subp\u00e1ginas o tiendas online con numerosas categor\u00edas y subcategor\u00edas, la navegaci\u00f3n con migas de pan o breadcrumbs<\/a> facilita la orientaci\u00f3n de las visitas.\n<\/p>\n

Se trata de una ruta que se agrega en la parte superior de una p\u00e1gina en el dise\u00f1o frontend, cuya funci\u00f3n, entre otras, es la de facilitar a las personas su ubicaci\u00f3n actual en un sitio web.\n<\/p>\n

Adem\u00e1s, hace posible que las personas salten directamente a una p\u00e1gina de nivel superior o ya visitada con solo un clic, sin tener que retroceder con el navegador o comenzar de nuevo una b\u00fasqueda en el nivel superior de navegaci\u00f3n.\n<\/p>\n

Interlinking o enlaces internos<\/span><\/h3>\n

Conectar las p\u00e1ginas de un sitio web con enlaces internos<\/a> ayuda a los motores de b\u00fasqueda a comprender la estructura de un sitio web y capturar todas sus subp\u00e1ginas. Pero tambi\u00e9n posibilita que la audiencia pueda encontrar informaci\u00f3n adicional, aumentando su tiempo de permanencia en el sitio.\n<\/p>\n

Adem\u00e1s, si se desea evitar que los rastreadores sigan ciertos enlaces, simplemente se a\u00f1ade una etiqueta nofollow en el link.\n<\/p>\n

URLs compatibles con buscadores<\/span><\/h3>\n

Cuando se trata del dise\u00f1o frontend la gente suele olvidar que no solo los buscadores rastrean las URLs de una p\u00e1gina web, sino que las personas tambi\u00e9n lo hacen y, de hecho, las leen.\n<\/p>\n

Por este motivo, es importante crear URLs amigables<\/a> que sean cortas, descriptivas y f\u00e1ciles de leer, evitando caracteres especiales como guiones bajos, s\u00edmbolos de uniones o signos de porcentaje: cuanto m\u00e1s f\u00e1cil sea leer una URL, m\u00e1s usable ser\u00e1 y, por ende, estar\u00e1 m\u00e1s optimizada para los motores de b\u00fasqueda.\n<\/p>\n

Ampliar conocimientos<\/span><\/h2>\n