¿Quiere saber más sobre el curso “JavaScript Developer. Básico "? Te invitamos a un webinar gratuito, durante el cual el profesor del curso dará respuesta a todas tus preguntas.
Hay varios enfoques modernos para el desarrollo de aplicaciones. Las dos más populares son las aplicaciones de una sola página (SPA) y las aplicaciones renderizadas por servidor .
Las aplicaciones de una sola página tienen un gran rendimiento y, aunque el rastreador de Google ha cambiado ligeramente después de algunas actualizaciones , todavía no ven resultados de SEO impresionantes. La renderización del servidor le permite optimizar de manera más eficiente las aplicaciones para los motores de búsqueda, mientras que su rendimiento en este caso también será bastante decente.
Con el advenimiento de excelentes marcos de JavaScript como Next y Gatsby, hay más aplicaciones renderizadas por servidor, así que veamos por qué las aplicaciones de una sola página no siempre son una buena solución, especialmente cuando necesitas clasificaciones de búsqueda altas.
¿Qué pasa con las aplicaciones de una sola página?
Antes de decidir entre aplicaciones de una sola página y renderizado del lado del servidor, vale la pena decidir sobre el contenido.
Las aplicaciones de una sola página solo cargan una página HTML. Cada vez que el usuario solicita nuevo contenido HTML, JavaScript lo carga dinámicamente manipulando los elementos DOM. Pero si no tiene que cargar una nueva página HTML cada vez, ¿por qué hay un problema con la optimización de motores de búsqueda?
La cuestión es que los motores de búsqueda no pueden indexar correctamenteAplicaciones de una sola página, a diferencia de las aplicaciones renderizadas por servidor. Una aplicación de una sola página solo carga la página HTML inicial. Como resultado, los motores de búsqueda no pueden indexar el contenido que se vuelve a crear con JavaScript para cada cambio, aunque debe tenerse en cuenta que las aplicaciones de una sola página tienen muchas otras ventajas: además de un alto rendimiento, se cargan rápidamente incluso con velocidades de conexión bajas y no requieren un gran ancho de banda. , funcionan mejor en dispositivos móviles, etc.
Por otro lado, las aplicaciones renderizadas por servidor, especialmente las creadas con Next.js, cuentan con un buen rendimiento y eficiencia SEO.
SEO (optimización de motores de búsqueda)
SEO (del inglés Search Engine Optimization) es optimización para motores de búsqueda, es decir, acciones para cambiar su sitio para atraer más tráfico de búsqueda orgánico. Hay muchas técnicas y trucos de SEO diferentes a tener en cuenta para hacer que su sitio web sea más atractivo y accesible para los motores de búsqueda.
Next.js
Next.js es un marco para aplicaciones React generadas estáticamente o renderizadas por servidor que abre muchas posibilidades para los desarrolladores: creación de aplicaciones listas para usar, sin configuración, división de código, exportación de una página HTML estática, etc. etc.
Next.jsproporcionará resultados de optimización de motor de búsqueda altos, y no tiene que hacer nada especial para hacer esto, solo necesita crear una aplicación.Sin embargo , los buenos resultados de SEO no los proporciona específicamente Next.js , sino la representación del servidor.
Tomemos un ejemplo de cómo Next.js funciona .
Next.js le permite crear una aplicación con un comando usando la estructura Create Next App :
npx create-next-appUna vez que cree el proyecto, notará que es ligeramente diferente de otras plantillas creadas con, por ejemplo, Create React App . Todas las páginas de la aplicación se almacenarán en una carpeta
pagesy cada una de ellas será un componente de React.
Para generar una nueva ruta dentro de la aplicación, solo necesita crear un nuevo archivo en la carpeta
pagesy un nuevo componente React para él:
// pages/about.js
const About = () => (
<div>
<h1>About page</h1>
</div>
);
export default About;Nota. Mientras trabaja en su aplicación, puede ver sus informes de clasificación de SEO incluso en las primeras etapas, por ejemplo, utilizando el servicio Lighthouse .
Crear una nueva aplicación con Next.js es extremadamente fácil. Echemos un vistazo a cómo Next.js puede ayudarlo a mejorar su clasificación de búsqueda y generar más tráfico orgánico a su sitio.
Cómo mejorar el SEO con Next.js
Con Next.js, puede mejorar significativamente sus resultados de SEO, pero no debe olvidarse de otros aspectos de la aplicación. Si desea buenos resultados de SEO, considere esto:
Metaetiquetas
Las metaetiquetas proporcionan datos sobre su página a los motores de búsqueda y a los visitantes del sitio. Afectan cómo se muestra una página en las páginas de resultados de los motores de búsqueda y si puede atraer a un visitante a su sitio. Las metaetiquetas no son visibles para los usuarios, pero para una aplicación que desea llevar a la cima de los motores de búsqueda, esta es la parte más importante del código.
La metaetiqueta le dice al motor de búsqueda sobre el tipo de contenido publicado en una página, el tema de esa página y cómo debería mostrarlo el motor de búsqueda.
Next.js tiene un componente integrado que agrega metaetiquetas al contenedor de
<head>import Head from 'next/head'Para insertar una metaetiqueta en una página, use el componente integrado
Head:
import Head from 'next/head'
const Example = () => {
return (
<div>
<Head>
<title>Example</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</Head>
<p>Hi Next.js!</p>
</div>
)
}export default Example
El componente integrado
Headevita la duplicación de metaetiquetas en el sitio; si agrega la propiedad clave, la metaetiqueta se mostrará solo una vez:
<meta name="viewport" content="initial-scale=1.0, width=device-width" key="viewport" />Puede mejorar la clasificación de búsqueda de una aplicación simplemente agregando algunas metaetiquetas a la página. Aquí puede leer sobre las metaetiquetas importantes para SEO.
Verifique su código ahora mismo para ver si hay metaetiquetas en él y si son las metaetiquetas que desea. Créame, las metaetiquetas correctas son lo que necesita para mejorar la calidad de la indexación y generar tráfico orgánico.
Productividad
Los usuarios están acostumbrados a que las páginas se carguen rápidamente y no están dispuestos a esperar eternamente. Al desarrollar una aplicación, primero piense en el rendimiento. También es uno de los factores clave de clasificación en los motores de búsqueda.
Los motores de búsqueda, especialmente Google, utilizan los primeros tiempos de visualización de contenido(First Contentful Paint, o FCP) como métrica clave de rendimiento. FCP mide el tiempo desde que una página comienza a cargarse hasta que se muestra el primer elemento de contenido en la pantalla. Un FCP bajo tendrá un rango SEO bajo.
Con Next.js, puede analizar las métricas de FCP y LCP (tiempo de representación para la mayoría del contenido, pintura con contenido más grande) creando un componente de aplicación personalizado y declarando una función
reportWebVitals:
// pages/_app.js
export function reportWebVitals(metric) {
console.log(metric)
}La función
reportWebVitalsse llamará cuando se calculen los valores métricos finales de la página. Puede leer
más sobre la medición del rendimiento en Next.js aquí . Esto es en lo que necesita trabajar para mejorar FCP.
Certificado SSL
En agosto de 2014, Google anunció que tendría en cuenta HTTPS al clasificar. El protocolo de comunicación seguro HTTPS proporciona una capa adicional de protección para los usuarios que transmiten sus datos a su sitio.
Para conectarse HTTPS, necesita obtener un certificado SSL, un buen certificado SSL puede costar bastante dinero. ¿Cómo obtengo un certificado SSL gratis con Next.js ?
Para hacer esto, la aplicación debe implementarse en una plataforma en la nube como Vercel . Vercel es la empresa detrás de Next.js, por lo que la integración se realizará sin problemas. Para implementar Next.js en la plataforma Vercel, debe instalar la CLI de Vercel:
yarn global add vercelLuego ve a tu proyecto y ejecuta el comando:
vercelEl proyecto se publicará en Vercel y estará protegido por un certificado SSL.
El contenido importa
Es muy importante presentar correctamente el contenido que ven los visitantes de su sitio web. Crear un producto de calidad es la tarea principal de todo desarrollador.
La aplicación que se va a desarrollar (de una sola página o del lado del servidor) depende del tipo de contenido que desea mostrar y cómo desea obtener comentarios de los clientes.
El marco Next.js está diseñado para el desarrollo de aplicaciones React renderizadas por servidor, lo que nos brinda un excelente SEO, UX, rendimiento y más. Ayuda a las empresas y desarrolladores a mejorar la calidad de sus sitios y proyectos y a generar más tráfico de búsqueda orgánico. ...
Bueno, es hora de pasar a Next.js y explorar todo el potencial de las aplicaciones de renderizado del lado del servidor. Serán útiles para usted y su empresa y, en general, ¡son increíbles! Te aseguro que te sorprenderás.
Conclusión
En este artículo, analizamos más de cerca el marco de Next.js y aprendimos cómo se puede utilizar para optimizar aplicaciones modernas para motores de búsqueda. También clasificamos conceptos generales de SEO y cubrimos metaetiquetas, rendimiento, certificados SSL, etc., que son los aspectos a considerar al desarrollar una aplicación.
LogRocket : Visibilidad completa de aplicaciones web
LogRocket es un servicio de monitoreo de aplicaciones web que le permite repetir los problemas del usuario como si ocurrieran en su navegador. Ahora no es necesario adivinar por qué ocurrió el error, ni pedir a los usuarios capturas de pantalla o volcados de registros. LogRocket le permite reproducir la sesión y averiguar qué está causando el problema. Funciona muy bien con cualquier aplicación en cualquier marco, y puede usar complementos para agregar contexto adicional de Redux, Vuex y
@ngrx/store.
Además de agregar acciones y estados de Redux, LogRocket registra registros de consola, errores de JavaScript, seguimientos de pila, solicitudes de red y respuestas con encabezados y cuerpos, metadatos del navegador y registros personalizados. Utiliza DOM para escribir HTML y CSS en la página, proporcionando reproducciones de video por píxel incluso para las aplicaciones de una sola página más complejas.
Pruébelo gratis .
Lee mas: