- Open a text editing program, such as Notepad.
- Log in to the Web hosting account provided to you by your hosting provider.
- In the text editor, open the Web page you want to add the meta tags to.
- In the
portion of the file, insert the meta content. Here is an example of proper meta tag placement for a real estate website:
<html> <head> <title>Premier East Valley Realty - Homes for Sale</title> <meta name="description" content="Premier East Valley Realty specializing in luxury real estate. We are your location specialists."> <meta name="keywords" content="Real Estate, Agent,Realtor, Buy, Home, Sell, Homes, Sale, Broker, Commercial, invest, investing, investor"> </head>
- Save the file.
- Upload the Web page to the server.
Note: Visit your website to verify the meta content uploaded correctly. Navigate to the page you updated, right-click on the page, and then select View Page Source in Firefox®, or View Page in Internet Explorer®. If placed properly, the meta content displays in the
portion of the code.
Describe Metadata within an HTML Document:
<meta name=”description” content=”WESHOUTLOUD Multi-Content Blog”>
<meta name=”author” content=”Prasanna Kumar.CH”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
Metadata is data (information) about data.
The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.
Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.
The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.
HTML5 introduced a method to let web designers take control over the viewport (the user’s visible area of a web page), through the <meta> tag (See “Setting The Viewport” example below).
Tips and Notes
Note: <meta> tags always go inside the <head> element.
Note: The content attribute MUST be defined if the name or the http-equiv attribute is defined. If none of these are defined, the content attribute CANNOT be defined.
Setting The Viewport
HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag.
The viewport is the user’s visible area of a web page. It varies with the device, and will be smaller on a mobile phone than on a computer screen.
You should include the following <meta> viewport element in all your web pages:
A <meta> viewport element gives the browser instructions on how to control the page’s dimensions and scaling.
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
Differences Between HTML 4.01 and HTML5
The scheme attribute is not supported in HTML5.
HTML5 has a new attribute, charset, which makes it easier to define charset:
- HTML 4.01: <meta http-equiv=”content-type” content=”text/html; charset=UTF-8″>
- HTML5: <meta charset=”UTF-8″>
Differences Between HTML and XHTML
In HTML the <meta> tag has no end tag.
In XHTML the <meta> tag must be properly closed.
Example 1 – Define keywords for search engines:
Example 2 – Define a description of your web page:
Example 3 – Define the author of a page:
Example 4 – Refresh document every 30 seconds:
Example 5 – Setting the viewport to make your website look good on all devices: