First and foremost

Hey guys, what awesome thing brought you here? … Whatever it is, I think your day has started to get better. Before exploring further, let’s identify some important things together.

1. Are you looking for an optimal solution for light-house score ?
2. Have you tried many ways to optimize but still not satisfactory ?

If so, I think this project can help you. All you need to do is know how to use VueJS / ReactJS (I bet it’s much easier to use than NuxtJS and NextJS) and done, leave the rest to the system.

Specifically, the system will transform your client side rendering project so that it can be SEO without you having to do anything. In addition, the system will help you optimize all light-house scores to the highest possible level, and you don’t have to do anything either. You haven’t been pressured to optimize the light-house score yet, have you? apply quickly, still in time

Table of contents

1. Install
2. Try for fun
3. How it works ?
4. Configuration

• Config redirect
• Config server
• Server environment variables

5. Utilities

• Meta SEO tags
• Link SEO tags
• seo-tag attribute
• BotInfo variable
• DeviceInfo variable
• LocaleInfo variable
• Remote crawler

Install

Expect Node 18.18.x or higher

If use npm

npm install

If use yarn 1.x

yarn

If use Bun

bun install

Try for fun

Hey guys, have you completed the installation step? I hope everything works well and smoothly, if you have any issues, don’t hesitate to create a github issue or contact me directly via these socials: facebook, linkedin. I will try my best to support you as much as possible.

If you have finished the installation step, let’s start the fun. Follow these steps and enjoy.

1. Run build

npm run build

2. Run preview

npm run preview

3. Open localhost:<port>

What do you see after completing this step? Nothing, right. There is nothing but a layout rendered by Vue / React, and obviously it cannot be SEO.

That’s right, what you see is exactly what the system has sent to the user, and I emphasize here is “user”. And the first value that we can see is that, the system has taken advantage of the efficiency of CSR (client side rendering) to help optimize the server, minimize the server’s computational cost for most requests from users.

And, right now, the next step will show you the magic and also the biggest value that this project brings. Let’s explore.

4. Open browser devtools > select tab Network Condition > uncheck Use browser default option > select Google Bot and refresh the tab.

What do you see now? Just text and text, right? There is no style at all, how ugly and miserable. Exactly, that is the content that a Search Engine will like and very like, Bot will not need style, no need for flashy, attractive. Bot needs clarity, purity, and optimization as much as possible to be able to read and collect information in the best way, and when Bot likes it, you should prepare to be famous on the ranking.

But wait, you still haven’t checked the light-house score yet. Right now, open the incognito browser (slowly, don’t make it a habit like that … I like that). Open incognito and go back to localhost:<port> where the project is running, this will help ensure that the lighthouse testing process will minimize the impact of the chrome-extensions that you installed before, helping the light-house system to give the most accurate results possible. Let’s check it out.

5. Open incognito browser > Open localhost:<port> > Open browser devtool > select lighthouse tab > start light-house checking.

How did you score? both mobile and desktop. Enough to impress you, right? I’m sure Search Engine will be very impressed too.

But wait, the content of this page is too little, it’s not enough to say anything, except that it can make a web page using CSR with SEO possible. So let’s test it on a web page with more content and running in real time. Here I will choose Tiki. Let’s do it.

6. Adding some special testing queryString and enter ?urlTesting=https://tiki.vn

7. Open lighthouse and test it again

Surprised, aren’t you !? Now you can confidently apply for the position of Optimize LightHouse score of the company (if there is such a position … haha), but anyway, you have just met a real and important need of a web user, congratulations.