How This Website Was Built 4 -- Search Engine Optimization (SEO)

This website was built with Hugo framework. The theme “stack” used by this website supports to generate labels based on the Open Graph Protocol (OG). Here is how to do the Search Engine Optimization (SEO) for a website built with Hugo framework.

Intro

By the 3rd article of this series, we have built a bi-lingual website that can be visited via domain name and HTTPS protocol. However, if we want to search our website on a search engine (such as Google/Bing/Baidu), we will find nothing related to our website.

The reason is that our website hasn’t been included by the search engines nor been linked to other websites. Therefore, if we want others to be able to find our website on a search engine, we need to submit our website to the search engine. At the same time, we could also do some seach engine optimization (SEO), so that the search engines could obtain more detailed information of our website. Thus our website could be more easily found by others.

Turn on Open Graph

Open Graph protocol (OG protocol) is a protocol for labelling the webpage contents, released by Facebook in 2010. OG protocol contains some labels in the head of a webpage, which mark the title, description, etc. of a webpage. OG labels make a webpage a “riched-media-object”, which can be cited by other social websites.

Most search engines support OG protocol. Hence using OG labels in a webpage can improve the ranking of our website in a search engine.

The OG labels in a webpage often look like in following format:

1
2
3
4


<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />

The theme “stack” supports OG protocol. All we need is turning on the OG option in the configuration files config/_default/params.en.yaml and config/_default/params.zh-cn.yaml in the website root directory:

1
2
3
4
5
6
7


opengraph:
    twitter:
        # Your Twitter username
        site: JinliCyou

        # Available values: summary, summary_large_image
        card: summary_large_image

Thus, the OG labels will be generated and inserted to the HTML files when deploying our website using Hugo.

Optimization for Google Search Engine

When submitting our website information to Google, Google needs to verify our ownership of the website. There are several verifying methods:

Place a verification file that generated by Google in the website public directory
Insert a specific label into the head of the HTML file of our webpage
Use the Tracking ID (or Measurement ID) of Google Analytics

Since the theme stack integrates the supporting of Google Analytics, we use the 3rd method for verification.

Turn on Google Analytics

Google Analytics is a tool that help the website owner for analyses of the website data.

Go to the official website of Google Analytics and sign up. You can also sign in with your existing Google account. Currently, the widely-used version of Google Analytics is Google Analytics 4, in which version Measurement ID instead of Tracking ID is used to track a website.
Obtain the Measurement ID. For details, please refer to the Help Documents of Google Analytics. Here is how I did it:
- Find the “Admin” option in the user’s frontpage. New a “Property” and fill in necessary information as instructed.
- Click on the “Data Stream” option in the “Property” column.
- Click on “Add stream” and select the “Web”. Fill in your domain name and your website’s name.
- In the “Property” page, click on the stream that you added just now. You will see a Measurement ID starting with “G-”. Write down the Measurement ID of your website.
Find the “googleAnalytics” option in the configuration file config/_default/config.yaml under the website root directory. Fill in your Measurement ID:
1 2

# GA Tracking ID googleAnalytics: G-measuremntID

Submit the site maps

A site map is a XML data file that stores some webpage information of our website, usually named sitemap.xml. Submit it to the search engine, then the search engine could access the webpage information of our website.

Hugo generates sitemap.xml in the public directory automatically when deploying the website.

For a detailed instruction about how to submit our site maps to Google Search, please refer to the instructions. Here is how I did it:

Log in to the Google Search Console. We can use the account that registered on Google Analytics.
Click on the “Add property” at the top left menu. Select the “URL prefix”. Then enter our website address starting with “https”. Select “Google Analytics” for the ownership verification. Click on “Verify”. If the website was deployed again after turing on the Google Analytics in the last step, we will pass the verification.
Submit the sitemap.xml files. In the left sidebar menu, click on “Sitemaps”, then enter the URL of the sitemap.xml file. For example, this website is a bi-lingual website, Hugo generates 3 sitemap.xml files, which are /public/sitemap.xml, /public/zh-cn/sitemap.xml and /public/en/sitemap.xml.

Note, DO NOT miss the / at the beginning of the paths when adding the site maps. Even if there exsits a slash at the end of the website domain name, it can NOT be omitted. See the picture below:

After submitting it successfully, it will display “success” for the “status”.

Among the three site map files generated by Hugo, the /public/sitemap.xml is actually pointing to /public/zh-cn/sitemap.xml and /public/en/sitemap.xml. Therefore, only submitting the /public/sitemap.xml is fine.

Usually one or two days after we submitted the site maps successfully, we could find our website in Google’s records. You can check whether a certain website is included by Google by type site:xxx.com in Google’s searching box.

Optimization for Baidu Search Engine

The optimizations for Baidu Search Engine can be done on Baidu Resource Searching Platform.

Go to Baidu Resource Searching Platform. Sign in with your Baidu account.
Click on “Submitting a link”. Then click on “Add a site”. Enter the domain name of your website. It also requires to verify your ownership of your website. You can download the verification file and place it in the public directory. Then click on “Verify”.
Click on the “Ordinary Collection” in the “Resource Submission” of the left sidebar menu. Select “sitemap” and enter the URL of the sitemap.xml files.

There are two restrictions for submitting site maps to Baidu:
- Indexing site maps are not allowed
- Submitting one site map file only per day for a new account