Front end SEO code specification
What is SEO?
Search engine optimization is a way to improve the natural ranking of websites in relevant search engines by using the search rules of search engines. SEO refers to the behavior of making reasonable planning from the perspective of website structure, content construction scheme, user interactive communication and pages in order to obtain more free traffic from search engines, so as to make the website more suitable for the indexing principles of search engines.
SEO is divided into in station optimization and out of station optimization
- Station optimization refers to the adjustment of all websites that the webmaster can control, such as website structure and page HTML code
- Off site optimization refers to the construction of external links and the participation and interaction of industry communities. These activities are not carried out on the website itself
SEO principle
- Page capture: the spider requests a page from the server to obtain the page content
- Analysis Warehousing: analyze the obtained content and include high-quality pages
- Search sorting: when users search keywords, they sort them according to certain rules from the included pages and return the results to users
Front end SEO code specification – TKD specification
TDK is an abbreviation, page title, page keyword and page description
title Setting Rules:
<title>Page title must contain</title>
- Generally no more than 80 characters
- Words shall be separated by "-" in English
- It is generally "website name main keyword or a description with main keyword", such as "loan", website name Chengdu loan company Chengdu personal loan Chengdu mortgage Chengdu microfinance Chengdu credit loan "
keywords setting rules:
<meta name="keywords" content="Keyword 1,Keyword 2,Keyword 3″>
- Words shall be separated by English "," and "
- The writing method of home page keywords is generally "website name, main column name and main keywords", generally no more than 5
- The writing method of column page keywords is generally "column name, column keyword and column classification list name", which generally does not exceed 3
- The writing method of keywords on the details page is generally about the key words mainly described on the details page. Generally, there are no more than 3 keywords
description setting rules:
<meta name="description" content=""A brief description of your web page">
- Generally, the title of the page, keywords and the content of some special columns are integrated, and Ctrip is briefly introduced
- The number of words generally does not exceed 150 characters
- English symbols are generally used for the spacing between words
Keyword density
The keyword density of a page or a piece of soft text should be between 2% - 8%
Formula: the number of words of the keyword * the number of times the keyword appears / the total number of words in soft text or the total number of words on the page. If the calculated value is between 2% - 8%, it conforms to the keyword density rule
HTML tag list
Root element
| Element | Description |
|---|---|
| <html> | Represents the root of an HTML or XHTML document. All other elements must be children of this element. |
document metadata
| Element | Description |
|---|---|
| <head> | Represents a collection of metadata about a document, including links or content for scripts or style sheets. |
| <title> | Defines the title of the document, which will be displayed on the title bar or tab of the browser. The element can only contain text, and the label contained will not be interpreted. |
| <base> | Defines the base URL of the relative URL on the page. |
| <link> | Used to link external resources to this document. |
| <meta> | Define metadata that cannot be described by other HTML elements. |
| <style> | For inline CSS. |
script
| Element | Description |
|---|---|
| <script> | Define an inline script or link to an external script. The scripting language is JavaScript. |
| <noscript> | Defines alternate text to display when the browser does not support scripts. |
chapter
| Element | Description |
|---|---|
| <body> | Represents the content of an HTML document. There can only be one element in a document. |
| <section> | This element adds a chapter in the definition document in HTML5. |
| <nav> | This element is defined in HTML5 as a chapter that contains only navigation links. |
| <article> | This element is added to HTML5 to define a complete independent content block that can be independent of the rest of the content. |
| <aside> | This element adds content with low relevance to the page content in HTML5 - if deleted, the remaining content is still reasonable. |
| <h1>,<h2>,<h3>,<h4>,<h5>,<h6> | The title element implements six levels of document titles, < H1 > is the largest title and < H6 > is the smallest title. The title element briefly describes the topic of the chapter. |
| <header> | This element is added to HTML5 to define the header of a page or chapter. It often contains logo s, page titles, and navigational directories. |
| <footer> | This element is added to HTML5 to define the end of a page or chapter. It often contains copyright information, links to legal information, and addresses for feedback and suggestions. |
| <address> | Define a section that contains contact information. |
| <main> | This element is added to HTML5 to define the main or important content in the document. |
Organizational content
| Element | Description |
|---|---|
| <p> | Define a paragraph. |
| <hr> | Represents a separator between paragraphs in a chapter, article, or other long content. |
| <pre> | The content of the representative has been pre typeset, and the format should be retained. |
| <blockquote> | Represents content quoted from other sources. |
| <ol> | Define a sequence table. |
| <ul> | Define an unordered list. |
| <li> | Defines a list item in the list. |
| <dl> | Define a list of definitions (a series of terms and their definitions). |
| <dt> | Represents a term defined by the next < DD >. |
| <dd> | Represents the definition of terms that appear before it. |
| <figure> | This element is added in HTML5 to represent a legend related to the document. |
| <figcaption> | This element adds a description representing a legend in HTML5. |
| <div> | It represents a general container and has no special meaning. |
Text form
| Element | Description |
|---|---|
| <a> | Represents a hyperlink that links to other resources. |
| <em> | Stands for accent. |
| <strong> | The representative is particularly important. |
| <small> | Representative comments, such as disclaimers, copyright notices, etc., are not important for understanding the document. |
| <s> | Represents inaccurate or irrelevant content. |
| <cite> | Represents the title of the work. |
| <q> | Represents an inline reference. |
| <dfn> | Represents the definition of a term contained in its nearest ancestor content. |
| <abbr> | Represents ellipsis or abbreviation, and its complete content is in the title attribute. |
| <data> | This element adds a machine-readable equivalent associated with a content in HTML5 (this element is only in the WHATWG version of the HTML standard, not in the W3C version of the HTML5 standard). |
| <time> | This element adds values representing date and time in HTML5; The machine-readable equivalent is specified by the datetime attribute. |
| <code> | Represents computer code. |
| <var> | Represents a variable in the code. |
| <samp> | Represents the output of a program or computer. |
| <kbd> | Represents user input, generally output from the keyboard, but can also represent other inputs, such as voice input. |
| <sub>,<sup> | Represents subscript and superscript respectively. |
| <i> | It represents a text of different nature, such as technical terms, foreign phrases, etc. |
| <b> | Represents a text that needs attention. |
| <u> | Represents a text note that needs to be underlined, such as marking misspelled text, etc. |
| <mark> | This element is added to HTML5 to represent a reference that needs to be highlighted. |
| <ruby> | This element is added to HTML5 to represent the text marked by ruby annotations, such as Chinese characters and its Pinyin. |
| <rt> | This element adds comments representing ruby in HTML5, such as Chinese pinyin. |
| <rp> | This element adds additional insert text representing both sides of ruby annotations in HTML5 to provide friendly annotation display in browsers that do not support Ruby annotation display. |
| <bdi> | This element adds a piece of text in HTML5 that represents the need to deviate from the text direction of the parent element. It allows you to embed a piece of text in a different or unknown text direction format. |
| <bdo> | Specifies the text direction of the child element, explicitly overriding the default text direction. |
| <span> | Represents a text with no special meaning. This element can be used when other semantic elements are not suitable for the text. |
| <br> | Represents line feed. |
| <wbr> | This element is added in HTML5 to represent a word break opportunity. When the text is too long and needs a line break, a line break will be added here. |
edit
| Element | Description |
|---|---|
| <ins> | Define what is added to the document. |
| <del> | Defines what is removed from the document. |
Embedded content
| Element | Description |
|---|---|
| <img> | Represents a picture. |
| <iframe> | Represents an inline framework. |
| <embed> | This element is added to HTML5 to represent an embedded external resource, such as an application or interactive content. |
| <object> | Represents an external resource, such as a picture, HTML subdocument, plug-in, etc. |
| <param> | Represents the parameters of the plug-in specified by the < Object > element. |
| <video> | This element is added to HTML5 to represent a video and its video files and subtitles, and provides a user interface for playing video. |
| <audio> | This element is added to HTML5 to represent a sound, or audio stream. |
| <source> | This element is added as < video > or < audio > in HTML5 |
| <track> | This element is added to HTML5 to specify text tracks (subtitles) for media elements such as < video > or < audio >. |
| <canvas> | This element is added to HTML5 to represent the bitmap area, which can present graphics in real time through scripts, such as charts, game drawings, etc. |
| < Map > and < area > | Elements together define the image mapping area. |
| < area > and < Map > | Elements together define the image mapping area. |
| <svg> | This element is added to HTML5 to define an embedded vector graph. |
| <math> | This element is added to HTML5 to define a mathematical formula. |
form
| Element | Description |
|---|---|
| <table> | Define multidimensional data. |
| <caption> | Represents the title of the table. |
| <colgroup> | Represents a set of single or multiple columns in a table. |
| <col> | Represents a column in a table. |
| <tbody> | Represents a specific piece of data in the table (table body). |
| <thead> | Represents a column label (header) in the table. |
| <tfoot> | Represents a column summary (footer) in a table. |
| <tr> | Represents a row in a table. |
| <td> | Represents a cell in a table. |
| <th> | Represents the header cell in the table. |
form
| Element | Description |
|---|---|
| <form> | Represents a form composed of controls. |
| <fieldset> | Represents a control group. |
| <legend> | Represents the title of the < fieldset > control group. |
| <label> | Represents the title of the form control. |
| <input> | Represents the data area (text box, radio box, check box, etc.) that allows users to edit data. |
| <button> | Represents a button. |
| <select> | Represents a drop-down box. |
| <datalist> | This element is added to HTML5 to represent a set of predefined options provided to other controls. |
| <optgroup> | Represents an option group. |
| <option> | Represents an option in a < Select > element or < datalist > element |
| <textarea> | Represents a multiline text box. |
| <keygen> | This element is added in HTML5 to represent a key pair generator control. |
| <output> | This element is added to HTML5 to represent the calculated value. |
| <progress> | This element is added to HTML5 to represent the progress bar. |
| <meter> | This element is added to HTML5 to represent the slider. |
Interactive element
| Element | Description |
|---|---|
| <details> | This element is added to HTML5 to represent a widget that users can (click) get additional information or controls. |
| <summary> | This element adds a summary or title representing the < details > element in HTML5. |
| <menuitem> | This element is added to HTML5 to represent a menu item that users can click on. |
| <menu> | This element adds a representative menu in HTML5. |
Use of HTML tags
- h1
- Applicable to website logo,First hyperlink, category name, product title name of website navigation - It cannot contain html label - The entire page has one and only one - It should be noted that no matter what page, h1 The tag can only appear once. It is the main title of the current page with the highest weight, So use it with caution . - In general, if there are keywords, it is best to h1 Inside
- h2
- Applicable to classification page, content page title link, list name, - It doesn't contain html label - There can be more than one
- h3
- For subdivision page title links tag Page and related product content;
- h4~h6
- Less use, recommended p replace
- ul
- Unordered list - Hierarchy: ul-li-a-span|strong|small
- ol
- Ordered list - Hierarchy: ol-li-a-span|strong|small
- dl
- Description applicable to a small area - dl dt dd - dt For the title, dd For content - Multiline content can be dd It contains multiple p，You can also juxtapose multiple dd
- a
- Must write title， - href="link"，If nothing is done href="javascript:;"， - Decide whether to write according to the business target="_blank" 1) Page Jump <a href="URL">Another website</a> 2) Jump to specified ID Location <a href="#top"></a> 3) Download File: <a href="URL" download="xxx.pdf">download</a> 4) send emails: <a href="mailto:xxxxx@qq.com">send emails</a> 5) phone: <a href="tel: 13111111111">dial</a> 6) send message: <a href="sms: 13111111111">dial</a>
- img
- Must write alt， - Suggest writing title， - To consider onerror,onload,Lazy loading, - If the picture is just for style, use css of background replace img label
- button
- Variable element - no need input type="button"，And use<button type="button">Submit</button>
- strong/b
- strong: It means very important,The default style of the browser is bold, and the search engine will know that this is the content to be emphasized, and the style is bold; This can make the document more useful, or it can be recognized by the screen reader and sent out in different tones - b: It has the same BOLD effect, but only the style
- em/i
- Express emphasis,The default style of the browser is italic, and the search engine will know that it is italic in style; It can make the document more interesting to read,It can also be recognized by the screen reader,And in different tones - i:It has the same italics effect, but only the style
- form
- Error getting form element, Multi use form replace div
- iframe
- Use as little as possible iframe - Can be used to load slower content, such as advertisements - The browser will iframe Security control of content in - Scripts can be downloaded in parallel - even if iframe Empty content also consumes loading time - Prevents the page from loading - No semantics
- Abbreviation abbr
- abbr The most important thing should be to add one title Property to describe the abbreviation - <abbr title="Web Developer" >WD</abbr>
- Large segment reference: < blockquote >, general reference: < cite >
<blockquote>
I've always wanted to write such an article to share how to create a more accessible page. There is one in today's plan HTML Tag and WCAG Combine standards. I recommend that you write your HTML，Make someone's life easier.
</blockquote>
<p>some A What impressed me most was,<cite>"Be loving. Don't use the roaring body to all kinds of people</cite>. </p>
- Delete: < del >
- Emphasize that something is deleted,That is to use <del> label <del>HTML Please use <b> label</del> HTML Please use <strong> label
- Table: < Table >
<table summary="sofish's blog status">
<thead>
<tr>
<th>DATE</th>
<th>IP</th>
<th>PV</th>
</tr>
</thead>
<tbody>
<tr>
<td>2011.3.11</td>
<td>3000</td>
<td>8000</td>
</tr>
</tbody>
</table>
- Format fragment < code > / < pre >
- <code> Means computer code text, and <pre> Means preformatted text. <pre> The scope of is broader and block elements, which may be used to format various texts, especially code. There is no need to pay special attention to the use. It is mainly the correct use of semantics, such as not using <pre> To replace the general <p>
<code>text-align:center</code>
<pre>
{ ( 1 * 102 ) + ( 9 * 101 ) + ( 3 * 100 ) }
</pre>
- No semantic tag: < div > / < span >
The recommended usage is to try to use other containers as page frames, such as layout and adding additional visual effects, rather than paragraphs
<div id="container">
<div id="content">
</div>
<div id="sidebar">
<ul>
<li><span>God</span>, oh my zsh</span></li>
</ul>
</div>
</div>
- address
Indicates that the HTML in it provides the contact information of a person or an organization (etc.). It can be any necessary contact information, such as real address, URL, email, phone number, social media account, geographic coordinates, etc. this element should contain the name of the person, group or organization corresponding to the contact information.
<address>
<a href="mailto:jim@rock.com">jim@rock.com</a><br>
<a href="tel:+13115552368">(311) 555-2368</a>
</address>
- p
- Use with caution p Labels and with content Name the word id and class，Spiders can grab p Labels and content The content inside, and if the content inside is not suitable for spiders to grab, spiders will treat this text content as a brief introduction or text of the web page - Under what circumstances p Labels and content And?Only the content you want the spider to grab uses such labels and tags id,class Named word - In a place that is not a paragraph p Labels should be used div replace
label
- Self closing label without closing (for example: img input br hr, etc.);
- Optional closing tag, which needs to be closed (for example: < / Li > or);
- Minimize the number of labels;
<img src="https://atts.w3cschool.cn/attachments/image/cimg/google.png" alt="Google"> <input type="text" name="title"> <ul> <li>Style</li> <li>Guide</li> </ul> <!-- Not recommended --> <span class="avatar"> <img src="..."> </span> <!-- Recommended --> <img class="avatar" src="...">
Class and ID
- class should be named after function or content, not expression;
- class and id words are lowercase. When multiple words are composed, use the middle dash - or_ division;
- Use the unique id as the Javascript hook, and avoid creating class es without style information;
<!-- Not recommended --> <div class="j-hook left contentWrapper"></div> <!-- Recommended --> <div id="j-hook" class="sidebar content-wrapper"></div>
Attribute order
- id
- class
- name
- data-xxx
- src, for, type, href
- title, alt
- aria-xxx, role
<a id="..." class="..." data-modal="toggle" href="###"></a> <input class="form-control" type="text"> <img src="..." alt="...">
Quotation marks
Attribute, using double quotation marks.
<!-- Not recommended --> <span id='j-hook' class=text>Google</span> <!-- Recommended --> <span id="j-hook" class="text">Google</span>
nesting
A does not allow nested div. this constraint is a semantic nested constraint, which is different from strict nested constraints. For example, a does not allow nested a.
Strict nesting constraints are not allowed in all browsers; With semantic nesting constraints, most browsers will handle fault tolerance, and the generated document trees may be different from each other.
Semantic nesting constraint
<li> be used for <ul> or <ol> Lower; <dd>, <dt> be used for <dl> Lower; <thead>, <tbody>, <tfoot>, <tr>, <td> be used for <table> Lower;
Strictly nested constraints
inline-Level Element, which can contain only text or other inline-Level element; <a>Interactive elements cannot be nested in a<a>,<button>,<select>etc.; <p>Block level elements cannot be nested in a<div>,<h1>~<h6>,<p>,<ul>/<ol>/<li>,<dl>/<dt>/<dd>,<form>Wait.
Boolean attribute
In the HTML5 specification, there is no need to set values for the disabled, checked, selected and other attributes.
<input type="text" disabled> <input type="checkbox" value="1" checked> <select> <option value="1" selected>1</option> </select>
HEAD
Document type
Add a standard mode declaration to the first line of each HTML page to ensure consistent performance in each browser.
<!DOCTYPE html>
language property
<!-- chinese --> <html lang="zh-Hans"> <!-- Simplified Chinese --> <html lang="zh-cmn-Hans"> <!-- Traditional Chinese --> <html lang="zh-cmn-Hant"> <!-- English --> <html lang="en">
Character encoding
The meta of the specified character encoding must be the first direct child element of the head;
<html>
<head>
<meta charset="utf-8">
......
</head>
<body>
......
</body>
</html>
IE compatibility mode
The latest version of IE and Chrome kernel is preferred
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
SEO optimization
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- SEO -->
<title>Style Guide</title>
<meta name="keywords" content="your keywords">
<meta name="description" content="your description">
<meta name="author" content="author,email address">
</head>
viewport
- viewport: generally refers to the size of the content area of the browser window, excluding toolbar, tab and other contents;
- Width: Browser width, the width of the visible area of the page in the output device;
- Device width: device resolution width, the visible width of the output device screen;
- Initial scale: initial scale;
- Maximum scale: maximum scale;
Optimized for mobile devices, set the width and initial scaling of the visible area.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
iOS Icon
- Apple touch icon images are automatically processed into rounded corners and highlights;
- Apple touch icon precomposed prohibits the system from automatically adding effects and directly displays the original design drawing;
<!-- iPhone and iTouch，Default 57 x57 Pixel, must have --> <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"> <!-- iPad，72x72 Pixels, no, but recommended --> <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-72x72-precomposed.png" sizes="72x72"> <!-- Retina iPhone and Retina iTouch，114x114 Pixels, no, but recommended --> <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-114x114-precomposed.png" sizes="114x114"> <!-- Retina iPad，144x144 Pixels, no, but recommended --> <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-144x144-precomposed.png" sizes="144x144">
favicon
When favicon is not specified, most browsers will request favicon. In the Web Server root directory ico . In order to ensure that favicon is accessible and avoid 404, one of the following two methods must be followed:
- Place favicon. In the Web Server root directory ICO file;
- Use link to specify favicon;
<link rel="shortcut icon" href="path/to/favicon.ico">
HEAD template
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Style Guide</title>
<meta name="description" content="No more than 150 characters">
<meta name="keywords" content="">
<meta name="author" content="name, email@gmail.com">
<!-- Add for mobile device viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- iOS Icon -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png">
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />
<link rel="shortcut icon" href="path/to/favicon.ico">
</head>