A brief study of SEO meta tags.
Being a newbie in the business of tech and working as a web developer you might, at first believe that the head tag should house the following tags;
- Title
- Links
- Script
- And some few meta tags most three at most.
Well, with the technology evolution and fast growth rate. More and more people are seeking an online presence and as such build Apps and websites.
So what I’m saying or trying to point out is, as a web developer taking SEO into consideration is very key in today’s world of technology.
So what is SEO?
Search engine optimization (SEO) is the process of affecting the online visibility of a website or a web page in a web search engine’s unpaid results — often referred to as “natural”, “organic”, or “earned” results. In general, the earlier (or higher ranked on the search results page), and more frequently a website appears in the search results list, the more visitors it will receive from the search engine’s users; these visitors can then be converted into customers -wikipedia
Search engine optimization (SEO) is the process of optimizing your online content so that a search engine likes to show it as a top result for searches of a certain keyword. — neilpatel.com
So as a web developer how do I make the site that I build SEO optimize and all?
Well for this post we will be talking about the meta tags and how there help achieve that.
META Tags <meta />
The meta tags are used to hold information about the website but for this article, we will be focusing on name and content attributes as they are the basic attribute needed for SEO.
The name attribute holds the name of the info the meta tag is holding while content holds the datils of that info.
<meta name="keywords" content="your, books, dreams , ideals "/>Here it tells us that the meta tag is giving us info about keywords and the kind of keywords associated with the site. So we will be talking about some of the value of the name attribute(s) and their corresponding content value .
Description
<meta name="description" content="150 words"/>The description value is used to hold info about the description of the site. Here, in 150 words the site is described and help give information about what its about to the search engines and WebCrawler.
Keywords
<meta name="keywords" content="tags"/>The keyword values hold keywords associated with the site. Like an e-commerce site would have words like “sales, deals, price, goods”. This helps place sites higher when they are been searched for online.
Author
<meta name="author" content="name, email" />The author value indicates that the meta is indicating the author of the site and their email.
Refresh
<meta http-equiv="refresh" content="30">This is used to inform the browser to refresh every 30 seconds.
OpenGraph meta tags
The Open Graph protocol was originally created at Facebook and is inspired by Dublin Core, link-rel canonical, Microformats, and RDFa. When a site is been shared on a social media platform, It enables sites to have the same richness and experience as every other component of that social media platform been shared.
Now through OpenGraph meta tags, we are able to make a shared link to become more interactive on a social platform like Facebook, twitter, .e.t.c as they get displayed like the image above. This is possible as the crawlers of these social platforms look out for the OpenGraph meta tag and display according to their design specifications.
Some of the basic required tags of OpenGraph meta tags are
<meta name="og:title" content="Title"/>
<meta name="og:description" content="description of site"/>
<meta name="og:url" content="site url"/>
<meta name="og:image" content="link to image"/>
<meta name="og:site_name" content="site name"/>To achieve the image above the values would be
<meta name="og:title" content="Build what's next"/>
<meta name="og:description" content="sign up and get $300 to spend on Google Cloud "/>
<meta name="og:url" content="https://cloud.google.com"/>
<meta name="og:image" content="https://cloud.google.com/exampleimage.jpg"/>
<meta name="og:site_name" content="Build what's next"/>Twitter has its own meta tags too and there are similar to they OpenGraph.
<meta name="twitter:title" content="Title"> <meta name="twitter:description" content=" descrption of site">
<meta name="twitter:image" content=" link to img">
<meta name="twitter:card" content="summary_large_image">Nevertheless, Twitter still uses OpenGraph alongside its own.
Well, that will be all for this article at least. For further readings and reference you can checkout
