A list,

Search Engine Optimization, also known as SEO, namely Search Engine Optimization, it is a kind of ranking by analyzing the rules of Search engines, to understand how various Search engines Search, how to crawl Internet pages, how to determine the Search results of specific keywords ranking technology. The search engine adopts the means that is easy to be cited by the search engine to optimize the website, improve the natural ranking of the website in the search engine, attract more users to visit the website, improve the website’s traffic, improve the website’s sales ability and publicity ability, so as to enhance the brand effect of the website.

Second, SEO optimization methods

1. Optimization of meta tags:

For example, title, keywords,description;

  • Title (Title)

How to write: Site name – a few words or a brief description made by the host; It contains a maximum of 80 characters and is separated by hyphens (-)

Usage:

<title> Site title </title>Copy the code

(1) Home title writing, generally is “site name – the main keyword or a description containing the main keyword”. Usually the site name comes after, because search engines give the first word of the title higher than the last. For example, to make the word “refrigerator”, write “refrigerator _ frequency conversion refrigerator – Haier official website”.

(2) column page title writing, there are generally two kinds: “column name – site name”, “column name column keywords – site name”. And the column name is best to use keywords to determine, such as enterprise recruitment column is best to use enterprise recruitment, and do not make a person can not identify the name such as enterprise, enterprise look, or enterprise with some special symbols, although this writing method is very personality, but will let your website in optimization accounted for the disadvantage.

(3) classified list page title writing, is generally “classified list page name – column name – site name”, this and column page about.

(4) Article page title writing, generally there are three kinds: “article title – website name”, “content title – column name”, “content title – column name – website name”. Among them, the writing method of “content title – column name – website name” is the most standard, but it is relatively complex, it can give users a good hint, let users know which article he is visiting, and under which column of which website

  • Keywords

Writing: website name + a few column name + a few key words; Generally no more than 100 characters, set 5 keywords is the most appropriate, but can be determined according to their own requirements;

Usage:

<meta name= "Keywords" Content= "Keywords 1, 2, 3, 4" >Copy the code

(1) The keyword writing method of the home page is generally “website name, main column name, main keywords”.

(2) Column page keywords writing method, generally is “column name, column keywords, column classification list name”.

(3) classification list page keywords writing method, this is relatively simple, as long as you write the main keywords in this column.

(4) article page keywords writing method, it is suggested that we extract the keywords in the article, for example, my article is mainly about SEO optimization, so my keywords must be SEO optimization, if you feel that your ability to extract keywords is poor, you can also choose more words in the article as keywords, For example, the content I am writing now is about title, keywords and description, so my article page keywords are these three.

  • Description

How to write: The first page of this introduction is very important, must be filled out carefully. Because in the search engine results above these content users can see directly, and well written words can attract a lot of users to click and bring more traffic. But no matter how you write it, remember to write out the keywords that your site owner does, and remember to write it in plain English at the end. A maximum of 200 characters;

Usage:

<meta name= "Description" Content= "Description" >Copy the code

(1) The writing method of home page description is generally to integrate the title, keywords and the content of some special columns into the home page and write a simple introduction.

(2) The writing method of column page description is generally to integrate the column title, keywords and category list names into it and write a simple introduction.

(3) Category list page description, this is relatively simple, generally only need to classify the list of titles, keywords fusion together, written in a simple introduction.

(4) Article page description writing method, generally there are two ways to write, the standard writing method is the same as the previous, the title of the article, the important content and keywords in the article together, written in a simple introduction. This is the best and most standard way to write it. You can add keywords in the first paragraph and title of the article. For example, my article is about title, keywords and description. Then add these contents in the first paragraph and title of the article. Then copy the first paragraph of the article directly into description.

2. Semantic HTML code, W3C compliant: semantic code makes it easy for search engines to understand web pages

What is HTML semantics

Use the most appropriate tags to tag your content. In layman’s terms, just telling you, “This is a primary heading or secondary heading,” “this is a paragraph,” “this is a header,” “this is a navigation bar,” doesn’t tell you, “This is red,” “How wide is this, how high is this.” A title is a title without CSS. This is simple HTML semantematization: representing the structure of a web page. Semantic HTML elements refer to content that is labeled with the most appropriate HTML and is not concerned with content display in markup composition. Semantic HTML is the cornerstone of effective web sites.

Be careful when writing HTML code

  • Use the non-semantic tags div and SPAN as little as possible;
  • When the semantics are not obvious and div or P can be used, use P as much as possible, because p is spaced up and down by default to facilitate compatibility with special terminals.
  • Do not use pure style tags such as B, FONT, u, etc. Use CSS Settings instead.
  • Text that needs to be emphasized can be included in the strong or em tag (the browser’s default style is not CSS). Strong is bold (not B) and em is italic (not I).
  • To use a table, use caption, thead as the header, Tbody as the body, and Tfoot as the tail. Table header and general cells to be separated, table header with TH, cell td;
  • The form fields are wrapped in the FieldSet tag and the Legend tag describes the purpose of the form;
  • The description text for each input label needs to use the label label, and is associated with the corresponding input by setting the ID attribute for the input and for=someld in the lable label.

