Meta Tags you need that are useful for your site 2023
Learn about the most useful and up-to-date meta tags to provide search engines with information about your web page.
Meta tags provide search engines with information (metadata) about a web page. They can specify the content type, description of the page, and other metadata that are not displayed on the page. There are also other useful HTML tags that don’t contain the word <meta> within them.
There is a great number of meta tags. For instance, there is the keywords meta tag — but Google doesn’t use it in web ranking, so there is no practical use to put it on your page. This article covers only the most useful and relevant meta tags.
Basic Tags
It’s highly recommended to include in the <head> element of every page the content type meta tag and the viewport meta tag.
Content Type Tag
The content type tag is used for defining a content type of a page and the character set (encoding) it uses. This meta tag specifies that your page is an HTML page that uses UTF-8 (Unicode) as a character set:
HTML CODE </>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>This meta tag must come first in the <head> element to ensure proper rendering of your page. You should always use the UTF-8 encoding.
Viewport Tag
The viewport is the user’s visible area of a web page. It varies with the device and is smaller on a mobile phone, larger on a tablet, and even larger on a computer screen. Use the viewport meta tag to make your website look good on all devices.
You should include the following viewport tag in all your web pages:
HTML CODE </>
<meta name="viewport" content="width=device-width, initial-scale=1.0">This tag 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
- The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser
- The shrink-to-fit=no part reduces the page size to the size of the browser’s window. Safari will automatically zoom or shrink the page’s content to fit automatically unless “shrink-to-fit=no” is specified
- Although it’s not recommended, you can also add minimum-scale=1.0, user-scalable=no if for some reason you don’t want users to be able to zoom the content of your page
SEO Tags
The most used tags for anyone carrying out SEO work are the title tag, description meta tag, and robots meta tag.
Title Tag
The title tag is used to specify the name of the page or what the web page is about. This tag is displayed in the browser tab and is used by search engines to generate the results we see in the SERPs (Search Engine Results Pages):
Here is an example code snippet for the title tag:
HTML CODE </>
<title>shift media : everything about HTML & CSS coding</title>Description Tag
The meta description tag tells search engines and users in the SERPs what your web page content is about:
An example code snippet for meta description tag:
HTML CODE </>
<meta name="description" content="Guides and tips on using HTML, CSS, jQuery, and JavaScript for web development">Robots Meta Tag
Robots meta tag helps search engine crawlers index web pages, follow links, and more. Below are examples of robots meta tags and what they ask the crawlers to do.
To tell crawlers not to index the page and not to follow any of the links listed on the page:
HTML CODE </>
<meta name="robots" content="noindex, nofollow">To do the other way around — to tell crawlers to index the page and to follow all links on the page:
HTML CODE </>
<meta name="robots" content="index, follow">You can also tell crawlers to index the page but not to follow links, or not to index the page but follow links:
HTML CODE </>
<meta name="robots" content="index, nofollow">
<meta name="robots" content="noindex, nofollow">To tell crawlers not to index images on your web page, use noimageindex:
HTML CODE </>
<meta name="robots" content="noimageindex">To tell crawlers not to include a cached version, use noarchive:
HTML CODE </>
<meta name="robots" content="noarchive">Social Media Tags
To take control over how your content’s preview looks like when you share it to Facebook or Twitter, use Open Graph (OG) and Twitter card meta tags. They help configure your social shares including URL, title, image, and description, regardless of how users share your content — as a URL or via sharing buttons.
Open Graph (OG) Meta Tags for Sharing to Facebook
Use OG meta tags to ensure your content looks great when it’s shared to Facebook. OG tags’ metadata is passed as property/content pairs, with a property value being formatted as “og:tag-name”.
Basic metadata include the URL, title, content type, image, website’s name, description, and sometimes location parameters. Here is an example of the OG group of meta tags:
HTML CODE </>
<meta property="og:url" content="https://shiftmedia.com/html/meta" />
<meta property="og:title" content="Meta Tags and Other Useful HTML Tags" />
<meta property="og:type" content="article">
<meta property="og:image" content="https://shiftmedia.com/public/img/content/tags_main.jpeg" />
<meta property="og:site_name" content="Shift Media" />
<meta property="og:description " content="Learn the most useful and up-to-date meta tags to provide search engines with information about your web page" />
<meta property="og:locale" content="en_US" />
<meta property="og:locale:alternate" content="en_GB" />Let’s look at each OG tag in more details below.
URL of the page will be used to identify the share and aggregate the community shares and likes:
HTML CODE </>
<meta property="og:url" content="https://shiftmedia.com/html/meta" />The title is the title of your article:
HTML CODE </>
<meta property="og:title" content="Meta Tags and Other Useful HTML Tags" />The type of the page is what you are describing. There are several types of content: article, book, music.album, music.playlist, music.radio_station, music.song, profile, video.episode, video.movie, video.other, video.tv_show, and website. Here is an example for an article:
HTML CODE </>
<meta property="og:type" content="article" />The image OG tag determines the URL of the image you want to use when the page is shared. This tag is helpful if your page has several images, and you want to use a particular picture. Here is an example:
HTML CODE </>
<meta property="og:image" content="https://shiftmedia.com/public/img/content/tags_main.jpeg" />The site name tag is self-explanatory:
HTML CODE </>
<meta property="og:site_name" content="Shift Media" />The description OG tag, like the basic description tag, tells what your web page content is about:
HTML CODE </>
<meta property="og:description" content="Learn the most useful and up-to-date meta tags to provide search engines with information about your web page" />The location of the information: by default, the locale value is en_US and is not required unless the language is not English or it’s outside the United States. You can also specify the alternate location:
HTML CODE </>
<meta property="og:locale" content="en_US" />
<meta property="og:locale:alternate" content="en_GB" />You can use different sets of OG tags depending on the type of your content (article, image, video, audio).
A full article example:
HTML CODE </>
<meta property="article:published_time" content="2022-05-12 10:00" />
<meta property="article:modified_time" content="2022-09-18 18:00" />
<meta property="article:expiration_time" content="2130-05-12 10:00" />
<meta property="article:author" content="Sift Media" />
<meta property="article:publisher" content="https://www.facebook.com/Sift Media" />
<meta property="article:section" content="HTML" />
<meta property="article:tag" content="tag1, tag2" />
<meta property="article:tag" content="tag3" />A full image example:
HTML CODE </>
<meta property="og:image" content="http://shiftmedia.com/public/img/content/tags_main.jpeg" />
<meta property="og:image:secure_url" content="https://shiftmedia.com/public/img/content/tags_main.jpeg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="800" />A full video example:
HTML CODE </>
<meta property="og:video" content="http://example.com/ogp.swf" />
<meta property="og:video:url" content="http://example.com/ogp.swf" />
<meta property="og:video:secure_url" content="https://secure.example.com/movie.swf" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video:width" content="400" />
<meta property="og:video:height" content="300" />A full audio example:
HTML CODE </>
<meta property="og:audio" content="http://example.com/sound.mp3" />
<meta property="og:audio:secure_url" content="https://secure.example.com/sound.mp3" />
<meta property="og:audio:type" content="audio/mpeg" />You can test your page with the Facebook Sharing Debugger.
Twitter Card Tags for Sharing to Twitter
Twitter card tags look similar to OG tags. There are some differences though. Note that no og: prefix is required for Twitter cards. Also, OG protocol specifies the use of property and content attributes while Twitter cards use name and content. Here is an example:
HTML CODE </>
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@shiftmedia">
<meta name="twitter:creator" content="@Hossam_Fathy">
<meta name="twitter:url" content="https://twitter.com/shiftmedia">
<meta name="twitter:title" content="Meta Tags and Other Useful HTML Tags">
<meta name="twitter:description" content="Learn about the most useful and up-to-date meta tags to provide search engines with information about your web page"> <!-- The description should not be longer than 200 symbols -->
<meta name="twitter:image" content="https://shiftmedia.com/public/img/content/tags_main.jpeg">
You can test your page with the Twitter card validator.
Other Useful Tags
There are plenty of other helpful tags that you can use depending on your situation.
Refresh Tag
The refresh meta tag is used to refresh a document. It’s useful if your page uses dynamic content that changes constantly. In the example below, your page will be automatically refreshed every 30 seconds:
HTML CODE </>
<meta http-equiv="refresh" content="30">To redirect users to another web page, specify the URL:
HTML CODE </>
<meta http-equiv="refresh" content="0; url=https://shiftmedia.com">Hreflang
The Hreflang tag isn’t technically a tag. It’s a useful attribute that tells Google which language your content is using. If you have a site with multiple language versions or a site that serves different territories, you should definitely use Hreflang. It can help search engines rank your content better and ensure that the correct language version is served in the corresponding version of Google.
Here is an example for targeting a web page at English language users in Egypt:
HTML CODE </>
<link rel="alternate" href="http://shiftmedia.com.eg" hreflang="en-eg" />An example of German language content, independent of region:
HTML CODE </>
<link rel="alternate" href="http://shiftmedia.de" hreflang="de" />You can find the full list of meta tags here.