Master HTML Meta Tags: Attributes, Usage, and Mobile Optimization

Optional Attributes

http-equiv : values such as content-type, expire, refresh, set-cookie; links the content to HTTP headers.

name : values like author, description, keywords, generator, revised, etc.; associates content with a named piece of metadata.

scheme : a custom text defining the format used to interpret the content value.

Required Attribute

content : the actual meta information text that corresponds to either http-equiv or name.

Common name Examples

<!-- Page author -->
<meta name="author" content="author name"/>

<!-- Page description (max 150 characters) -->
<meta name="description" content="Brief description of the page"/>

<!-- Keywords -->
<meta name="keywords" content="meta tags, HTML, SEO"/>

<!-- Generator -->
<meta name="generator" content="hexo"/>

<!-- Revision info -->
<meta name="revised" content="story,2015/07/22"/>

<!-- Copyright -->
<meta name="copyright" content="All Rights Reserved"/>

<!-- Robots control -->
<meta name="robots" content="index,follow"/>

http-equiv Examples

<!-- Character encoding -->
<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>

<!-- Page expiration time -->
<meta http-equiv="expire" content="Wed,22Jul2015 11:11:11 GMT"/>

<!-- Immediate refresh and redirect -->
<meta http-equiv="refresh" content="0;URL=''"/>

<!-- Set cookie -->
<meta http-equiv="set-cookie" content="cookie value=xxx;expires=Wed,22-Jul-2015 11:11:11 GMT;path=/"/>

<!-- Script type -->
<meta http-equiv="Content-Script-Type" content="text/javascript">

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

Mobile‑Specific Meta Tags

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

<!-- Force portrait orientation on UC and QQ browsers -->
<meta name="screen-orientation" content="portrait">
<meta name="x5-orientation" content="portrait">

<!-- Full‑screen mode -->
<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">

<!-- iOS web app settings -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Title">
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

<!-- Disable automatic detection of phone numbers, emails, and addresses -->
<meta name="format-detection" content="telephone=no,email=no,adress=no">

These meta tags enable developers to control page metadata, HTTP header behavior, and mobile rendering characteristics directly from HTML.