Writing in the front

First of all, I have to be honest. I have never done SEO research before, and I assumed that the launch page I wrote would be found by search engines at 😄. Until recently, I was obsessed with Next. Js, and as we all know, as an SSR framework, the main focus is first screen rendering and SEO. Then in the process of communicating with many partners, some people would ask, how should I use Next.

I have been thinking about it for a few days and it is indeed a good question. I am writing projects with Next. Js, and one of the advantages of Next. Well, so, this article appears, I will give you a summary of my research results, and you learn about ~

The final result is that it is available to be retrieved using the Next- ANTD-Scaffold_SEO branch which is only being optimized for Google, Baidu is not, and there are some minor issues with the now deployment, as detailed below.

SEO is what

I’m not going to throw out any names here, as I said, I didn’t do much research before writing this article. In short, SEO (Search Engine Optimization) — Search Engine Optimization, the purpose of which is to help our website rank higher when searched by Google or Baidu, well, this explanation actually feels very important.

And, also learned that there is actually a position is SEO optimization engineer, specializing in doing website SEO is to improve the ranking of the work

How to do SEO

Above a superficial understanding of SEO, and also appeared SEO optimization engineer this term, feel on the tall, that is not a high threshold, need a certain amount of learning time ah. The answer comes, as a front-end engineer, we have a unique advantage, we do not need to optimize the level of engineers, we only need to do a few aspects, can complete a website about 80% SEO optimization work ~ because I study down to find that SEO for most of the points are front-end basis ~

HTML tags

We can be searched by search engines, or we want to be searched by search engines, because search engines (crawlers) precrawl the HTML code of our site, filter the HTML tags and so on. The first step in SEO is to understand the HTML tags and use them well.

Different HTML tags has its own weight in SEO, there are many, many, I compiled some important roughly:

HTML tags meaning SEO weight
<title> The title 10 points
<a> Internal link text 10 points
< h1 >/< h2 > Title, actually H1 ~ H6, but H1 and H2 are the most important, generally a page is best one, do not use too much 5 points
<p> First sentence per paragraph 5 points
<p> Every sentence 1.5
<b>/<strong> bold 1 minute,
<a title='' /> The title attribute 1 minute,
<img alt=''> Img Alt tag 0.5
<meta description=''> The site description of the meta tag 0.5
<meta keywords=''> Meta tags for website keywords 0.05

In addition to the above several, there is a more important 7 decentralization, is the domain name, but this is not in the label category, will not be listed.

The importance of domain name can be seen from the first picture of the article, github and Nuggets domain name is obviously much higher, ha ha, search out the top ~

SEO optimization

After looking at the HTML tag weight above, we know that SEO optimization is focused on here (of course, there are other aspects). I summarize the following points:

  • Homepage – Static page

    It is worth discussing here. If you are using SPA rather than SSR rendering scaffolding like CRA, it may not be very friendly to SEO, but you want the homepage to be retrieved by search engines, so the best way is to write a static HTML homepage, and then jump to the system home page by logging in. After all, static pages are the king of SEO ~ and many cases are the same

My company has several such, a straight out HTML static page is the home page, and then login to jump into the system ~

  • Title + internal link

    As can be seen above, the weight of the title and the inner chain is 10 points and the weight of H1 ~ H6 is 5 points. So we have to write a title on each page. Details are as follows:

    • Title for each page
    • All pages of the same website have internal links that can point to the home page
    • Each page has only one H1, and the H1 should not be too many, otherwise the effect will not be achieved

  • Meta Tag Optimization

    Although for search engines, the weight of Meta tags is getting lower and lower, but it can not be ignored, after all, this is also an introduction to our website, write in detail is always good. Set Meta Description and Meta keywords.

  • Text tags and IMG

    • Text tag classes, such as< b > and < strong >Bold text tags, search engines will notice them, if you want to be specific, you can use them.
    • imgThe Alt attribute of the tag is important to give search engines access to the content when the image fails to display

  • To do search engine optimization (sitemap. XML/robots. TXT/favicon. Ico)

    A typical search engine crawling our site would look for these three things first in the root directory of the site, sitemap.xml, or sitemap; Robots.txt contains some Settings, which crawlers are allowed to crawl, which are not allowed to crawl, and which search engines are allowed to crawl, etc. Favicon. ico may not be that important, but it is an essential part of the site

This section is detailed in the Next SEO section below

