In a quick understanding of web semantics, only know that web semantics is good for SEO and easy for screen readers to read, but do not know how it is good for SEO and easy for readers to read, with this question, some exploration and summary.

SEO

What is SEO?

SEO (Search Engine Optimization) is a method of using Search Engine rules to improve the ranking of the target website in related Search engines. Generally speaking, it is to optimize your website according to the rules of the search engine, so that your website can be ranked in the front of the user’s search results, and improve the number of visits to the website.

SEO common ways

Use DIV+CSS layout

The use of DIV – CSS layout of the site is very friendly to search engines, so it avoids the Table nesting level too much and can not be captured by search engines, and concise, structured code is more conducive to highlight the key and suitable for search engines to capture.

Try not to use table layouts because search engines are too lazy to crawl more than 3 layers of nested table layouts.

TDK optimization

TDK, title, description, keywords.

One, the title

In SEO, the optimization of the title plays a pivotal role, whether from the perspective of user experience, or from the search engine ranking effect, title is the most important factor in page optimization. Title separators are usually, _, -, and Spaces. Among them, _ is more friendly to Baidu, while – is more friendly to Google. Spaces can be used in English sites but less in Chinese.

Recommended practices:

  1. Each page should have a unique title, don’t use the same default title for all pages
  2. Headings should be thematically clear and contain the most important content of the page
  3. Be concise and concise. Do not list irrelevant information
  4. If your title is not too long, you can also add keywords, such as article title_ keyword _ website name
  5. Users usually browse from left to right, and important content should be placed first in title
  6. Use a language familiar to the user. If you have both English and Chinese site names, use the title that is familiar to your users

Example:

<title> Alibaba 1688.com - the world's leading wholesale procurement platform, wholesale website </title>Copy the code
<title> JD.COM - Authentic low price, quality assurance, timely delivery, easy shopping! </title>Copy the code

Second, the description

Description is not a reference factor in weight calculation. The presence or absence of this tag does not affect the weight of the web page and is only used as a selection target for the summary of search results. Users are most likely to decide whether to visit a site based on a summary.

Recommended practices:

  1. Description is the best choice for web pages that do not have large paragraphs for summaries, such as the homepage, channel page and product parameter page
  2. Describe the page accurately, don’t pile keywords
  3. Create a different description for each page to avoid using the same description for all pages
  4. The length is reasonable, but long but short (preferably 100-150 characters, for Chinese, 50-75 characters).

Example:

<meta name="description" content= At present, 1688.com has covered raw materials, industrial products, clothing and apparel, household department stores, small commodities and other 12 industry categories, providing a series of supply products and services from raw materials, production, processing, spot and so on. />Copy the code
<meta name="description" content=" JD.COM- A professional integrated online shopping mall, selling tens of thousands of brand quality products such as home appliances, digital communications, computers, home furnishing department stores, clothing, maternal and child, books, food, etc. Convenient, honest service, to provide you with a pleasant online shopping experience!" />Copy the code

Third, keywords

Keywords do not have a high weight in the search rankings, but reasonable Settings can improve the density of keywords and optimize the experience of the search results page. By increasing the density of keywords, so as to improve the ranking of keywords in search engines, is a common means of SEO optimization.

The core idea of SEO is to seize several keywords per page (generally no more than 5) for core optimization, so set the main keywords related to the content of this page from one to three. Use commas between keywords in The English state to separate, do not abuse keywords, it will give the search engine a bad impression.

Example:

<meta name="keywords" content=" alibaba "/> <meta name="keywords" content=" Alibaba "/>Copy the code
<meta name="Keywords" content=" online shopping, online shopping, mobile, laptop, PC,MP3,CD,VCD,DV, Camera, digital, accessories, Watch, memory card, jd.com "/>Copy the code

Structuring with HTML

I. H label

H tag in HTML code is the meaning of “title”, just like an article, the title is the most important object of the article, but also an object that search engines focus on when ranking. There are six H tags in HTML, respectively H1 / H2 / H3 / H4 / H5 / H6, respectively representing different levels. H1 headings have more weight, and so on.

In general, each page should have a unique h1 title, h1 title but it can be seen so many times, each has the outline of structure tags can have their own independent h1 title, such as header, footer, section, value, the article.

Use the H tag according to the actual situation and do not abuse it. For example, it is impossible to have multiple first-level headings in an article, so H1 can only appear once in the same article, while H2, etc., can appear multiple times. Use different H tags depending on the importance of what you want to show. Pay special attention to the h tag in the best keyword! But don’t abuse it.

Rational use of H1-H6 tags in the page can make the main and secondary structure of the page content clear, which is conducive to the search engine to identify the content

Second, the Alt

Alt is the annotation in the image, which is critical to image optimization. Search engines don’t yet recognize the content of the image, so adding Alt to IMG tells search engines what the image is, so they get a better image ranking.

In general, when inserting images, we set the image’s description in Alt, which can contain keywords but do not stack them intentionally. In particular, these contents can not be repeated, otherwise it is easy to be punished by the search engine!

Example:

<img src=".. /logo.png" alt="XXXlogo" width="100px" height="100px" />Copy the code

Strong, EM tag

