Some time ago, I had a chat with my college classmates and talked about the SEO problem of the website. Considering the toB system I have been working on after graduation, I have not cared about SEO for a long time. As a front-end development, in the usual development, also do not think from the code level to do search engine optimization. Probably aside from developing the company’s website or the needs of product managers, SEO is not much of a concern during development. Because SEO is the business’s primary concern, not the programmer’s. Due to their usual SEO is not very concerned about, after finding some content to do a simple comb.

First, search engine working principle

SEO (Search Engine Optimization) : Search Engine Optimization. Baidu Baike explains it as a way to use search engine rules to improve the site’s natural ranking in relevant search engines. The goal is to take a leading position in the industry and reap brand benefits. It is largely a business practice by web site operators to move themselves or their companies up the rankings.
How do search engines work? It is mainly divided into the following three steps:
1, crawling crawling, web crawler through specific rules to track the links of the web page, from a link to another link, the crawling data into the local database
2. Use indexer to process important information in the database, such as title, keywords, abstracts, or full-text index. In the index database, the text content of the web page, the location of keywords, fonts, colors, bold, italics and other related information are recorded accordingly.
3. Indexer matches the search terms submitted by the user with the information in the data, finds out all the pages containing the search terms from the index database, and calculates which pages should be ranked first according to the ranking algorithm, and then returns to the user in accordance with a certain format

As can be seen from the figure, crawler crawls firstly select a part of carefully selected seed urls, put these urls into the URL queue to be captured, take out the URL to be captured from the URL queue to be captured, resolve DNS, obtain the IP of the host, and download the corresponding webpage of the URL and store it in the downloaded webpage library. In addition, these urls are put into the fetched URL queue. Analyze the URL in the captured URL queue, analyze the other urls in it, and put the URL into the URL queue to be captured, thus entering the next cycle. This requires us to consider how to get more crawlers to our site.

The search results are returned to the user in a sequential order, which is determined by the following factors.

Here provides a commonly used SEO comprehensive query address, interested can go to understand [http://seo.chinaz.com/](http://seo.chinaz.com/)

Second, HTML tag semantic and SEO connection

HTML semantics, simply speaking, is to make the machine can read the content of the web page. From the working principle of search engine, it can be seen that tag semantics plays a great role in crawler crawling and indexer processing. Whether in crawler crawler, or in the indexer analysis of the web page, let the machine more accurately analyze and store the content of the web page, which requires us to use reasonable HTML markup and its unique attributes to format the document content.

Third, semantic tags are common in SEO

  • Use of H tags

< h1 > is the highest level, so you need to determine exactly what is most important on each page and what keywords to optimize. Take our most common blog as an example, the first page of the blog lists the most is usually the latest blog, and the most important should be the name of the blog, and the latest link title behind the article can use < H2 > or < H3 >, generally use < H2 >, indicating the sub-title.

  • The use of the strong tag

  • Title SEO title

  • Meta Name =”description” Content =”description”

  • Meta name=”keywords” content=”网站 查 看”

  • A href=” url “title=” url”

  • Img SRC =” url “Alt =” url”

  • Div ID =”copyright” Add the name and link to the copyright section

In addition, HTML5 specially adds tags of structural elements related to structure such as header, footer, navigation and article content, which also shows that semantic HTML structure is the development trend of HTML.

  • nav 
It can help the UA quickly get navigation content, for example, the screen reader can skip to the navigation position without much rendering.
  • aside 
Can represent content that is not closely related to the surrounding content (advertising), usually in the form of sidebar content (related background content), quote content
  • header 
Usually a set of introductory descriptions (search box/logo /…) Web crawlers can easily skip sections such as “and” to better locate web content
  • article 
Independent documents, pages, applications and sites can be published and reused independently; It could be a post, an article, a user comment, an interactive widget
  • section 
Group content by subject, usually with heading
Not a “semantic div”
When to use it?
A simple rule: Section is appropriate when you want the contents of an element to appear in a document outline.

Four,

In our usual development process, the most used tag is div, any UI can be achieved by div with CSS style, but the use of semantic tag is not much.

Then use semantic tags if really necessary, the individual thinks, if the browser as a website needs to be retrieved, semantic tags have certain necessity, done SEO knows, on the premise of not paying, want to put their site by keyword search in the browser to the first page of the search, how difficult is, therefore, Optimize what you can at the code level, and do what you can. The main purpose of semantic tags is to be search engine friendly, to make it easier for screen readers to read the content of the page, and to make the page appear clear when removing or losing styles. However, if the site is only used on the Intranet, or is a toB type of site, this need is not very much.