preface

In “A blog with VuePress + Github Pages”, we build a blog with VuePress and see what the final TypeScript Chinese document looks like.

This article looks at some of the details of SEO optimization.

1. Set global title, Description, and keywords

// config.js
module.exports = {
    title: "title".description: 'description'.head: [['meta', { name: 'keywords'.content: 'keywords'}}]]Copy the code

For how to write the title, refer to the old Baidu Search Engine Optimization Guide 2.0:

We suggest that the title of the page be described as follows:

Home page: Website name or website name _ Service introduction or product introduction

Channel page: Channel name _ site name

Article page: article title_ channel name _ website name

You can also refer to this “Baidu search page title specification” in the specification.

About description:

Meta Description is a concise summary of the content of a web page. If the description description is consistent with the content of the web page, Baidu will take the description as one of the selection targets of the summary. A good description will help users more conveniently judge whether the content of your web page is consistent with the requirements from the search results. Meta Description is not a reference factor in the weight calculation. The presence or absence of this tag does not affect the weight of the page and is only used as a selection target for the summary of search results.

For keywords, use English commas to separate keywords, while Chinese commas are considered long sentences.

Let’s look directly at the setting of a Baidu encyclopedia entry:

2. Customize title, Description, and keywords

Customize with Front Matter:

---
title: title
description: description
meta:
  - name: keywords
    content: super duper SEO
---
Copy the code

3. Add Alt attributes to images

According to Google’s beginner SEO guide:

Use Alt attributes

Provide an illustrative file name and Alt attribute description for the image. The Alt attribute allows you to specify alternative text for images, which can come to the rescue if the image cannot be displayed for any reason.

Why use this property? If a user views your site using assistive technology such as a screen reader, the content of the Alt attribute provides information about the photo.

Another reason is that if you use an image as a link, the image’s replacement text is equivalent to the positioning text of the text link. However, if text links can serve the same purpose, we recommend not using too many images as links in your site’s navigation. Finally, optimizing image filenames and alternative text makes your images better understood by image search projects such as Google Images.

4. To streamline the url

Refer to Baidu Search Engine Optimization Guide 2.0:

Keep the URL as short as possible. Long urls are not only ugly, but also difficult for users to obtain additional useful information from them. On the other hand, short urls can help reduce page size, speed up page opening, and improve the user experience.

Refer to Google Search Center’s “SEO Beginner’s Guide” :

Simple web sites are easy to convey content

Creating categories and file names that accurately describe documents on your site not only helps you better organize your site, but also creates simpler, easy-to-use urls for users who want to link to your content. Visitors may be put off by web sites that are extremely long, ambiguous, and contain few recognizable words.

The following url may cause confusion and not easy to use: www.brandonsbaseballcards.com/folder1/224…

If your web address has a clear meaning, it may be more useful and easier to understand in different contexts. www.brandonsbaseballcards.com/article/ten…

The address of my document is: ts.yayujs.com/learn-types…

In fact, the learning-typescript is unnecessary. The reason for this is that I used GitHub Pages, which is the name of my GitHub repository, but if I build my own site, there is no need to write this. We directly modify the base configuration in config.js:

module.exports = {
  	base: ' '
}
Copy the code

But what if your address is already out there? Nginx’s 301 redirection allows you to do this:

    server {
        listen 443 ssl;
        server_name ts.yayujs.com;
  			// ...
        location^ ~ /learn-typescript/ {
    				rewrite ^/learn-typescript/(.*)$ https://yayujs.com/The $1 permanent;
    				alias /home/www/website/ts/;
        }
  			// ...
   }

Copy the code

At this point you can visit ts.yayujs.com/learn-types… , will jump to yayujs.com/handbook/Ev…

5. Link with nofollow

The basic PageRank algorithm of search engines is based on the assumption that more important pages tend to be referenced more by other pages. So we can use Nofollow to tell Google not to follow links to pages, so it doesn’t take away the weight of our pages.

So why does nofollow exist? It makes sense, for example, that if you post a comment about a spam site on your blog and link to it in order to alert others, you don’t want the site to benefit from your reputation. This is a good time to use Nofollow.

To use nofollow, we simply add the nofollow attribute to the link:

<a href="http://www.example.com" rel="nofollow">Anchor text here</a>
Copy the code

According to VuePress’s official documentation, we know:

