DONATE  
MENU
AJAX
JSON
HTML
JAVASCRIPT

HTML Tutorials

INTRODUCTION

» Introduction to HTML

» PRACTICE IT Editor

» Getting Started

» HTML Example

» HTML Tags

» HTML Elements

» Nesting Tags

» Block & Inline Elements

» HTML Attributes

» HTML Comments

» File Paths

» HTML Entities & Symbols

TAGS/ELEMENTS

» Important Tags

» HTML Headings

» Text Formatting

» HTML Links

» HTML Lists

» HTML Tables

» HTML Images

» HTML Audios

» HTML Videos

» HTML Iframes

» HTML Styles

» HTML Scripts

» Semantic Elements

» HTML Metadata

ATTRIBUTES

» Elements' ID

» Elements' Class

» Elements' Style

» Element's Align

» Element's Height & Width

HTML FORMS

» HTML Forms

» Input Elements

» HTML Textarea

» HTML Select

HTML EXAMPLE

» Login Page

.. » HTML » Tags/elements » HTML Metadata
Share Tweet WhatsApp

HTML Metadata

An HTML metadata help us pass more information about our webpage. Some of these information help in, 1. Interpreting our webpage properly. 2. Helping search engines understand and crawl our webpage properly. 3. Give more information about our webpage. 4. And a lot others. HTML meta tags are define in the head element of a webpage. This is because meta tags don't necessarily display any contents on the page but rather, give browsers and search engines information about the webpage. In this page, we shall have a look at some very important meta tags that should be included in your webpages or website. Syntax
<meta name='name' content='content/value'/>
Viewport The viewport meta is the first step towards building responsive webpages that fits into any device. The inclusion of the viewport meta ensures our webpage fits into any device's browser width be it mobile or desktop devices.
<meta name='viewport' content='width=device-width; initial-scale=1'/>
See the effect and importance of having the viewport meta in your webpage below, Without meta (viewport) - the webpage didn't fit into the device's browser
Without meta (viewport) - the webpage didn't fit into the device's browser
With meta (viewport) - the webpage fits into the device's browser
With meta (viewport) - the webpage fits into the device's browser
Author The author meta gives information as regard the author of a webpage.
<meta name='author' content='Joseph Omamode'/>
Keywords The keywords meta gives information as regard the keywords contained in an HTML webpage. This help search engines to know if your webpage contains what an individual is searching for.
<meta name='keywords' content='HTML, HTML tutorials, meta tags, all meta tags'/>
Description The description meta gives a description as regard the content of your webpage.
<meta name='description' content='Learn all the important HTML meta tags you need on your webpage for betted responsiveness and search engine optimization'/>
og:image og stands for OpenGraph. The og:image meta is basically used in specifying an image to use when your webpage URL is shared on social networking sites such as Facebook, Twitter, WhatsApp and a lot others. In the absence of this meta tag, such social networking sites will simply use the first image element on your webpage.
<meta name="og:image" content="http://stackbeginner.com/mysoc/social_image.png"/>
OTHERS:
<meta name="keywords" content="your, tags"/>
<meta name="description" content="150 words"/>
<meta name="subject" content="your website's subject">
<meta name="copyright"content="company name">
<meta name="language" content="ES">
<meta name="robots" content="index,follow" />
<meta name="revised" content="Sunday, July 18th, 2010, 5:15 pm" />
<meta name="abstract" content="">
<meta name="topic" content="">
<meta name="summary" content="">
<meta name="Classification" content="Business">
<meta name="author" content="name, email@hotmail.com">
<meta name="designer" content="">
<meta name="copyright" content="">
<meta name="reply-to" content="email@gmail.com">
<meta name="owner" content="">
<meta name="url" content="http://www.websiteaddrress.com">
<meta name="identifier-URL" content="http://www.websiteaddress.com">
<meta name="directory" content="submission">
<meta name="category" content="">
<meta name="coverage" content="Worldwide">
<meta name="distribution" content="Global">
<meta name="rating" content="General">
<meta name="revisit-after" content="7 days">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta name="og:title" content="The Rock"/>
<meta name="og:type" content="movie"/>
<meta name="og:url" content="http://www.imdb.com/title/tt0117500/"/>
<meta name="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta name="og:site_name" content="IMDb"/>
<meta name="og:description" content="A group of U.S. Marines, under command of..."/>
<meta name="fb:page_id" content="43929265776" />
<meta name="og:email" content="me@example.com"/>
<meta name="og:phone_number" content="650-123-4567"/>
<meta name="og:fax_number" content="+1-415-123-4567"/>
<meta name="og:latitude" content="37.416343"/>
<meta name="og:longitude" content="-122.153013"/>
<meta name="og:street-address" content="1601 S California Ave"/>
<meta name="og:locality" content="Palo Alto"/>
<meta name="og:region" content="CA"/>
<meta name="og:postal-code" content="94304"/>
<meta name="og:country-name" content="USA"/>
<meta property="og:type" content="game.achievement"/>
<meta property="og:points" content="POINTS_FOR_ACHIEVEMENT"/>
<meta property="og:video" content="http://example.com/awesome.swf" />
<meta property="og:video:height" content="640" />
<meta property="og:video:width" content="385" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video" content="http://example.com/html5.mp4" />
<meta property="og:video:type" content="video/mp4" />
<meta property="og:video" content="http://example.com/fallback.vid" />
<meta property="og:video:type" content="text/html" />
<meta property="og:audio" content="http://example.com/amazing.mp3" />
<meta property="og:audio:title" content="Amazing Song" />
<meta property="og:audio:artist" content="Amazing Band" />
<meta property="og:audio:album" content="Amazing Album" />
<meta property="og:audio:type" content="application/mp3" />
SUMMARY
  1. HTML metadata help us pass more information about our webpage.
  2. HTML meta tags should be define in the head element of a webpage. This is because meta tags don't necessarily display any contents on the page but rather, give browsers and search engines information about the webpage.
  3. An inclusion of the viewport meta ensures our webpage fits into any device's browser width be it mobile or desktop devices.
  4. There are a lot other useful meta tags.
Take a short quiz on HTML Metadata.
Ask a question or tell us if HTML Metadata is easy or not.
cent?

Join our 1,090 subscribers to receive tutorials' updates!

  We won't spam your mail box. We hate it.





StackBeginner 2021 © Joseph Omamode