Verify identity. Webside with Google.

# Web Site Writing Basics # googlescript # Trending # google_ search _ console

Adopting the Vite + React project on Vercel to the Google Search Console for Google to read and display on the search results page. There is a detailed procedure:

Step 1: Add a website to the Google Search Console.

Go to Google Search Console and Login with Gmail.

Click "Add property" (Add property)

There will be two options:

Domain: (Must be set at domain provider such as Cloudflare, GoDaddy)

URL prefix: (Recommended for newbies or users using the .vercel.app domain) Enter the full URL of your web, such as https://my-project.vercel.app, and press Continue

Step 2: Ownership Verification

The easiest way for a React project is to use HTML Tag.

On the Google Search Console page, select the HTML Tag method.

Copy code that looks like this:

< meta name = "google-site-verification" content = "numeric and alphabetical code" / >

Go back to the Vite project on your machine.

Open the index.html file (located at the project's Root)

Place the copied code in the < head > section... < / head >

HTML

< head >

< meta charset = "UTF-8" / >

< meta name = "viewport" content = "width = device-width, initial-scale = 1.0" / >

< meta name = "google-site-verification" content = "your code" / >

< title > Your web name < / title >

< / head >

Save then git commit and git push up GitHub to allow Vercel to re-deploy

Step 3: Press Verify in the Google Search Console.

When Vercel Deploy is done (try opening the page to see if there is meta code yet by pressing Ctrl + U).

Return to the Google Search Console page and press the "Verify" button.

If correct, the system says "Ownership verified."

Step 4: Making Sitemap (to let Google recognize all pages)

Since React is a Single Page Application (SPA), we should create a Sitemap to tell Google which pages it has.

Create a simple Sitemap file: Create a file named sitemap.xml in the public folder of the Vite project.

Enter this code (change the URL to yours):

XML

< urlset xmlns = "http://www.sitemaps.org/schemas/sitemap/0.9" >

< url >

< loc > https://your-project.vercel.app / < / lock >

< lastmod > 2023-10-27 < / lastmod >

< / url >

< url >

< loc > https://your-project.vercel.app/about < / lock >

< lastmod > 2023-10-27 < / lastmod >

< / url >

< / urlset >

Push the job up, Vercel again.

In Google Search Console, go to the Sitemaps menu on the left.

Enter the word sitemap.xml in the "Add a new sitemap" box and press Submit.

Step 5: Doing More SEO (Very Important for React)

Vite + React is normally Client-Side Rendering (CSR), which Google might be invisible to content if Metadata isn't set up for good:

Enter Title and Description: In the index.html file, check that these tags are available:

HTML

< title > Web name that you want to show on Google < / title >

< meta name = "description" content = "Brief description of your website (about 150-160 characters)" >

Use React Helmet (Recommended): To have each page named (Title) not the same, install React-helmet-async to manage Metadata on each Component.

Last step: Ask Google to store data (URL Inspection)

If you want Google to know the web, you immediately (don't queue):

Go to the inspection URL in Search Console

Paste your web URL into the search box above.

If it says "URL is not on Google," press the "Request Index" button.

Note: After completing all the steps, Google may take from one day to two weeks to start rendering the page.