Unknown to many website owners, there are many different types of meta tags a HTML document can include, not just web page Meta Description or the meta tags and attributes that Google supports.
HTML metadata refers to information about a particular web page. These are additional signals web browsers and search engines can analyze.
Metadata information placed within HTML <head> Section is not typically displayed on the web page itself, but is instead, used by browsers, search engines like Google, and other software to understand and process the web page content.
HTML metadata Examples
Below example provide additional information about the web page, like character encoding, authorship, copyright holder details, viewport settings (which is critical in 2024 because Google’s mobile first index approach), and isFamilyFriendly set to TRUE stating that the audience is general and is SafeSearch ready.
<!DOCTYPE HTML>
<head>
<meta charset="UTF-8">
<meta name="author" content="John Doe">
<meta name="copyrightHolder" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="isFamilyFriendly" content="TRUE">
</head>
The <meta> HTML element represents metadata that cannot be represented by other HTML meta-related elements, like <base>, <link>, <script>, <style> or <title>.
What the above statement tells us is: you can use many different meta tags as well as many meta related elements in terms of search engine optimization. Basically, all optimization codes and methods within <head> portion of HTML document can be thought of meta tags for SEO.
In fact, 2024 will force websites to look at optimizing other meta related elements as well. For example: you can optimize loading of scripts using preload or prefetch methods. Accordingly, let’s take a look at what these mean and also find better optimization opportunities.
Video Tutorial Showing How To SEO Meta Tags
Link Tags
Used to link external resources such as stylesheets, icons, or other documents.
<!DOCTYPE HTML>
<head>
<link rel="stylesheet" href="styles.css"">
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
How-to SEO this? Try including important target keywords within the file name itself. For example: stylesheet-for-howto-related-website.css and if every Kilobyte or KB is important due to Page Load times being heavy, then, code the file names s.css as a web developer. NOTE: this is NOT how to optimize the CSS code itself.
canonical Tag
Specifies a canonical URL. Explicitly telling Google about a canonical page in a set of duplicate or similar pages:
<!DOCTYPE HTML>
<head>
<link rel="canonical" href="https://www.example.com">
</head>
How-to SEO this? Try sending noindex directives to parts of a website that has no unique / original content. For example: search results, collection sections can and should send noindex directive.
Script Tags
Include scripts, typically JavaScript, in the page.
<!DOCTYPE HTML>
<head>
<script src="script.js"></script>
</head>
How-to SEO this? Try including important target keywords within the file name itself. For example: script-for-howto-related-website.js and if every Kilobyte or KB is important due to Page Load times being heavy, then, code the file names j.js as a web developer. NOTE: this is NOT how to optimize the JavaScript code itself.
Stylesheet Tags
Link to external CSS files.
<!DOCTYPE HTML>
<head>
<link rel="stylesheet" href="styles.css">
</head>
How-to SEO linked files? Understand that each link within <head> is render blocking. You can identify critical files and group them so that instead of sending concurrent HTTP Requests to the server to download the multiple files, you can perhaps send just 1 HTTP Request to linked file if you were to group them.
For Google Fonts or other linked files you can use other search engine optimization techniques as well as media=”print” and on web page load change to cater for ALL media types to reduce render blocking like so:
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preload" as="style" href="https://fonts.googleapis.com/css?family=Open%20Sans:400,400i,etc.etc.;subset=latin&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open%20Sans:400,400i,etc.etc.&subset=latin&display=swap" media="print" onload="this.media='all'" />
<noscript>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open%20Sans:400,400i,700,700i,900,900i&subset=latin&display=swap" />
</noscript>
preconnect
The preconnect keyword for the rel attribute of the LINK element is a hint to browsers that the user is likely to need resources from the target resource’s origin, and therefore the browser can likely improve the user experience by preemptively initiating a connection to that origin. Preconnecting speeds up future loads from a given origin by preemptively performing part or all of the handshake (DNS+TCP for HTTP, and DNS+TCP+TLS for HTTPS origins).
preload
The preload value for the rel attribute of the LINK element lets you declare fetch requests in the HTML’s HEAD, specifying resources that your page will need very soon, which you want to start loading early in the page render lifecycle, that is, before browsers’ main rendering machinery kicks in. This ensures preloaded assets are available earlier and are less likely to block the page’s render, improving performance. Even though the name contains the term load, it does not load and execute the script but only schedules it to be downloaded and cached with a higher priority compared to other assets.
Did you know that CSS or JS doesn’t necessarily be placed within <head> section? You can place some CSS or even JS code within HTML footer or before closing of HTML body tag making your web pages load better.
Language Tags
Indicate the language of the document, for example: if USA English is used, use lang=”en-us” and if Australian English is used lang=”en-au” since Google is a multilingual search engine and can analyze distinction in grammar of languages.
RankYa SEO Tip: Google looks at the entire HTML document not just words, also, it strongly analyzes keywords, sentences, as well as their combination usage throughout the entire HTML tag (also anchor text used on hyperlinks). All of which is evaluated and interpreted for meaning of keywords. That means, image file names, words used with folder structure (because for Google, folder structure is part of URL structure).
<!DOCTYPE HTML>
<html lang="en-us" itemscope itemtype="https://schema.org/WebSite"">
Multilingual websites wanting better search engine optimized website should use x-default hreflang for international landing pages.
<link rel="alternate" href="https://example.com/en-au" hreflang="en-au" />
RankYa SEO Tip: if target audience speaks different languages, then, do not use choose the easy option using Translation Plugins to serve content in multiple languages. You should invest in creating professional landing pages that are unique and written in the language your visitor understands.
Futhermore: invest in Top Level Domain (TLD) version of the website for multilingual target audience. For example: example.com (USA customers), example.fr (French customers), example.com.au (for Australian customers use Australian English) just like Amazon having different TLD extensions since they serve a global customer base.
Metadata for Social Media Sharing
Special meta tags, like Open Graph tags or Twitter Card tags, control how a page appears when shared on social media platforms.
<!DOCTYPE HTML>
<head>
<meta property="og:title" content="Example Page">
<meta property="og:description" content="This is an example page.">
<meta property="og:image" content="https:////example.com/image.jpg">
<meta name="twitter:card" content="summary_large_image">
</head>
How to SEO Web Page Meta Description
A meta description is an HTML element used to provide a brief summary or description of the content of a web page. It is placed within the <head> section of an HTML document.
Any web page can use various metadata, and in terms of search engine optimization, you can briefly describe the web page content. As in, what will people find on the landing page. Google search engine algorithms may use meta description to show in Google Search Results snippet.
In the above example, the meta description is set using the <meta> element with the name attribute set to “description” and the content attribute should provide actual description of the web page contents.
- Example 1:
Meta Description: “Discover expert tips for effective content marketing. Learn how to boost engagement, drive traffic, and convert leads with compelling and proven content strategies.”
- Example 2:
Meta Description: “Explore the ultimate guide to healthy vegetarian recipes. From nutritious breakfast ideas to satisfying dinner options, find flavorful plant-based meals for every palate.”
- Example 3:
Meta Description: “Uncover the secrets of mastering SEO. From basics to advanced techniques, RankYa’s comprehensive tutorials empowers you to build fully search engine optimized web pages (INCLUDES FREE VIDEO LESSONS).”
It’s important to note that while meta descriptions are not a direct ranking factor for search engines, creating them strategically can influence click-through rates.
How To SEO Other Meta Tags
Even though Google algorithms in 2024 do not evaluate the Meta Keywords, it should be included despite what anyone says. Knowing that Google is not the only search engine which brings traffic to your business website. Your web pages should use meta keywords, particularly for Blog Post tags and eCommerce Product tags can be used for generating meta keywords.
Since Google search has evolved in 2024, you can search engine optimize your entire website and take advantage of Enriched search results by adding and optimizing Structured Data (note: Google also has policies and guidelines for Structured Data, and validate your Markup as well).
Does your page support rich results? Test Rich Results here.
How To SEO Meta Tags for LocalBusiness
Local business (LocalBusiness) structured data can and should be used for all Local Business websites.
When users search for businesses on Google Search or Google Maps, Search results may display a prominent Google knowledge panel with details about a business that matched the query.
LocalBusiness’s can add additionalType “https://schema.org/ProfessionalService” if using JSON-LD and offering professional service, and or, you can connect your social media profiles using itemprop=”sameAs” on links to your business social media profile URL e.g. youtube channel URL.
If you are a local business operator, then, you already know that you can tell Google about opening business hours, different departments within a business, reviews and more. When you want to help users to make a reservation or place an order directly in Search results, you can use the Maps Booking API to enable bookings, payments, and other actions.
Search Engine Optimization in 2024 Tip by RankYa: everything on a website (including Structured Data) and canonical URLs are evaluated together for Google rankings.
Structured Data begins within HTML tag. Just because a Schema Markup Plugins can’t insert Structured Data at that level does not mean your website’s Structure has to be coded incorrectly (analyze RankYa website HTML code to learn more complex techniques).
More Meta Tags for Search Engine Optimization for 2024
Semantics of web site design also plays an important role for better user experience, accordingly for SEO as well. Assistive technology devices are used, and here’s what Google says about accessibility:
Everyone should be able to access and enjoy the web. Google is committed to making that a reality.
In this below example: you can code web page elements semantically while understanding the fact that Google algorithms are designed to identify meaning of web page content. Core Web Vitals and Google rankings are related to page experience as well. What does that mean? Web Page experienced by everyone including those who rely on Assistive technology devices affect Google ranking results.
<header id="masthead" role="banner" itemscope itemtype="https://schema.org/WPHeader">
Useful HTML metadata elements can provide additional information about a web page, ensuring that browsers and search engines like Google interpret and display the content accurately.
A web site designed with user experience in mind also means it is mobile ready, search engine friendly, accessible by everyone (including those whom rely on assistive technologies), this is the core concept of SEO. Only when we understand this, then, we can add even more useful information to the HTML document, because Google analyses the HTML document in its entirety, now you know better.Links to Each Lesson (includes video sessions)
Hi Tolga, After going through the how-to-guide about meta tags SEO, I approached language tags, preload value & pre-connect value. Have known some insightful innovative things that should consider while doing se optimization.
The video of making meta data SEO has made me more confident. Keep contributing the growing 🌎.