Common semantic elements in HTML5

HTML5 provides new semantic elements to define different parts of a web page. They are called “slicing elements”, as shown here:

Common semantic elements:

  • Header element

    The header element represents the header of a “Web page” or “Section.”

    Usually contains h1-H6 elements or hgroups as the title of an entire page or a block of content. You can also wrap the table of contents section of a section, a search box, a nav, or any associated logo.

    There is no limit to the number of header elements you can have on the entire page. You can add one header element to each content block.

< header > < hgroup > < h1 > website title < / h1 > < h1 > subtitle website < / h1 > < hgroup > < header >Copy the code

Header usage note:

  1. Can be the header of a Web page or any section;
  2. There is no limit to the number.
  3. Don’t use headers if hgroups or H1-H6 work just fine on their own.
  • (2) Footer element

The footer element represents the footer of a “page” or “section” and usually contains some basic information about that section, such as the author, links to related documents, and copyright material. If the footer element contains the entire section, they represent appendices, indexes, promotions, license agreements, tags, categories, and other similar information.

<footer> I am the footer </footer>Copy the code

Footer use note:

  1. It can be the bottom part of a Web page or any section;
  2. There is no limit on the number of packages. The contents of the packages are similar to headers.
  • (3) HGroup element

The hGroup element represents a “page” or “section” title, and when the element has multiple levels, it can put elements H1 through H6 within it, such as the combination of the main title and subtitle of an article.

</h1> </h2> HTML 5</h2> </hgroup>Copy the code

Hgroup usage Note:

  1. Don’t use hgroups if you only need one H1-H6 tag
  2. Hgroup is used if there are consecutive H1-H6 tags
  3. If there are consecutive titles and other article data, h1-H6 tags are wrapped in hGroups and placed in header tags along with other article metadata
  • (4) Nav element

The nav element represents the navigation link area of the page. Used to define the main navigation section of the page.


<nav>
	<ul>
		<li>HTML 5</li>
		<li>CSS3</li>
		<li>JavaScript</li>
	</ul>
</nav
Copy the code

But I can’t help but use it sometimes, for example: sidebar table of Contents, breadcrumb navigation, search style, or next previous article, when in fact the spec says nav should only be used for the main navigation section of a page. The list of links in the footer area, even if they point to different areas of different websites, such as terms of service, copyright pages, etc., these footer elements will work.

Nav usage note:

  1. Use the nav element throughout the main navigation section of the page.
  • (5) Aside

Aside elements are included in the article element as an aside part of the main content, which can include information related to the current article, a label, an explanation of rank, etc. (Special section)

Used outside of the article element as the accessory information section of a page or site globally. The most typical is the sidebar, where the content can be log linking, navigation for other groups, or even ads related to the content of the page.

Content of the < article > < p > < / p > < value > < h1 > title? < / h1 > < p > this is content < / p > < / value > < article >Copy the code

Aside:

  1. Aside, in an article, stands for attached information about the main content,
  2. Outside of article, you can make a sidebar. If there is no article corresponding to it, you’d better not use it.
  3. In the case of ads, other log links or other category navigation can also be used
  • (6) Section element

The section element represents a “section” or “section” in a document. “Section” can refer to the subsections of an article by topic. “Sections” can refer to groups within a page.

Sections usually also have titles, although sections in HTML5 automatically downgrade titles H1-H6, but it’s best to downgrade them manually. As follows:

<section> <h1> What is a section? </h1> <article> <h2> Introduction to section</h1> <p> <section> <h3> About other </h3> <p> Introduction to other sections </p> </section> </article>  </sectionCopy the code

Section usage Note:

  1. A page can be divided into introduction, article entries, and contact information with sections. But for inside pages, it’s best to use article. A section is not a normal container element. For style presentation and scripting convenience, use div instead.

  2. Represents a section or segment in a document; Article, nav, and aside are special sections, so if you can use article, nav, and aside, don’t use section. If you can’t use div, use div

  • (7) Article element

Article elements are most easily confused with section and div elements. Article elements represent self-contained content within a document, page, or website, and are intended for independent development or reuse by developers. A forum post, a blog post, a user comment, an interactive widget. (Special section)

In addition to its content, an article will have a title (usually in the header) and a footer.

<article> <h1> An article </h1> <p> < / p > < footer > < p > < small > small content < / small > < / p > < footer > < article >Copy the code

More semantic elements: developer.mozilla.org/en-US/docs/…

Some simple semantic examples

Here’s a snippet of HTML code to optimize

<div class="main">
	<div class="h2"> <a href="#"> more </a></div> <div class="p"Word-wrap: break-word! Important; "> <span class="strong"</span></div> <div class="p"</div> </div>Copy the code

