Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of what the web front-end SEO means, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value, I believe you will gain something after reading this web front-end SEO article, let's take a look at it.

Introduction to SEO

Full name: Search English Optimization, SEO. Since the advent of search engines, SEO has been born.

Recommended courses: SEO fundamentals, essential knowledge for SEO beginners, SEO tutorials, common SEO engine optimization tools

The meaning of existence: the optimization behavior done in order to improve the number and ranking position of web pages in the natural search results of search engines. In short, we hope that search engines such as Baidu can include more carefully crafted websites, and the website will be at the front when others visit it.

Classification: White hat SEO and black hat SEO. White hat SEO plays a role in improving and standardizing website design, making the site more friendly to search engines and users, and the site can also get reasonable traffic from search engines, which is encouraged and supported by search engines. Black hat SEO, using and magnifying search engine policy defects to get more user visits, most of this kind of behavior is to deceive search engines, general search engine companies do not support and encourage. This article focuses on white hat SEO, so what can white hat SEO do?

1. Carefully set the title, keyword and description of the website, reflect the positioning of the website, and let the search engine understand what the website does.

two。 Website content optimization: the correspondence between content and keywords to increase the density of keywords

3. Set up the Robot.txt file reasonably on the website

4. Generate a search engine-friendly sitemap

5. Add external links and promote it on various websites

Front-end SEO

Through the structural layout design and page code optimization of the website, the front-end page can be understood not only by browser users, but also by "spiders".

(1) optimize the structure and layout of the website: try to be as simple as possible, come to the point, and advocate a flat structure.

Generally speaking, the less the level of website structure, the easier it is to be crawled by spiders, and it is easier to be included. Generally speaking, the directory structure of small and medium-sized websites is more than three levels, and "spiders" are unwilling to climb down. "what if they get lost in the dark?" And according to the relevant survey: visitors are likely to leave if they have not found the information they need after jumping three times. Therefore, the three-tier directory structure is also the need of experience. To do this, we need to do:

1. Control the number of links on the home page

The home page of the website is the place with the highest weight. If there are too few links on the home page and there is no "bridge", "Spider" cannot continue to climb down to the inner page, which directly affects the number of sites included. But the home page links can not be too many, once too many, there are no substantive links, it is easy to affect the user experience, but also reduce the weight of the home page of the site, the inclusion effect is not good.

Therefore, for small and medium-sized enterprise websites, it is recommended that there are less than 100 links on the front page, and the nature of links can include page navigation, bottom navigation, anchor text links, and so on. Note that links should be based on the user's good experience and guide users to obtain information.

two。 Flat directory level, try to let the "spider" as long as 3 times to jump, can reach any page within the site. Flat catalog structure, such as "plant"-> "fruit"-> "apple", "orange" and "banana". Bananas can be found at level 3.

3. Navigation optimization

Navigation should be written as much as possible, or with pictures, but the image code must be optimized.

The tag must add "alt" and "title" attributes to tell the search engine where to navigate, so that users can see the prompt text even if the picture is not displayed properly.

Secondly, breadcrumb navigation should be added to each web page. Benefits: in terms of user experience, it can let users know the current location and the location of the current page in the whole site, and help users quickly understand the organizational form of the site. Thus, a better sense of location is formed, and an interface to return to each page is provided to facilitate user operation. As far as "spider" is concerned, it can clearly understand the structure of the website, and at the same time, it also adds a large number of internal links to facilitate crawling and reduce the jump rate.

4. The structure and layout of the website-details that can not be ignored

Page header: logo and main navigation, as well as user information.

Main body of the page: left body, including breadcrumb navigation and text; hot articles and related articles on the right, benefits: retain visitors, let visitors stay more, for "spiders", these articles belong to related links, enhance the relevance of the page, can also enhance the weight of the page.

Bottom of the page: copyright information and links.

Special attention: paging navigation writing method, recommended writing method: "Home page 1 2 3 4 5 6 7 8 9 drop-down box", so that the "spider" can jump directly according to the corresponding page number, and the drop-down box directly selects the page jump. And the following writing is not recommended, "home page next last page", especially when the number of pages is particularly large, "spider" need to climb down many times to grab, will be very tired, will be easy to give up.

