Front-End engineers must know the SEO tips (2): Make more beautiful code (content and semantic code) than design

The present web design, most not only requires aesthetics, front-end code often play an important role. This means that a large part of SEO or SEO responsibility should fall on the designer. However, There are a lot of web designers who don't understand this problem and how to achieve it in the early days of building a website is full search engine optimization. Of course, to achieve this height, must be inseparable from learning. It takes time to use.

A. Making code that is more beautiful than design (semantic code) is actually using the appropriate code in the right place.

Next, I'll give you a few examples to understand:

H1~H6 tags are used for headings.

UL tags are used for unordered lists.

OL tags are used in ordered lists.

DL tags are used to define data lists.

Stong and EM mean to tell the crawler that this is the point.

Depending on the structure of the content (content semantics), choosing the Right Tags (code semantics) allows developers to read and write more elegant code while allowing browser crawlers and machines to parse well.

Two. What are the benefits of semantic tagging? Why semantic tagging?

A Web page is like a house, HTML structure is a side of the wall, and the label is a block of bricks, bricks should be placed orderly, neat, the wall will be firm. Finally, the CSS is decorative materials, beauty is on her. So we're going to have an excellent web page, It is necessary to provide a clean and clear structure of HTML, more inseparable from the extreme beauty of CSS.

From the above also explained that the label semantics is extremely important, the HTML each label has its own semantics, has its own scope of application. But it is often overlooked or abused by us, for example: Dozens of or hundreds in a page, <div> this is a meaningless tag, just a layer, Very detrimental to the maintenance of the latter, and the <table> label is a data label, the use of the time, we will be bold to use.

The benefits of labeling semantics

1. When you remove or lose the style, you can make the page appear in a clear structure:

HTML itself is not performance, we see for example

<strong> is bold, do not think that this is the expression of HTML, these are actually HTML default CSS style in effect, so the removal or loss of style can make the page clear structure is not the advantage of semantic HTML structure, but the browser has a default style, The purpose of the default style is also to better express the semantics of HTML, it can be said that the browser's default style and semantic HTML structure is inseparable.

2. Screen readers (if the visitor has a visual impairment) will "read" your page exactly according to your tag .

For example, if you use a semantic tag, the screen reader will "spell out" your words, instead of trying to pronounce them completely.

3.PDA, mobile phones and other devices may not be able to render web pages like normal computer browsers (usually because these devices have weak support for CSS).

Use semantic tags to ensure that these devices render Web pages in a meaningful way. Ideally, the task of viewing the device is to render the Web page in accordance with the conditions of the device itself.

Semantic tagging provides the device with the information it needs, eliminating the need for you to consider all possible displays (including existing or future new devices). For example, a phone can choose to make a tag The text of the caption is displayed in bold. The handheld may be displayed in a larger font. Either way, once you mark the text as a caption, you can be confident that the reading device will display the page appropriately based on its own criteria.

4. Search engine crawlers also rely on tags to determine the context and weights of individual keywords.

In the past you may not have considered search engine crawlers to be the site's "visitors", but now they are actually extremely valuable users. Without them, the search engine will not be able to index your site, and then the average user will be very difficult to come over to visit.

5. It is important that your page is easily understood by crawlers, because the crawler largely ignores markup for performance and focuses only on semantic tagging.

Therefore, if the title of the page file is marked instead of, then the location of the page in the search results may be compared. In addition to improving ease of use, semantic tagging facilitates the correct usage of CSS and JavaScript, since it provides many "hooks" to apply the style and behavior of the page.
SEO is mainly by the content of your site and external links.

6. Facilitate team development and maintenance

We have set a very good standard, in the team we all follow this standard, can reduce a lot of differentiated things, convenient development and maintenance, improve development efficiency, and even achieve modular development.

Three. What should we do?

1. Use no semantic tags as little as possible: div and span

2. When the semantics are not obvious, you can use either DIV or P, use p as much as possible, because P has the upper and lower spacing in the default case, which is advantageous to the compatible special terminal;

3. Do not use the plain style tags: b,font,u,i,del, to use CSS settings.

4. Need to emphasize the text, can be included in the strong or the EM tag (browser preset style, can be specified with CSS without them), strong default style is bold (do not use B), EM is italic (without i);

5. Use the table, the title to use caption, the table head with THEAD, the main part with Tbody surrounded, the tail with tfoot surrounded. Table header and general cell to distinguish open, table head with th, cell with TD;

6. form field to be wrapped with fieldset label, and legend label to explain the use of the form;

7. The description text for each input tag needs to use the label label, and by setting the ID property for input, set For=someld in the Lable label to associate the explanatory text with the corresponding input.

Front-End engineers must know the SEO tips (2): Make more beautiful code (content and semantic code) than design