04.txt

// Metadata cheat sheet

// HTML <meta> tags 
Earlier in the course, you learned about meta tags and how you can leverage them to convey information to search engines to 
better categorize your pages. We recommend that you keep this cheat sheet handy when building your web applications. The 
structure of a meta tag is as follows.

1. Name 
The name of the property can be anything you like, although browsers usually expect a value they understand and can take an 
action upon. An example would be <meta name="author" content="name"> to state the author of the page. 

2. Content 
The content field specifies the property's value. For example, you can use <meta name="language" content="english">, to specify 
the language of the webpage to search engines. 

3. Charset 
The charset is a special field that lets you specify the character encoding used for the page so that the browser can display it 
properly. The most frequently used is utf-8, and you would add it to your HTML header as follows: <meta charset="UTF-8">  

4. HTTP-equiv 
This field stands for HTTP equivalent, and it’s used to simulate HTTP response headers. This is rare to see, and it’s recommended 
to use HTTP headers over HTML http-equiv meta tags. For example, the next tag would instruct the browser to refresh the page 
every 30 minutes: <meta http-equiv="refresh" content="30"> 


// Basic meta tags (meta tags For SEO) 

1. <meta name="description"/> provides a brief description of the web page 
2. <meta name=”title”/> specifies the title of the web page 
3. <meta name="author" content="name"> specifies the author of the web page  
4. <meta name="language" content="english"> specifies the language of the web page 
5. <meta name="robots" content="index,follow" /> tells search engines how to crawl or index a certain page 
6. <meta name="google"/> tells Google not to show the sitelinks search box for your page when showing search results 
7. <meta name="googlebot" content=”notranslate” /> tells Google you don’t want to provide an automatic translation for your 
   page if the user uses a different language  
8. <meta name="revised" content="Sunday, July 18th, 2010, 5:15 pm" /> specifies the last modified date and time on which you 
   have made certain changes 
9. <meta name="rating" content="safe for kids"> specifies the expected audience for your page 
10. <meta name="copyright" content="Copyright 2022"> specifies a Copyright 


// <meta http-equiv="..."/> tags

1. <meta http-equiv="content-type" content="text/html"> specifies the format of the document returned by the server 
2. <meta http-equiv="default-style"/>  specifies the format of the styling document 
3. <meta http-equiv="refresh"/> specifies the duration of the page before it’s considered stale 
4. <meta http-equiv=”Content-language”/> specifies the language of the page 
5. <meta http-equiv="Cache-Control" content="no-cache"> instructs the browser how to cache your page 

// Responsive design/mobile meta tags 

1. <meta name="format-detection" content="telephone=yes"/> indicates that telephone numbers should appear as hypertext links 
   that can be clicked to make a phone call 
2. <meta name="HandheldFriendly" content="true"/> specifies that the page can be properly visualized on mobile devices 
3. <meta name="viewport" content="width=device-width, initial-scale=1.0"/> specifies the area of the window in which web content 
   can be seen