"Gogo" Front End and SEO (1): Structure, performance, behavior separation

The standard definition web consists of three tiers:

– Structure layer (HTML)

– Presentation layer (CSS)

– Behavioral layer (JAVASCRIPT)

Promote the "structure, performance, behavior, three separate, non-interference" Web page.

What do they represent here?

– Content: Information for visitors to browse

– Structure: Make content logical and easy to use

– Performance: The outward appearance of the modified content makes it look beautiful

– Behavior: interoperating with content

According to the world standard, when you write a Web page, you should consider the structure, then add the style on the basis of the structure, finally adding the interaction behavior.

So HTML is used to preserve content and structure, and CSS is used to control the performance of the entire document. But on the Chinese page, pages that meet this standard are numbered.

So this thing has to do with the search engine yarn? Let's start with a chestnut: a snippet that is common in many web pages, as follows:

How do you write most of these pages?

Affected by the Div+css box model, the front end takes over the design diagram, and generally intuitively cuts the page into n blocks.

For example: Left first cut a div to the left to float, right and then cut a div to the right floating, left floating div inside add a picture (IMG), right floating div inside plus a title (H) and paragraph (P), as follows:

The source code is like this (DEMO1):

There seems to be no problem, but the nesting layer is actually much more. The path to body

The actual Web page, this fragment is also nested outside the multilayer, so the real path is much longer than this.

To be optimized to reduce the level. So think, outside there is no need to add a div, itself can be left floating and then set the margin to a fixed position, so the code is changed to Demo2:

Although the image of the div is less, but the path to the text remains unchanged, and then optimize, change to DEMO3:

At this point, the path to body <p> and

Demo1 is not in line with the standard, most of the time because it is written because the priority is not the overall structure of the document, but first split into a block, in a way to combine CSS into a piece. This is certainly not the idea of the structure-style separation advocated by the consortium.

So the last chestnut, from Demo1 to Demo3 two adjustments, in mind is from the "first HTML into a block, in the CSS together" to "first look at the HTML as a whole, in a block with CSS" evolution

Summarize it and bring it into the search engine. What good is this thing?

1. Improve page loading speed

2, reduce the revision cost. After all, the HTML is reduced, the corresponding CSS will be reduced, the natural need to modify the place is also less.

3, save bandwidth.

4, to increase the search engine readability of the Web page, the main content of the recognition easier. Obviously is a whole content, must be divided into a block, in case the search engine did not see these are linked to how to do.

5, to facilitate the readability and accessibility of a variety of devices.

A student abroad to do Google sue me, Google in the ranking is inclined to conform to the standards of the Web page, the comparison of slag and Google's search results can be seen, but the slag degree to this seemingly not a cold, estimated that domestic web pages in this is generally inferior to foreign, so also muddle through.

Below, is the customary taunt time.

The relationship between the front-end and SEO is very large, is closely connected, and probably because of a reliable front-end, and then the flow up, however, some ignorant SEO think it is their own prior to do what the action of inexplicable lead to traffic growth, fart on the top of the thought of their very good.

Front-end good or bad directly affect the search traffic, but there are not too many people pay attention to (in fact , the state Ping has already mentioned), most SEO talk about the front-end search engine optimization, the thought is to simplify the HTML/CSS/JS (most of the third-party tools to format a bit and then merge a bit) or is marked H1, H2 and other tags, but not aware of the underlying things.

Look at the Web page from the perspective of the search engine, look at the HTML, not the interface after the browser rendering. Seen some of the pages, using a common two-column layout, the left column occupies <body> width 80%, the main content of the display, the right column of 20% width, call a bunch of fragmented secondary information, the browser to see the main content to the secondary content from left to right, very normal. But open HTML, the right column of the secondary content of the div is placed in front of the main content Div, which in the search engine seems to be completely different.

Above, is the front-end and SEO relationship in the iceberg corner.

"Gogo" Front End and SEO (1): Structure, performance, behavior separation