Meta Tags Generator is a free tool that allows you to debug and produce HTML meta tag code for any kind of websites, whether for personal blog, company profile, etc. Meta Tags Generator allows you to change and experiment with your content before previewing how it will appear on Google, Facebook, Twitter, and other platforms on production environment.
Once you submit all the required fields in the form, you will then see the generated meta tags previews on this section to see how it will look on Google SERP, Facebook, and Twitter.
Meta tags are text snippets that describe the content of a page; meta tags do not appear on the page itself, but only in the page's source code. Meta tags are small content descriptions that assist search engines understand what a web page is about.
The main difference between visible tags (say, on a weblog) and invisible tags is location: meta tags only exist in HTML, generally at the "head" of the page, and are thus only accessible to search engines (and people who know where to look). The "meta" stands for "metadata," which is the type of data provided by these tags — data about the stuff on your website.
Furthermore, meta tags can contain information that will assist search engines such as Google, Yahoo, Bing and other technological services in determining what your site is about and whether or not it is legitimate!
But why can't I view the meta data? Because the protocol was designed to be examined by machines, it is hidden in code at the top of a page, which is exactly why this tool was built! Insert any URL into the search box, and our site will allow you visualize and modify the meta tag code so you can alter it.
Yes, but not all of them and not all of the time. One of the purposes of this article is to clarify which meta tags may benefit your SEO results and which have mostly fallen out of favor. (See "Know Your Meta Tags" below.)
If you want to see if a page is utilizing meta tags, right-click anywhere on the page and choose "View Page Source."
In Chrome, a new tab will open (in Firefox, a pop-up window will appear). The meta tags would be located at the top, or the "head" section of the page. The meta tags in HTML will look something like this:
<title>HTML Meta Tags Generator | Walter Pinem Tools</title>
<meta name="title" content="HTML Meta Tags Generator | Walter Pinem Tools">
<meta name="description" content="Meta Tags Generator is a program that allows you to debug and produce HTML meta tag code for any website. Generate yours now!">
<link rel="canonical" href="https://walterpinem.me/projects/" />
<meta name="robots" content="index,follow" />
And the result would look something like this on Google SERP:
There are four basic sorts of meta tags to be aware of, and we'll go through them all here. Some of them are no longer as useful as they previously were. Others are worth applying on a regular basis since they will almost certainly enhance your traffic by letting Google know who you are and what you provide. (Although there are more than four types of meta tags, some are less popular or irrelevant to online marketing.)
The four types we'll go through here are as follows:
The importance of social media sharing and Google ranking for your site influences how much attention you should pay to your meta tags.
When you share an article link, you want your post to look good when it's published on social media. You want it to include a high-quality image, the right name, description, and URL. These characteristics are obtained from your website by Facebook, Twitter, and other social media networks. You may control what they take from the post by putting social media meta tags (such as open graph tags) in your post's html code.
You can determine what is displayed in the Facebook post if the Facebook meta tags (=Open Graph meta tags) are present. If you omit certain Open Graph (og) meta characteristics, Facebook will still show information about your blog post, but probably not in the way you'd like. This is also applicable to Twitter meta tags. Let's utilize Facebook to show the use of social media meta tags and link sharing.
Consider strolling into an abandoned store with dusty shelves and a musty odor in the air. A link to your site on Facebook or LinkedIn is frequently the first encounter you have with a visitor, and if it appears empty and unmaintained, like a desolate store, they will never consider following the link.
As part of most digital marketing initiatives, teams typically develop appealing language and eye-catching graphics, which fortunately lend themselves nicely to becoming part of your webpage's meta data. Twice the value, half the effort!
Furthermore, creating meta data may be a useful exercise in constructing a clear sales pitch. Google only allows you 60 characters for your title and roughly 105 characters for your description, giving you plenty of room to fine-tune your value offer.
The 'og:' in the HTML code of your website stands for 'Open Graph.' It is an abbreviation for an Open Graph protocol, which allows you to instruct Facebook how to display your shared material. As previously said (and as stated by Facebook in their developer guidelines), 'without these Open Graph tags, the Facebook Crawler employs internal algorithms to generate a best estimate regarding the title, description, and preview picture for your content.' Defining this information clearly using Open Graph tags aids in ensuring the maximum quality of Facebook postings.
As you can see, these og meta elements are crucial for Facebook. If you haven't heard of them or think they're brand new, you'd be astonished to learn that Facebook introduced the Open Graph protocol ten years ago (in 2010). However, it is now owned by the Open Web Foundation.
The Open Graph protocol extends current technologies and conventions to help developers richly describe any web page in the social graph. Enough with the background and terminology; let's dive into the specifics of the various og meta tags. We'll simply look at the four that are responsible for the appearance of our embedded post on Facebook: og:title, og:image, og:url, and og:description.
This is one of the four fundamental metadata properties in the Open Graph protocol (those are: og:title, og:type, og:image, og:url). We set the title of our object (in this example, a blog post) as it should look in the social graph by supplying the og:title. This og:title will then be pulled by Facebook and shown as the post title (just under the URL at our first image).
Within the social graph, we put a URL of the picture URL that should represent our item (article). This attribute should provide a link to the featured picture in this case. We ensure that this picture is visible on Facebook by supplying the og:image. Otherwise, Facebook may select a different picture from our post; it may be the main image featured in our post listing and at the top of our article, or it could be any other image appearing in the blog post.
This meta element includes our object's canonical URL, which will be used as its permanent ID in the social network. The URL in the og:url in our example is https://www.kontentino.com/blog/facebook-ads-target-audiences/.
Finally, using the og:description meta tag should let us display the description when sharing this article. It is now 'Find out how to reach the appropriate individuals using Facebook Ads target audiences,' as shown in the HTML code image.
Twitter meta tags function similarly to Open Graph meta tags in that they indicate the material that Twitter will fetch when you share a web page on this social media site.
Because meta tag data might be overwhelming, and your time is limited, you should concentrate on two aspects: the title tag and the meta image.
The major reason for developing this tool is that it is extremely difficult to focus on the most important variables for meta tags. It is really unpleasant to iterate on titles, photos, and descriptions!
MetaTags.io was developed to make this procedure more pleasurable! Testing alternative headlines and graphics quickly is a smooth, seamless operation.
Meta tags aren't difficult to implement yourself — you don't need a coder, just basic HTML knowledge. Try my free Meta Tags Generator to generate HTML meta tags for your website.
Other interesting tools related to this one. More tools are coming soon!