¿Se puede lograr esto sin un marco como Angular/React?

El problema con el que me encuentro es que estoy creando un blog y quiero minimizar la cantidad de código que estoy usando y hay dos cosas que estoy viendo:

Cambio de texto en cada archivo

Por ejemplo, para cada página del blog, comparten las mismas características, como: encabezado, pie de página, logotipo, etc. Sin embargo, imagina que mi blog tiene 100 publicaciones y ahora quiero cambiar el texto de un enlace en el pie de página. Esto se aplicaría a cada página y en lugar de ir a cada página y cambiar el pie de página manualmente, me gustaría poder cambiarlo en un archivo (es decir, footer.html o footer.json) y se aplica a todas las páginas. . Descubrí handlebars.js y, a menos que me equivoque, podría usarlo para resolver este problema al que me enfrento.

Minimizar la hinchazón de la página

Sin embargo, me gustaría minimizar la página aún más. Según tengo entendido, usar algo como manillares no me permitiría acortar la cantidad de código HTML en sí. Me gustaría tener un archivo blog-post-template.html y cada vez que el usuario haga clic en un enlace a una publicación, usaría el archivo blog-post-template.html y lo único que cambiaría es el blog real. -correo.

Por ejemplo, en pseudocódigo para blog-post-template.html:

 {header} (gets this from header.html) {blog-post} (gets this from link attribute and searches for that blog-post-number in database) {footer} (gets this from footer.html)

Estoy bastante seguro de que conozco la forma Angular de hacer esto a través de plantillas y componentes, pero como decidí crear este blog con JavaScript estándar y posiblemente complementos de jQuery, me preguntaba si esto se podía lograr sin usar un marco como Angular ya que yo Escuché que Angular y SEO no se llevan bien entre sí. O si es más recomendable usar una herramienta como Angular/React para crear algo como esto en mi ejemplo.