 |
Optimizing meta tags is the best way to provide information on a site to search engines like Google, Bing and so on. Not only that, meta tags are one of the most important components that must be implemented on a site or blog as the most basic onpage SEO optimization step.
If simplified, meta tags are a collection of HTML code that is installed on a site or blog written in the <head> section which serves to help search engines or social media to find out the overall summary of the contents of a site.
How Important Are Meta Tags?
In order to get a place in search results, a site or blog must include meta tags into the code structure of its blog, unless the blog is set for personal or specific readers. It can be said that the data that will appear in search results is mostly sourced from meta tags.
A good meta tag that is neatly arranged and complete will make your site indexed faster by search engines and most likely get a high position in search results.
What Should Be In A Meta tag?
The most standard meta tags are meta tags which provide some important information such as Site Title, Description, Keyword, and Thumbnail Image.
If the four data above already exist in your meta tag before then it is enough to compete in search results. But not only your site that applies the above method, there are thousands of other sites with a similar niche that apply the same thing even with better quality content than your site. Are you able to compete with them?
Your only chance is to maximize your meta tags by adding some other code that is just as important to improve the quality of your site. So what are the things you need to add to your site? see the explanation below:
Meta Open Graph
Sources of traffic/visitors of a site are not only from search engines, most of them are also sourced from social media. for that it is also important to provide a summary of your site's information to social media such as Facebook, Twitter and so on. The trick is to add an open graph meta tag on your site.
Site Authority
Contains proprietary information from a site, such as the name of the site creator, site owner information link, webmaster verification code and so on.
Meta Tag Robot
This meta tag serves to provide more complex information to search engine robots, the important things that are usually added in this meta tag are information on the language of your site, the location of your site and several other things.
If you have applied all of the above information to your meta tags, you can be sure that your site will occupy a high position in search results. At least your site is indexed faster than usual.
What Does Writing Good Meta tags Look Like?
Not only does it provide complete information, a good meta tag is one that is neatly organized and easy to understand by the site owner himself, by tidying up your site's meta tag arrangement, you will have no trouble editing or changing it when needed in the future.
Below we will share the latest and best meta tags in our opinion that this site has used, these meta tags are organized more neatly to make it easier to modify and we will provide guidelines for you to edit some parts of this meta tag.
Based on the experience of using this meta tag, the position of this site is thewebtrick.com not affected even after changing the template several times thanks to the meta tag below. We're not saying this meta tag is the most perfect, but at least it's worth a try because if we succeed then you will too.
Paste the meta tag code below in the <head> ... </head> section of your site or blog, or replace the meta tags you previously used with the meta tags below:
<b:if cond='data:view.isMultipleItems'>
<b:if cond='data:view.isHomepage'>
<!--[ Homepage title ]-->
<title><data:blog.title.escaped/></title>
<b:elseif cond='data:view.search.query'/>
<!--[ Search title ]-->
<title><data:messages.search/>: <data:view.search.query/></title>
<b:elseif cond='data:view.search.label'/>
<!--[ Label title ]-->
<title><data:blog.pageName.escaped/> - <data:blog.title.escaped/></title>
<b:elseif cond='data:view.isArchive'/>
<!--[ Archive title ]-->
<title>Blog archive in: <data:blog.pageName.escaped/></title>
<b:else/>
<title>Blog: <data:blog.title.escaped/></title>
</b:if>
<b:elseif cond='data:view.isError'/>
<!--[ Error title ]-->
<title>Error 404: Not found</title>
<b:else/>
<!--[ SingleItem title ]-->
<title><data:blog.pageName.escaped/> - <data:blog.title.escaped/></title>
</b:if>
<!--[ meta for browser ]-->
<meta charset='UTF-8'/>
<meta content='width=device-width, initial-scale=1, user-scalable=1, minimum-scale=1, maximum-scale=5' name='viewport'/>
<meta content='IE=edge' http-equiv='X-UA-Compatible'/>
<b:if cond='!data:view.isError'>
<!--[ Browser data, description and keyword ]-->
<link expr:href='data:blog.url.canonical' rel='canonical'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription.escaped' name='description'/>
<b:elseif cond='data:view.isSingleItem'/>
<meta expr:content='data:post.snippet.escaped snippet { length: 147, links: false, linebreaks: false, ellipsis: false }' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title' name='description'/>
</b:if>
<meta expr:content='data:blog.title.escaped + ", " + data:blog.pageName.escaped + ", Add_your_addtional_keyword_here "' name='keywords'/>
<b:tag cond='data:view.isPost' expr:href='resizeImage(data:blog.postImageUrl, 0)' name='link' rel='image_src'/>
<!--[ Generator and RRS ]-->
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl.canonical path "feeds/posts/default"' expr:title='data:blog.title + " » Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl.canonical path "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " » Feed"' rel='alternate' type='application/rss+xml'/>
<link expr:href='data:blog.homepageUrl.canonical path "feeds/greys/default?alt=rss"' expr:title='data:blog.title + " » greys Feed"' rel='alternate' type='application/rss+xml'/>
<!--[ Theme color ]-->
<meta content='#ffffff' name='theme-color'/>
<meta content='#ffffff' name='msapplication-navbutton-color'/>
<meta content='#ffffff' name='apple-mobile-web-app-status-bar-style'/>
<meta content='yes' name='apple-mobile-web-app-capable'/>
<!--[ Favicon ]-->
<link expr:href='data:blog.blogspotFaviconUrl' rel='apple-touch-icon' sizes='120x120'/>
<link expr:href='data:blog.blogspotFaviconUrl' rel='apple-touch-icon' sizes='152x152'/>
<link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.blogspotFaviconUrl' rel='shortcut icon' type='image/x-icon'/>
<!--[ Open graph ]-->
<meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title.escaped' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta expr:content='data:blog.title.escaped' property='og:site_name'/>
<b:if cond='data:view.isMultipleItems'>
<meta content='website' property='og:type'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription.escaped' property='og:description'/>
<b:else/>
<meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title' property='og:description'/>
</b:if>
<b:else/>
<meta content='article' property='og:type'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription.escaped' property='og:description'/>
<b:else/>
<meta expr:content='data:post.snippet.escaped snippet { length: 147, links: false, linebreaks: false, ellipsis: false }' property='og:description'/>
</b:if>
</b:if>
<meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title.escaped' property='og:image:alt'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='resizeImage(data:blog.postImageUrl, 0)' property='og:image'/>
<b:else/>
<meta content='Add_your_image_url_here' property='og:image'/>
</b:if>
<!--[ Twitter card ]-->
<meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title.escaped' name='twitter:title'/>
<meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
<b:if cond='data:view.isMultipleItems'>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription.escaped' name='twitter:description'/>
<b:else/>
<meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title' name='twitter:description'/>
</b:if>
<b:else/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription.escaped' name='twitter:description'/>
<b:else/>
<meta expr:content='data:post.snippet.escaped snippet { length: 147, links: false, linebreaks: false, ellipsis: false }' name='twitter:description'/>
</b:if>
</b:if>
<meta content='summary_large_image' name='twitter:card'/>
<meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title.escaped' name='twitter:image:alt'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='resizeImage(data:blog.postImageUrl, 0)' name='twitter:image:src'/>
<b:else/>
<meta content='Add_your_image_url_here' name='twitter:image:src'/>
</b:if>
<!--[ Sife verification ]-->
<meta content='xxxxxxxxxxxxxxxxx' name='google-site-verification'/>
<meta content='xxxxxxxxxxxxxxxxx' name='msvalidate.01'/>
<meta content='xxxxxxxxxxxxxxxxx' name='p:domain_verify'/>
<meta content='xxxx-xxxxx-xxxxxxx' name='majestic-site-verification'/>
<meta expr:content='data:blog.title.escaped' name='copyright'/>
</b:if>Description and Usage Guide
Before copying and pasting the above meta tags on your site, CHANGE! some sections are tagged with information from your site or in the meta tags you used previously.
Blog title / Blog Title
This first tag group serves to display the title of a particular site or page on the blog in search results. For example, if a new article is published, the title of the article will be automatically written in this code, the results on the search engine can be seen in the image below:
The rules or conditions contained in this tag include:
Error 404 page title
By default the result displayed is Error 404: Page Not Found , you can replace it with another title as you wish, for example Sorry! Page Not Found or so on
Title on the home page
Displays the title of the Homepage of your site, you can add another sentence to the search results, for example, Blog Name: Latest Gaming Information Center or the like by changing this line of code to:
<!--[ Homepage title ]--> <title><data:blog.title.escaped/> : Judul Tambahan</;title>
The result is like the example image below:
It does look simple, but this can change the power of keywords targeted by your site.
Headings on post pages and static pages
Displaying the title of the post page and static page, the default that will be displayed is only the title of your blog post, but there are some blogs that also add their blog title in this section to strengthen their blog keywords, for example as below:
List of 12Gb RAM Mobile Phones with Prices - Right Share
We have changed the blog title to be as above in the latest meta tag update. Now the code for the title of the post is as below:
<!--[ SingleItem title ]--> <title><data:blog.pageName.escaped/> - <data:blog.title.escaped/></title>
You can change the dash above with other signs that you think are suitable such as : or |
Title on the index page
Displays the title on the blogger index page (other than the homepage, posts and static pages) which on blogger is marked with /search in the url, there are 4 conditions written to display different titles on your blog index page including:
Search : search query - Displays the title of the search page on your blog, automatically any keywords written by the user will appear in this title and you can also change the word Search: in this line with other words such as Search Results: or other words. You can see an example of implementing this code on this page.
Label Name - Blog Title - Displays the title of the label page on your blog, if the user clicks on the label link on your blog, this section will be displayed as the title.
Blog Archive in : January 2021 - This section is optional which means you can apply it or not. But if you enable the archive feature or add the Archive Widget to your blog, then this title will appear when the user clicks on your blog's archive page.
Blog: Blog Title - If all of the above conditions are not met then this title will be displayed, usually this title will appear when the user clicks the navigation button of longer Posts, Newer posts or navigation numbering on your blog.
Most bloggers choose to block this page from appearing in search results, but this setting is still worth a try to further enhance the appearance of your blog page title.
Thumbnail Image
This meta tag serves to display a thumbnail / snippet of your blog image, on the posting page the image snippet displayed in this section is the first image of your article.
If the article you write does not have an image, then what will be displayed is the image link that you insert in this tag. Change the section marked on this line with a link to your blog's logo. (prepare your blog logo image with a minimum size of 300px x 300px)
<meta content='Add_your_image_url_here' property='og:image'/> // change with your blog link, for example the result is as below <meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6ZJtZgE-zTvhcoeTx2ekttnfPMmL3VOyYlumCEAcNGag3awN4oynB5_BE-LdF-tudJXJfOaZLKiCxZdEtItJQhlCLj1NtxOlgDauCuVU2og90yAMO_euF0UM03pxMri23GHuK6DBc_LfE/s1600/jagodesain-logo.png' property='og:image'/>
Description Blog
One way of onpage SEO optimization is to add a blog description on each page, this description will be displayed in search results at the bottom of the blog title as shown below:
Therefore as much as possible add a search description to every time you post an article, on blogger when writing an article you can go to the right field and click on Search Description writing , to explain more you can see in the image below:
One of the advantages of the meta tags that are shared at this time is that it provides an alternative description when you don't write a description on the blog. When there is no description in a post, automatically the first paragraph of the post will be displayed as a blog description.
Favicon
Serves to display icons on the IOS and Android platforms, this section is automatically filled with the favicon that you uploaded to Blogger. But you can also change it with a more HD image, the method is as below:
<!--[ Favicon ]--> <link expr:href='data:blog.blogspotFaviconUrl' rel='apple-touch-icon' sizes='120x120'/> <link expr:href='data:blog.blogspotFaviconUrl' rel='apple-touch-icon' sizes='152x152'/> <link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/> <link expr:href='data:blog.blogspotFaviconUrl' rel='shortcut icon' type='image/x-icon'/> // Example of application <!--[ Favicon ]--> <link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCwwFcNXpIqTWvu8IhZZyzP5R7g6zDpbbDSX_tYFYNOje_UvAEKq7QMTclZfUC9m_iu4px4Qo3CBMeiwbeNBEnHf5Ei-KpuTYNZ9oqIuF0x4fnBldoxLawkGeDpW23NlIO5c0EHYOWoD0a/s300/fletro-pro.png' rel='apple-touch-icon' sizes='120x120'/> <link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCwwFcNXpIqTWvu8IhZZyzP5R7g6zDpbbDSX_tYFYNOje_UvAEKq7QMTclZfUC9m_iu4px4Qo3CBMeiwbeNBEnHf5Ei-KpuTYNZ9oqIuF0x4fnBldoxLawkGeDpW23NlIO5c0EHYOWoD0a/s300/fletro-pro.png' rel='apple-touch-icon' sizes='152x152'/> <link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCwwFcNXpIqTWvu8IhZZyzP5R7g6zDpbbDSX_tYFYNOje_UvAEKq7QMTclZfUC9m_iu4px4Qo3CBMeiwbeNBEnHf5Ei-KpuTYNZ9oqIuF0x4fnBldoxLawkGeDpW23NlIO5c0EHYOWoD0a/s300/fletro-pro.png' rel='icon' type='image/x-icon'/> <link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCwwFcNXpIqTWvu8IhZZyzP5R7g6zDpbbDSX_tYFYNOje_UvAEKq7QMTclZfUC9m_iu4px4Qo3CBMeiwbeNBEnHf5Ei-KpuTYNZ9oqIuF0x4fnBldoxLawkGeDpW23NlIO5c0EHYOWoD0a/s300/fletro-pro.png' rel='shortcut icon' type='image/x-icon'/>
Theme Color
Change the color code marked in this line of code with the dominant color of your blog, this section serves to change the color of the address bar on the Google Chrome browser on Android or the Safari browser on IOS
Sife Verification
This last section serves to verify the ownership of the site or blog on certain sites. In this code there are 4 verification codes including verification for Google Webmaster / Search Console , Bing Webmaster , Pinterest Site Verification and Majestic SEO Tools Verification.
While this does not provide a tutorial on how to get the verification code above, please search for yourself on google how to get it.
Please provide your greys after using this meta tag and please ask questions if there are problems in implementing the above meta tags.