These tags can change the text to another prominent style, such as bold, italic. Not only do they visually draw the reader’s attention, but search engines use them as keywords. Strong is referred to as “strengthening” and em is referred to as “emphasizing”, meaning that these two tags have a special meaning, which is critical to site optimization. Most of the time, when we’re optimizing our site to highlight keywords, it’s better to use strong or em than B or I.

Fourth, the nofollow

Nofollow is used for in-site links and can influence search engine rankings.

It is an attribute in the HTML tag, and its main function is to tell the search engine spider not to follow the link with the nofollow attribute tag, that is, to tell the search engine spider not to crawl and pass weights.

For example, in some comments on the website, there will always be a variety of links left by people, which will form a lot of spam links over time. This impact on the main site is very big, will lead to these links and links between each other to transfer weight, eventually make the weight of the main site dispersed.

Add method:

<a href= "URL" rel= "nofollow" >Copy the code
<a href= "URL" rel= "external nofollow" >Copy the code

The first method of adding nofollow attribute tag is a common one. Its main function is to tell the search engine spiders not to track this link, while the second method of adding nofollow attribute tag is to tell the search engine that this is an outbound link and tracking is not allowed. Although the nofollow attribute tag is added to the outbound link, the search engine spider will still crawl this link when it finds it for the first time, but the search engine will automatically record the nofollow attribute value of this link, so it does not export the weight to this link.

Link URL

One, unified URL

http://www.domainname.com
http://domainname.com
http://www.domainname.com/index.html
http://domainname.com/index.html
Copy the code

The above four are actually home page. While it won’t cause any trouble for visitors, four urls with the same content for a search engine could be mistaken for cheating. The weight of these four pages will be spread out.

Second, 301 jump

URL change, be sure to put the old address 301 to the new, or before doing some of the weight of what all useless.

URL hierarchy

The shallower the link directory level, the greater the weight. In the absence of other backlinks, the weight of each directory is only part of the weight inherited from its parent directory, so the weight will be lower than its parent directory. It is often said that the farther away from the level of the home page, the smaller the weight.

This is on the premise that there are no other external chain effects. So the site in the chain construction or chain layout adjustment, will appear in some lower directory weight higher than the higher directory. Especially in some specific directory keywords ranking ability.

In more than 98% of jingdong’s pages, the URL level is below the top-level domain name, at most is below the level of directory. This ensures that the best weight inherits the master domain and reduces weight loss by layers. Such as:

Jingdong level category pages URL: http://channel.jd.com/electronic.html http://channel.jd.com/home.html secondary classification URL:  http://list.jd.com/670-677-678-0-0-0-0-0-0-0-1-1-1-1-1-72-4137-0.htmlCopy the code

From the above URL, the link level is no more than two levels, reduce the link level as much as possible. At the same time, it is as short as possible.

ARIA

What is the ARIA

The Accessibility Web Initiative’s Accessibility Rich Internet Application Specification (WAI-ARIA, or ARIA for short). This is for visually impaired, deaf, mobility impaired people and those who pretend to be disabled. Especially for the blind, the eyes can not see, it needs to use auxiliary devices to browse the web, such as screen readers, screen readers can read aloud or output braille.

On May 21, 2015, the W3C HTML Working Group released a Working draft of the standard Notes on Using ARIA (ARIA in HTML) in HTML. This document provides practical guidance for developers on how to add accessibility accessibility information specified by the Accessible Rich Internet Applications Specification (WAI-ARIA 1.1) to HTML documents, This makes it easier for people with disabilities to access Web content and Web applications.

ARIA Usage Specification

Web developers can use roles and ARIA -* to add ARIA attributes to HTML elements, as described in the ARIA specification. Where role identifies the role of an element, aria-* describes the characteristics and states of things associated with it. Some HTML elements have default roles in ARIA, but not all HTML elements do. Here are a few elements with default roles:

The element roleattribute
a withhrefAttribute is:role=linkWhat is not possessed is not possessedrole=link
article role=article
aside role=complementary
body role=document
button role=button
dialog role=dialog
dl role=list
h1-h6 Role =heading, and withAria-level = 1-6 ‘to indicate the title level
input type=”button” role=button
input type=”checkbox” role=checkbox
img alt=”some text” role=img

Elements that do not have a default role attribute can be set by explicitly declaring role and aria-*. Such as:

<div role="header"> <div role="navigation"> </div> </div> <div role="main"> <div role="button" tabindex="0" disabled Aria-disabled ="true"></div> // button is disabled </div> <div role="footer"> </div>Copy the code

Matters needing attention:

  1. When the elements used (HTML5) are semantic and have corresponding default role attribute values, these elements should be used instead of redefining a role attribute and aria-* state. is recommended instead of

    .

  2. Do not violate the semantics of the tag when using roles. Using role=title on button elements is not allowed because button elements have default characteristics that conflict with title semantics.

This is just a brief introduction to the basic use of ARIA, precautions and common HTML elements associated with ARIA. For a more in-depth understanding, please refer to this article by Da Mo teacher on W3CPlus.

END

From Web semantics to SEO and ARIA, thank you very much for the careful summary of the predecessors, so that we can stand on the shoulders of giants.

Full text References:

[JINGdong SEO] jingdong site optimization analysis

SEO optimization combat

Web front-end Development Learning 3: SEO code optimization

Wai-aria Web specification for accessibility