SEO Optimization of VuePress Blog (3) Title and Link Optimization

foreword

In "An article that takes you to build a blog with VuePress + Github Pages" , we used VuePress to build a blog, and the final effect can be viewed: TypeScript Chinese document .

This article talks about some of the details of SEO optimization.

1. Set the global title, description, keywords

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

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

We recommend that the page title 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_site name

You can also refer to the specification in this "Baidu Search Web Title Specification" .

About the description:

Meta description is a concise summary of web content. If the description matches the content of the webpage, Baidu will take the description as one of the selection targets of the abstract. A good description will help users more easily judge whether the content of your webpage meets their needs from the search results. Meta description is not a reference factor for weight calculation. The presence or absence of this tag does not affect the weight of the web page, and is only used as a selection target for the summary of search results.

Regarding keywords, note that keywords are separated by English commas, and Chinese commas are considered long sentences.

Let's look directly at the settings of a Baidu Encyclopedia entry:

2. Customize page title, description, keywords

Custom by Front Matter :

---
title: title
description: description
meta:
  - name: keywords
    content: super duper SEO
---

3. Add the alt attribute to the image

According to Google's Beginner's SEO Guide :

Use the alt attribute

Provide a descriptive filename and alt attribute description for the image. The alt attribute enables you to specify alt text for an image, which can be a saviour if the image cannot be displayed for some reason.

Why use this property? The content of the alt attribute provides information about the photo if a user is viewing your site using an assistive technology such as a screen reader.

Another reason is that if you use an image as a link, the image's alt text is equivalent to the anchor 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 alt text can help image search projects such as Google Images better understand your images.

4. Condensed URLs

Refer "Baidu Search Engine Optimization Guide 2.0" :

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

Refer to Google Search Center's "SEO Beginner's Guide" :

Concise URLs easily convey content information

Creating well-descriptive categories and filenames for documents on your site not only helps you better organize your site, but also creates simpler, easier-to-use URLs for users who want to link to your content. If the URL is extremely long, ambiguous, and contains few recognizable words, visitors may be discouraged.

The following URLs can be confusing and difficult to use:
https://www.brandonsbaseballcards.com/folder1/22447478/x2/14032015.html

If your URL has a clear meaning, it may be more useful and understandable in different contexts.
https://www.brandonsbaseballcards.com/article/ten-rarest-baseball-cards.html

The address like my documentation is: https://ts.yayujs.com/learn-typescript/handbook/TheBasics.html

In fact, the learn-typescript is not necessary. The reason for this is because I used GitHub Pages before, which is the warehouse name of my corresponding GitHub, but if I build my own website, there is no need to write this, we directly Modify the base configuration in config.js:

module.exports = {
      base: ''
}

But what if your address has already been sent out? Or it has already been included. At this time, you can achieve it through Nginx's 301 redirection:

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

At this point, if you visit https://ts.yayujs.com/learn-typescript/handbook/EverydayType.html , it will jump to https://yayujs.com/handbook/EverydayType.html

5. Links plus nofollow

The basic PageRank algorithm of search engines is based on the assumption that more important pages tend to be cited more by other pages. So we can use nofollow to tell Google not to follow linked pages, so that we don't take away the weight of our pages.

So why does nofollow exist? This is also very understandable. For example, if you post a comment on a spam website on your blog, and add a link to this website to remind others, you certainly don't want this website to benefit from your reputation. At this time, it is very suitable to use nofollow.

With nofollow, we just add the nofollow attribute to the link:

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

According to VuePress's official document , 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' }
    }
}

When we inspect the DOM element again, we will find that it has the nofollow attribute:

6. Multi-page articles

Referring to Google Search Center's " Following Crawling and Indexing Best Practices ":

Multi-page articles: If your article is divided into several pages, make sure that there are next and previous page links that users can click and that these links are crawlable. You just do this and Google can crawl this collection of pages.

We don't need to do anything special here, don't think that there is a sidebar, just delete the link to the next article.

7. robots.txt

The robots.txt file specifies which URLs on your site are accessible to search engine crawlers. This file is mainly used to prevent your site from receiving too many requests.

But be careful: robots.txt is not a good mechanism to prevent search engines from crawling a certain web page. If robots.txt stipulates that a certain file should not be accessed, but whether it is executed or not depends entirely on whether search engines follow robots.txt Of course, search engines such as Google will crawl according to the specifications, and other search engines may not necessarily. Another example is that if a webpage is referenced by other public webpages, the webpage may still be found and included.

To properly prevent URLs from appearing in Google search results, you should password protect the files on the server , use the noindex meta tag or the response header , or remove the page entirely.

For a site like me that allows full access, it's more of a function of telling search engines my sitemap address.

Since 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 and write the file content:

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

User-agent: *

For specific fields that can be set in robots.txt, please refer "Create a robots.txt file" .

In addition to direct creation, you can also use the [vuepress-plugin-robots ]() plugin, which will not be described here.

8. 404 Pages

Refer "Search Engine Optimization (SEO) Beginner's Guide" :

shows useful 404 page

Occasionally, users will be taken to pages on your site that don't exist by clicking on broken links or entering the wrong URL. Using a custom 404 page can effectively guide users back to the normal pages on your site, greatly improving the user's experience. Consider adding links back to the root page and links to popular or related content on your site. You can use Google Search Console to find out the source of the URL that is causing the "Not Found" error.

The 404 page of the theme vuepress-theme-reco uses Tencent Charity by default:

If you want to close:

module.exports = {
  theme: 'reco',
  themeConfig: {
    noFoundPageByTencent: false
  }  
}

The style will become like this:

If you want to modify the copy here, you can modify it directly in the source code, the directory is node_modules/vuepress-theme-reco/layouts/404.vue :

9. Mobile Settings

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

This tag tells the browser how to render the page on mobile devices. The presence of this tag indicates to Google that the page is mobile-friendly.

10. Testing and optimization tools

10.1 Lighthouse

Google Lighthouse is an open source automated tool for measuring web page quality. It works against any public or authentication-required web page. Google Lighthouse audits web pages for performance, accessibility, and SEO. It also includes the ability to test Progressive Web Apps for compliance with standards and best practices.

We installed the Lighthouse extension , and then on the website to be reviewed, click the Lighthouse plugin, and then click "Generate report":

After a while, a report will be generated:

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

10.2 web.dev

Official website address: https://web.dev/measure/ , you can understand it as the web version of Lighthouse, just output your address on the web page, and Lighthouse is used behind it

10.3 Page Speed Insights

Page speed test tool provided by Google, address: https://pagespeed.web.dev/

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

series of articles

The blog building series is the only series of practical tutorials I have written so far. It is expected to be about 20 articles, explaining how to use VuePress to build and optimize blogs, and deploy them to GitHub, Gitee, private servers and other platforms. This article is the 29th article, the address of the full series of articles: https://github.com/mqyqingfeng/Blog

WeChat: "mqyqingfeng", add me to the only readership of Xianyu.

If there are any mistakes or inaccuracies, please be sure to correct me, thank you very much. If you like or have inspiration, welcome to star, which is also an encouragement to the author.