Adding CSS styles to the above code can do the trick, but using non-semantic tags such as div and SPAN, we can’t read the structure from the tag. We need to use code that says “what is the title” and “what is the content”. Let’s improve it.

  • Version of a
<div class="main"> <h2> tag semantics <a href="#"> More </a></h2> <p> various contents of paragraph 1..... </strong></p> <p> Paragraph 2... </p> </div>Copy the code

Version 1 is a big improvement over the source code. You can tell which is the title and which is the content from the tag, and you can see which is highlighted, but if you look closely there is a link in the H2 tag, although they are on the same line, the a link is not part of the title. We can also improve by adding HTML5 voice elements:

  • Version 2
<main>
	<header class="title"</h2> <a href="#"> more </a> </header> <article class="content"> <p> Various contents of paragraph 1..... </strong></p> <p> </p> </article> </main>Copy the code

In version 2, the new tags defined in HTML5 are more semantically perfect, so this is basically enough, but we can use ARIA(Web Accessibility Initiative) to make the code more perfect. More readable.

  • Version 3
<main role="main">
	<header class="title" role="heading"</h2> <a href="#"> more </a> </header> <article class="content" role="contentinfo"> <p> Various contents of paragraph 1..... </strong></p> <p> </p> </article> </main>Copy the code

You can now see the role attribute in the tag, which is the landmark role definition defined in ARIA that makes the screen reader work better. Of course, it’s not just that div tags don’t care about semantics. There are times when you have to use these non-semantic tags because of style requirements, and that’s when you should use them. But use as little as possible.

But don’t use html5 tags just because they’re new. Using them incorrectly can backfire. That’s why div is used in some places, because div doesn’t have any meaningful elements, it’s just a tag, and it’s just used to build the look and feel and structure. Therefore, it is the most suitable label for containers.

3. Alt must be used for non-decorative images

The Alt attribute of the tag specifies the alternative text to replace what the image displays in the browser if the image cannot be displayed or if the user disables it.

Example:

<img src="xxx.jpg" alt="Haier official website - Double Door Refrigerator" />
Copy the code

Alt tags are used for:

  1. It can use Chinese characters to introduce the content of articles. For some specific enterprise products, due to visual experience, it is often less text.

  2. Improve keyword density in the operation of the enterprise station, we often encounter is the first screen of the site a large banner banner, almost occupied most of the home page, in order to effectively improve the home core keyword density, we can only use all methods to add keywords, such as: Alt tags in the image to add.

4 links, good links can quickly improve the weight of your site

Link, also known as web link exchanges, reciprocal link, link exchange, alliance and so on, is the website of the certain resources complementary advantages between the simple forms of cooperation, namely, respectively in their website to place the other website LOGO image or text site name, and set the other website hyperlink (click, switch or pop up another new page). So that users can find their own website from the cooperation website, to achieve the purpose of mutual promotion, so often as a basic means of website promotion.

Links are links to each other’s websites on their own. The url and site name must be found in the code of the web page, and the site name should be displayed when browsing the web page.

Friendship link is the fundamental source of website traffic, such as a kind of friendship link website that can automatically exchange links (every visit an IP, will automatically row to the first), which is a kind of innovation self-service friendship link Internet mode.

5 outside the chain, high quality outside the chain, will give your website to improve a steady stream of weight

External chain refers to the import of their own website links in other websites. Importing links is a very important process for website optimization. The quality of the import link (that is, the weight of the page where the import link is located) indirectly affects the weight of our website in the search engine.

External chain is the blood of the Internet, is a kind of link. Without links, information is isolated, and as a result, we see nothing. A website is difficult to do everything, so the need to link to other sites, other sites can supplement the information to absorb, link the chain is not the quantity, but the quality of the link chain.

The effect of the chain is not only to improve the weight of the site, nor is it just to improve the ranking of a keyword. A high quality external link can bring good traffic to the site.

6. Submit unincluded sites to the login entrance of major search engines

  1. Baidu to submit entry: ziyuan.baidu.com/linksubmit/…

  2. Google submission entry: www.google.com/addurl/?hl=…

  3. 360 Submission entry: info.so.360.cn/site_submit…

  4. Sogou submitted entry: fankui.help.sogou.com/index.php/w…

  5. Bing submission entry: www.bing.com/toolbox/web…

7 important content HTML code in the first: search engine crawling HTML order from top to bottom, to ensure that important content will be captured

8. Use iframes sparingly: Search engines don’t crawl iframes

9. Speed up your website: Speed is an important indicator of search engine ranking

3. Google tools are used to count transit station traffic

Google stats code needs to be added to all pages to count transit traffic.

<! -- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-158959369-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments); } gtag('js', new Date());

  gtag('config'.'UA-158959369-1');
</script>
Copy the code

The original link: blog.csdn.net/yuyuking/ar…