After reading these, to tell the truth, I looked back at a few projects written before, really SEO is not very friendly ah 😄. So I think after the project is certain to do that, because it really is very simple, as long as we are in the project initialization write ten minutes, and then develop a good habit, in the process of it is ok to read to encourage friends are good habits from now on, so we later if go to the interview, the interviewer asks we do SEO? You can proudly say that my code has always been SEO Friendly 😄

Next. Js SEO solution

Next. Js as an SSR framework, SEO is very good at it. Why say so? Let’s take a look at the official website of Meizu:

Google Meizu and the first one pops up. Next, look at the website code:

The standard Next-js application,butIf you use it, you will find that Meizu only uses Next. Js to write a home page, other places are jump, that is, in addition to the home page are not Next. However, it also reflects that Next. Js is really suitable for SEO, so let’s give it a try.

Be good with Next Head

First of all, Nextjs doesn’t have the index. HTML file that CRA does, but it does provide the Head component to help modify the page Head structure. For example, the following code is part of my _app.js code.

import Head from 'next/head'; . <Head> <meta name='viewport' content='width=device-width, initial-scale=1' /> <meta charSet='utf-8' /> <title>Next-Antd-Scaffold - A better scaffold of Next.js</title> <meta Name ='keywords' content='next. Js, ANTd,scaffold' /> <meta name='description' content='🏠 A simple scaffold based on Next.js for quick use with ant-design, redux, redux-saga, fetch and pm2.' /> <link rel='shortcut icon' href='/static/favicon.ico' type='image/ico'/> </Head> ...Copy the code

In addition to Next’s built-in Head component, there are also many open source projects, such as Next-SEO, which are probably based on the Head package, but contain many more advanced uses that you can explore on your own.

Next. Js is optimized for search engines

As mentioned above, search engine optimizations are mainly sitemap.xml and robots.txt. So let’s write it down:

These two I also do not understand very much, so it is simple to throw a brick to attract jade, we want to know more about their own research online.

  • sitemap.xml

    This part IS directly generated from Google sitemap generation tool, also very simple, fill in our website link, you can have a look in detail.

// sitemap.xml <! -- This file content should be replaced with the sitemap file content of your own site --> <? The XML version = "1.0" encoding = "utf-8"? > < urlset XMLNS = "http://www.sitemaps.org/schemas/sitemap/0.9" XMLNS: xsi = "http://www.w3.org/2001/XMLSchema-instance" Xsi: schemaLocation = "HTTP: / / http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd "> <! -- created with Free Online Sitemap Generator www.xml-sitemaps.com --> <url> <loc>https://next-antd-scaffold.luffyzh.now.sh/</loc> <lastmod>2019-08-05T11:04:12+00:00</lastmod> </url> </urlset>Copy the code

  • robots.txt

    This is more arbitrary, this is the configuration of websites that are allowed and not allowed to search engines and many other related configurations, many, many, many, I will write two very briefly here:

// Allow all search engines to retrieve user-agent: * // site sitemap address sitemap: http://example.com/your_sitemap.xmlCopy the code
Configuration related

Finally, having said that, the search engine accesses /favicon.ico, /sitemap. XML and /robots.txt in the root directory, so we need to configure it in server.js.

// server.js /** * Deal SEO **/ server.get('/robots.txt', (req, res) => ( res.status(200).sendFile('robots.txt', { root: __dirname + '/static/', headers: { 'Content-Type': 'text/plain; charset=UTF-8', } }) )); server.get('/sitemap.xml', (req, res) => ( res.status(200).sendFile('sitemap.xml', { root: __dirname + '/static/', headers: { 'Content-Type': 'text/xml; charset=UTF-8', } }) )); server.get('/favicon.ico', (req, res) => res.status(200).sendFile(path.join(__dirname, 'static', 'favicon.ico')) );Copy the code

As mentioned above, there is a flaw in the website I deploy now. It is serverless service deployed by now. It cannot be accessed through /sitemap. XML, but still requires /static/sitemap. XML. Google has provided us with a solution

As shown in the figure below, we can send our site map by carrying parameters in the browser. Then my feedback after the browser sends my site map is as follows:

As shown in the picture, Google received my request and the change should take effect after the next crawl, but check, from submission to the final display to the search list may take a few days, ~ expect 😄

The search content shown in the picture at the beginning of this article was incorrectly written on my website Title, I updated it once, and then sent sitemap.xml, so far (nothing has changed in less than half a day). I will comment below as soon as the changes take effect. It took a few days

conclusion

Well, here is the end of the article, I hope to help you (do not understand SEO students and how to use next.js to write SEO students) have so a little help.

For the last of the code and scaffolding here, click 🌟 not to get lost ~ haha next-antd-scaffold