Explain the implementation method of SEO from the front end angle

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

SEO (Search Engine optimization), is the legendary search engine optimization, is to increase the Web page in the search engine natural search results in the number and improve the sort position to do the optimization behavior. I think this is a simple, but complicated technique, unutterable, inexpressible. As a front-end engineer, do not need to be proficient in SEO, but must understand it. SEO has a constant rule is that it is always changing, because there is no constant change of the optimization scheme for everyone to apply. But we can still find some basic or accepted rules for the site's SEO. More importantly, we should have their own practice, and constantly find suitable for their own effective SEO methods.

From a macroscopic point of view, I think that SEO has three most important rule, that is the original content, high-quality external links and sustained moderate optimization.

Front-End is to build a very important part of the site, the focus from the front end of the point of view to explain the implementation of SEO methods. The front-end work is mainly responsible for the html+css+js of the page, the optimization of these several aspects will be a solid foundation for SEO work. Highlighting important content can let the search engine to determine what the current page focus on, improve the speed of Web site access can make the search engine spider smooth, fast, a large number of crawl Web content, so I will focus on highlighting important content and enhance the speed of the site mainly to sum up.

Highlight important content

Reasonable title, description and keywords

Screenshot taken from 360 search (so.com)

Although now the search for these three weights slowly reduced, but still hope to be able to properly write them, only write useful things, do not write novels here, to express the focus.

Title: Only emphasis can be, important keywords appear not more than 2 times, and to rely on before, each page title to be different, the following figure:

Description: The content of the page is summarized here, the length should be reasonable, not too much to stack keywords, each page description to be different, the following figure:

Keywords: List A few important key words can, also cannot pile up excessively.

Semantically write HTML code that conforms to the standards of the consortium.

For search engines, the most direct face is the page HTML code, if the code to write the semantics of the search engine will be easy to read the meaning of the page to express. For example, the text module to have a large title, reasonable use of H1-H6, list form of code using UL or OL, important text use fervent and so on. In short, to make full use of a variety of HTML tags to complete their job, of course, compatible with IE, Firefox, Chrome and other mainstream browsers.

Let's take a look at the famous Zen Garden website (http://www.csszengarden.com/), where there is no style, the code is very semantic, looks neat, and loads different styles to change the appearance of the page as you like.

No style case:

Load Style 1:

Load Style 2:

Use the layout to put the important content HTML code first.

Search engine Crawl HTML content is from top to bottom, take advantage of this feature, you can let the main code first read, ads and other unimportant code on the bottom. For example, in the left column and the right column of the same code, just change the style, using Float:left, and float:right, you can let the two columns in the display position interchange, so you can ensure that important code in the first, let the crawler first crawl. The same applies to multiple columns.

Important content do not use JS output.

Spiders do not read JS content, so important content must be placed in HTML.

Use the IFRAME framework as little as possible.

Search engines do not crawl into the IFRAME content, the important content does not put in the frame.

Adds an alt attribute to a picture.

When the network speed is slow, or the image address is not valid, it can reflect the role of the ALT attribute, he can let the user when the picture does not show the role of the picture.

When you can display a picture:

Cannot Display Picture:

Where you need to emphasize, you can add the title attribute.

Preserves text effects.

If you need to take into account the user experience and SEO effect, where you must use the picture, such as the title of the personality font, we can use the style control, so that text will not appear in the browser, but in the page code is the title.

For example, the "TV series Classification", in order to perfect the design map, the front-end engineers can make the text into the background, and then use the style to make the text in the HTML of the indentation set to a large enough negative, deviating from the browser, you can also use the Set line high method to hide text. Note: Do not use Display:none method to hide text, because the search engine will filter out Display:none, the contents of the inside, will not be retrieved by spiders.

HTML code:

CSS code:

Or

Use CSS to intercept characters.

If the length of the text is too long, you can use the style to intercept, set the height, beyond the part of the hidden. The advantage of this is that the text is fully presented to the search engine, but also to ensure the performance of the beautiful.

Increase the speed of the website

As far as possible outside the chain of CSS and JS, to ensure that the Web page code neat, but also conducive to future maintenance.

The advantage is that the content, performance and behavior can be separated to ensure that the code is clean and easy to maintain.

CSS placed in the file head, JS placed at the end of the file, you can use tools to compress CSS and JS files.

CSS Sprites.

Reduce HTTP requests. The use of CSS sprites technology can be used in the Web page to synthesize the slices to a map, so as to reduce the number of HTTP requests, but also make the style picture loaded once, to avoid the Web page "white" embarrassment.

360 home page (http://www.360.cn) main front-end picture 2:

Picture 1:

Picture 2:

Set the height and width of the picture to increase the load speed of the page.

Increase the expiration time for static resource files, allowing users to access the site faster through local caching.

Reduce the frequency of the big revision.

Compress and format the code.

Can be on the line before, using some tools, HTML, CSS and JS are compressed, formatted, you can reduce the size of the page.

Not using CSS expressions can affect efficiency.

The use of CDN network can speed up user access.

Enable gzip compression, browse faster, search engine spiders crawl information will increase.

Good at using browser plug-ins.

For example, Firefox's yslow is very useful, you can view the page code, style, JS, pictures and other loading conditions for further optimization of the page played a guiding role.

Pseudo static settings.

If it is a Dynamic Web page, you can turn on the pseudo static function, so that the spider "mistakenly thought" This is a static web page, because the static web more than the appetite of spiders, if the URL with a keyword effect better.

Dynamic Address:

http://www.360.cn/index.php

Pseudo-Static Address:

Http://www.360.cn/index.html

Post language

Do not play tricks, the use of the technology has been mastered to deceive search engines, may be in a short period of time has obvious effects, ranking promotion, etc., but search engine will decisively drop the right of your Web page or directly blocked, not worth the candle.

Hope this article can let everybody correct understanding seo,seo to moderate, the website still want to "content is king", have good content website will have development.

Welcome to my personal website (www.tianlong.org) to communicate and learn from each other.