5. Control the size of the page, reduce http requests, and improve the loading speed of the website.

A page had better not exceed 100k, too large, the page loading speed is slow. When the speed is very slow, the user experience is not good, can not retain visitors, and once the timeout, the spider will also leave.

(2) Web page code optimization

1. Title: just emphasize the key points, try to put the important keywords in front, don't repeat the keywords, and try not to set the same content in the title of each page.

two。 Tags: keywords, list a few important keywords on the page, and remember to pile them up too much.

3. Tags: page description, need to highly summarize the content of the page, be sure not to be too long, too many keywords, each page should be different.

4. Tags in: try to make the code semantic, use the right tags in the right place, and do the right thing with the right tags. Let the reader of the source code and "spider" at a glance. For example: h2-h7 is used for the title class, tags are used to set the main navigation of the page, and so on.

5. Tag: on-page links, to add the "title" attribute to explain, let visitors and "spiders" know. And external links, links to other sites, need to add el= "nofollow" attribute, tell the "spider" not to climb, because once the "spider" climbed the external link, it will not come back.

6. The title of the text should be labeled: "Spider" thinks it is the most important. If you don't like the default style, you can set it through CSS. Try to use tags for body headings and subheadings, while h title tags should not be used indiscriminately elsewhere.

7.

Tags: used only for wrapping text content, such as:

First line of text, second line of text, third line of text.

8. The table should use the table title label

9.

Should be explained with the "alt" attribute

10. Label: use when it needs to be emphasized. Tags can be highly valued in search engines, it can highlight keywords and show important content, and the effect of tag emphasis is second only to tags.

Label: it is only used to display the effect, and it will not have any effect in SEO.

10. Do not use special symbols for text indentation. You should use CSS to set it. Copyright symbols do not use special symbols ©can directly use the input method, spell "banquan", select the serial number 5 can type the copyright symbol ©.

12, ingenious use of CSS layout, put the HTML code of important content first, the front content is considered to be the most important, give priority to "spider" reading, content keyword crawling.

13. Important content do not use JS output, because "spider" does not know

14. Use the iframe framework as little as possible, because spiders generally don't read its contents.

15. Use display:none with caution: for text content that you don't want to display, you should set z-index or set it outside the browser display. Because search engines filter out the contents of display:none.

16. Keep streamlining the code

If the 17.js code is operating the DOM operation, it should be placed as far as possible before the body closing tag and after the html code.

Note: HTML:

1. The label is open and closed.

two。 Avoid redundant code, such as removing space characters.

3. Make rational use of label semantics.

4. Reasonable nesting rules to avoid nesting block elements within row elements.

The title attribute and alt attribute need to be added within the 5.img tag.

6.A title attribute needs to be added in the tag.

The optimization of 7.Meta tags (an important method of search engine optimization in the past, which is no longer a key factor, but still can not be ignored) mainly includes: the keyword density of Meta description and Meta keywords should be moderate, usually 2% Mur8%, which means that your keywords must appear on the page several times, or avoid piling up keywords within the scope allowed by search engines.

8. Page title, must list the title of the information, the name of the website and related keywords, avoid heap keywords.

9. Make rational use of comments.

CSS:

1. Avoid writing css code in tags.

two。 If the amount of css code is small, it can be written directly in the header. Otherwise, please use the external introduction method.

3. Do not use the wildcard selector * {margin:0;padding:0;} not only because it is slow and inefficient, but also because some unnecessary elements reset the outer and inner margins. Please refer to the reset file, and reference the reset file before the css file you define.

4.css code abbreviations can increase the speed of writing code and simplify the amount of code you need, including margin,padding,border, font, background and color values.

5. With css inheritance, if multiple child elements within a parent element have the same style, the same style can be defined on the element.

6. If multiple elements have the same style, define a generic class or use a group selector.

7. Use the background map merging technique.

8. Appropriate code comments.

JS:

1. Adopt the method of external introduction.

two。 Reasonable merging of JS code can reduce the pressure on the server.

3. Good JS code habits. For example: reduce page redrawing, reduce the number of searches on the scope chain.

This is the end of the article on "what is the meaning of web front-end SEO?" Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "what is the meaning of web front-end SEO". If you want to learn more knowledge, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.