Question 22519 in SEO Question posted in
Some basic information to get you started with this can be found here.

Templating and Components with HTML – SEO

Is this achievable without a framework like Angular/React?

Problem I’m running into is I’m creating a blog and I want to minimize the amount of code I’m using and there’s two things I’m looking at:

Changing text on each file

For example, for each blog page, they share the same features such as: header, footer, logo, etc.
However, imagine my blog has 100 posts and now I want to change the text of a link in the footer. This would be applied to every page and instead of going to each page and changing the footer manually, I’d like to be able to change it in one file (i.e. footer.html or footer.json) and it’s applied to all the pages. I discovered handlebars.js and unless I’m mistaken, I could use this to achieve this problem I’m facing.

Minimizing page bloat

However, I would like to minimize the page even more. As far as I understand, using something like handlebars wouldn’t allow me to shorten the amount of HTML code itself. I’d like to have one blog-post-template.html file and each time the user clicks a link to a post, it would use the blog-post-template.html file and the only thing that would change is the actual blog-post.

For example, in pseudocode for 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)

I’m pretty sure I know the Angular way of doing this through templating and components but since I decided to create this blog with vanilla JavaScript and possibly jQuery plugins, but I was wondering if this was achievable without using a framework like Angular since I’ve heard about Angular and SEO not getting along well with each other.
Or if it’s more advisable to use a tool like Angular/React to create something like this in my example.

Tags:

2

Answers


  1. 0

    You don’t need a JavaScript framework, but you will need to use JavaScript.

    You can have your header and footer hard-coded as HTML as you say. But then you’ll need a JavaScript function to run and grab the blog post from your headless CRM or database.

    I’d just recommend using something like Next.js so you can have the nice tooling of a framework, and no SEO downsides.

    Login or Signup to reply.
  2. 0

    If you’d like an SEO-friendly version of React, you could use Next.js or Gatsby. Angular, I think, has ahead-of-time compilation that might do the trick. Or you could check out the html template element

    Cheers 🙂

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search