The default link attribute of VuePress blog is noopener noreferrer. We modify config.js and add nofollow:

    
module.exports = {
  	markdown: {
      externalLinks: { target: '_blank'.rel: 'nofollow noopener noreferrer'}}}Copy the code

If we look at the DOM element, we’ll see the nofollow attribute attached:

6. Multi-page articles

Refer to Google Search Center’s “Follow crawling and Indexing Best Practices” :

Multi-page post: If your post is split into several pages, make sure there are next and previous page links that users can click on, and that these links are crawlable. All you have to do is do this and Google can crawl this collection of pages.

We don’t need to do anything special here, don’t think that once you have a sidebar, you can just kill the links to the next post.

7. robots.txt

The robots.txt file specifies which urls on your site can be accessed by search engine crawlers. This file is used to prevent your site from receiving too many requests.

But be warned: Robots.txt is not a good mechanism to prevent search engines from grabbing a web page. If robots.txt specifies that a file should not be accessed, but whether it is executed depends entirely on whether the search engine is executed in accordance with the specifications of robots.txt. Of course, like Google and other search engines will be in accordance with the standard of the normal crawl, other search engines are not necessarily. For example, the web page is quoted by other public web pages, still may find the web page and included.

To properly block urls from appearing in Google search results, password protect files on your servers, use noindex meta tags or response headers, or remove web pages altogether.

For a site like mine that allows full access, it’s more about telling search engines my Sitemap address.

Because the robots.txt file should be located in the root directory of the website, we can directly create a robots.txt file under.vupress/public, the content of the file is written:

Sitemap: https://ts.yayujs.com/sitemap.xml

User-agent: *
Copy the code

For details about the fields that can be set in robots.txt, see “Creating a robots.txt File”.

In addition to creating it directly, you can also use the vuepress-plugin-robots plug-in, which is not described here.

8. 404 pages

See the search Engine Optimization (SEO) Beginner’s Guide:

Display a useful 404 page

Occasionally users will be redirected to a non-existent page on your site by clicking on a broken link or typing a wrong URL. Using custom 404 pages can effectively direct users back to normal pages on your site, greatly improving the user experience. Consider adding links back to the root page and providing links to popular or related content on your site. You can use the Google Search Console to find the url source that caused the “not found” error.

The default 404 page for vuepress-theme-reco is Tencent Commonweal:

If you want to close:

module.exports = {
  theme: 'reco'.themeConfig: {
    noFoundPageByTencent: false}}Copy the code

The style would look like this:

Node_modules /vuepress-theme-reco/layouts/404.vue

9. Mobile Settings

module.exports = {
  	head: [['meta', { name: 'viewport'.content: 'width=device-width, initial-scale=1'}}]]Copy the code

This tag tells the browser how to render a web page on a mobile device. The presence of this tag indicates to Google that the page is suitable for mobile devices.

10. Test and optimization tools

10.1 Lighthouse

Google Lighthouse is an open source automation tool for measuring the quality of web pages. It can run against any web page that is public or requires authentication. Google Lighthouse reviews web pages for performance, accessibility, and search engine optimization. It also includes capabilities to test whether progressive Web applications conform to standards and best practices.

Let’s install the Lighthouse extension, and from the site you want to review, click on the Lighthouse plug-in, and then click Generate Report:

Wait a while, and a report will be generated:

We can view the scores and modification suggestions in Performance, Accessibility, Best Practices, SEO, and PWA, and make adjustments according to this suggestion to optimize as much as possible.

10.2 web. Dev

The official website is web.dev/measure/. You can think of it as the web version of Lighthouse. You just have to output your address on the web page, and you still have the Lighthouse in the back

10.3 Page Speed Insights

Google pagespeed test tool, address: pagespeed.web.dev/

After entering the address, the analysis can be performed, and scores and optimization suggestions will appear:

series

Blog building series is the only practical series I have written so far. It is estimated to be about 20 articles, explaining how to use VuePress to build and optimize a blog and deploy it to GitHub, Gitee, private server and other platforms. This is the 27th article in a series at github.com/mqyqingfeng…

Wechat: “MQyqingfeng”, add me Into Hu Yu’s only readership group.

If there is any mistake or not precise place, please be sure to give correction, thank you very much. If you like or are inspired by it, welcome star and encourage the author.