Common Meta Tags Reference

# Common Meta Tags Reference

# The <meta> Element

# Overview

The meta tag provides metadata about an HTML document. Metadata is not displayed on the page but is machine-readable. It can be used by browsers (how to display content or reload the page), search engines (keywords), or other web services.

Required Attributes

Attribute	Value	Description
content	some text	Defines meta information associated with http-equiv or name

Optional Attributes

Attribute	Value	Description
http-equiv	content-type / expire / refresh / set-cookie	Associates the content attribute with an HTTP header.
name	author / description / keywords / generator / revised / others	Associates the content attribute with a name.
content	some text	Defines the format for translating the content attribute value.

Declare encoding

<meta charset='utf-8' />

Prefer the latest version of IE and Chrome

<!-- About X-UA-Compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- Recommended -->

<meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- Use IE6 -->
<meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- Use IE7 -->
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- Use IE8 -->

1
2
3
4
5
6

Browser kernel control: Many domestic browsers are dual-kernel (WebKit and Trident). WebKit provides high-speed browsing while IE kernel ensures compatibility with legacy websites. Adding meta tags lets you control which kernel the browser uses for rendering. Reference (opens new window)

Default to WebKit (Chrome): <meta name="renderer" content="webkit">
Default to IE compatibility mode (IE6/7): <meta name="renderer" content="ie-comp">
Default to IE standards mode (IE9/IE10/IE11/depends on user's IE): <meta name="renderer" content="ie-stand">

1
2
3

Default kernel modes for domestic dual-kernel browsers:

Sogou High-Speed Browser, QQ Browser: IE kernel (compatibility mode)
360 Speed Browser, Maxthon Browser: WebKit kernel (speed mode)

Prevent browsers from accessing cached page content: With this setting, visitors cannot browse offline.

<meta http-equiv="Pragma" content="no-cache">

Windows 8

<meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 tile color -->
<meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 tile icon -->

1
2

Site adaptation: Primarily used for PC-to-mobile page correspondence.

<meta name="mobile-agent"content="format=[wml|xhtml|html5]; url=url">
<!--
[wml|xhtml|html5] Choose one based on the mobile page protocol;
url="url" represents the mobile page URL corresponding to the current PC page. They must have a one-to-one relationship.
 -->

1
2
3
4
5

Transcoding declaration: Opening a page via Baidu may cause transcoding (e.g., injecting ads). Add this meta to prevent transcoding.

<meta http-equiv="Cache-Control" content="no-siteapp" />

# SEO Optimization

Reference (opens new window)

Page keywords: Each page should have a unique set of keywords describing its content. Use descriptive and representative keywords and phrases that people are likely to search for and that accurately describe the information on the page. Tags that are too short may not be considered relevant by search engines. Tags should not exceed 874 characters.

<meta name="keywords" content="your tags" />

Page description: Each page should have a description tag of no more than 150 characters that accurately reflects the page content.

<meta name="description" content="150 words" />

Search engine indexing: robotterms is a comma-separated set of values, typically including: none, noindex, nofollow, all, index, and follow. Ensure correct use of nofollow and noindex values.

<meta name="robots" content="index,follow" />
<!--
    all: File will be indexed and links on the page can be followed;
    none: File will not be indexed and links on the page will not be followed;
    index: File will be indexed;
    follow: Links on the page can be followed;
    noindex: File will not be indexed;
    nofollow: Links on the page will not be followed.
 -->

1
2
3
4
5
6
7
8
9

Page redirect and refresh: The number in content represents the time in seconds before refreshing. Adding a URL causes a redirect (search engines can detect this automatically, and it can easily be seen as deceptive, resulting in penalties).

<meta http-equiv="refresh" content="0;url=" />

Other

<meta name="author" content="author name" /> <!-- Define the page author -->
<meta name="google" content="index,follow" />
<meta name="googlebot" content="index,follow" />
<meta name="verify" content="index,follow" />

1
2
3
4

# Mobile Devices

viewport: Optimizes display on mobile browsers. Do not use initial-scale or disable zooming if the site is not responsive.

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimun-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<!-- Common mobile meta settings -->

1
2

width: Width (number / device-width) (range: 200 to 10,000, default 980px)
height: Height (number / device-height) (range: 223 to 10,000)
initial-scale: Initial zoom ratio (range: >0 to 10)
minimum-scale: Minimum zoom ratio allowed
maximum-scale: Maximum zoom ratio allowed
user-scalable: Whether manual zooming is allowed (no, yes)

Note: Many people add initial-scale=1 to non-responsive sites, which renders the site at 100% width, requiring users to manually pan or zoom. If user-scalable=no or maximum-scale=1 is used together with initial-scale=1, users cannot zoom in/out to see all content.

WebApp full-screen mode: Simulates an app, offline application.

<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- Enable WebApp full-screen mode -->

Theme color

<meta name="theme-color" content="#11a8cd">

Hide status bar / Set status bar color: Only effective when WebApp full-screen mode is enabled. Content value: default | black | black-translucent.

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

Title after adding to home screen

<meta name="apple-mobile-web-app-title" content="Title">

Disable automatic phone number detection

<meta content="telephone=no" name="format-detection" />

Disable email detection

<meta content="email=no" name="format-detection" />

Add Smart App Banner: Tells the browser about the corresponding app for this website and displays a download banner (as shown below). Reference (opens new window)

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

Other Reference (opens new window)

<!-- Optimized for handheld devices, mainly targeting older browsers that don't recognize viewport, such as BlackBerry -->
<meta name="HandheldFriendly" content="true">
<!-- Microsoft's legacy browsers -->
<meta name="MobileOptimized" content="320">
<!-- UC force portrait -->
<meta name="screen-orientation" content="portrait">
<!-- QQ force portrait -->
<meta name="x5-orientation" content="portrait">
<!-- UC force full screen -->
<meta name="full-screen" content="yes">
<!-- QQ force full screen -->
<meta name="x5-fullscreen" content="true">
<!-- UC application mode -->
<meta name="browsermode" content="application">
<!-- QQ application mode -->
<meta name="x5-page-mode" content="app">
<!-- Windows Phone disable tap highlight -->
<meta name="msapplication-tap-highlight" content="no">

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# A Common Mobile Page Meta Setup

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimun-scale=1.0,maximum-scale=1.0,user-scalable=no">