On-Page SEO is probably the main factor before even going onto the other SEO aspects. Search engines love On-Page SEO optimized websites because this lets them crawl the website easily. If you want to rank your website in search results make sure you are on top of these factors;
- Title Tags
- Meta Description
- OG Meta Tags
- Schema Markup Data
- H Tags
- Optimized Anchor Tags
- Optimized Image Tags
- Breadcrumbs
- Keywords
We'll go step by step. So let's get started without any delay...
In our last post we covered introduction to SEO that guides you about SEO and make sure what are we going to cover in this SEO series also, why is SEO so important for your website. In this post we'll learn the first part of SEO i.e On-Page SEO.
On-Page SEO really does matter a lot because when the search engine crawlers, crawl your website they try to index your website based on certain parameters, failing to SEO optimize your page would end up with not ranking in search results and moreover it discourages the crawlers.
Example: Let's say you live in a house, so you keep all your things organized just to make sure that you find and get whatever you want without ease. If you do not keep things organized it would waste your time in searching for that thing and hence wasting your time. Same goes with search engine crawlers.
Step 1: Title Tags
A very informative yet important for your website, this is what appears in short when you see search results or visit any URL.
When you see your URLs in search results / tabs title, this is how they would look like. It should be short yet descriptive. It should convey the purpose of your URL why visitor wants to visit it.
You can often see this in HTML code like <title>some title goes here</title> this is just a small vital part which would decide if a user would visit or not also easy for search engines to understand is this what user wants.
Some points to make sure while forming a precise title tag
- Title should not exceed more than 60 characters (Lengthy title tags would be trimmed in search results)
- Title should not be less than 30 characters (Small title tags won't give you much results and purpose of your URL)
- Use optimal format for title tags
- Syntax: Primary Keyword - Secondary Keyword | Brand Name
- Example: What is On-Page SEO? - [ 2020 Guide ] | StackMantle
Step 2: Meta Description
Meta description mostly serves the purpose to describe your particular page in short and show a short description when in search results or sharing a URL.
Meta description tends to be useful a lot when appearing in search results, because it helps the user to decide if this is what they are looking for, sometimes, we just see the meta description and we get answer to our question.
You can often see this in HTML code like <meta /> this is a vital part for search crawlers when they index your site.
Some points to make sure while forming a precise meta tag
- Meta description should not exceed 160 - 170 characters
- Meta description should not be less than 90 characters
Step 3: OG Meta Tags
Full form for this acronym is Open Graph Meta Tags. Open Graph meta tags are basically snippets of code that control how URLs are to be displayed when shared on social media.
Below are some examples of must have OG Tags
- <meta property="og:title" content="What is SEO? - Introduction (Updated for 2020)" />
- <meta property="og:description" content="Google SEO - To optimize your website for SEO you need to understand the core concepts, this is how team stackmantle recommends from scratch and how we made our presence with search engines. Read more!" />
- <meta property="og:url" content="https://www.stackmantle.com/post/introduction-to-seo" />
- <meta property="og:image" content="https://www.stackmantle.com/assets/images/posts/2020/Jun/single_4c30127a59d.png" />
Initially they were part of Facebook's Open Graph protocol but now are also used by other social media sites like LinkedIn and Twitter (if Twitter Cards are absent). You can find them in <head> section of a webpage. Any tags with og: before a property name are a part of Open Graph tags.
Step 4: Schema Markup Data
Schema data is a new way of data representation to search engines while showing them in search results. These are necessary to be implemented on sites like E-commerce, forums, review websites so that it is easy for a user to decide and navigate to a URL
It helps user decide which product to choose and navigate accordingly, for some websites who sell food products, it also mentions numbers like products sold and other info provided in schema.
For blogs it is useful to show the data in google news feeds and other search engines being categorized as a news / research article / website / organisation. It also helps search engines to display data in rich snippets.
For more schema info you may visit schema.org and available methods / schema which would help you choose contents to display.
Step 5: H Tags
H tags AKA as heading tags or to understand it on code level would be "<h1>" - "<h6>" tags. Purpose of these tags is to tell web crawlers for focusing on specific areas.
Below are some rules of heading tags that you should follow
- Only 1 "<h1>" tag on a page is allowed (More than 1 is not a good SEO practise) - Keep this on the main post title or website name where it should put a focus at
- If you are using a single post you may put "<h1>" tag to the post title
- If you are on contact page you can put "<h1>" tag to the Contact keyword
- If you are on home page you can put "<h1>" tag on your website name / a link where you want to focus on recent post
- Never use H tags for content like "read more" / "view more" and what not because these contents add no value and thus misleading crawlers to focus on
- Use "<h2>" and "<h3>" tags on title's of popular posts, trending tags, recent commented like posts
- Use "<h4>" and "<h5>" tags on some other inner sections, you can / choose not to use, i do not use this tags much
- Use "<h6>" tags in footer main headings like "useful links", "subscribe us" "connect socially"
To understand the chronology oh H Tags you may see this Example: Your blog is your book, "<h1>" tag highlights main chapter of the book, "<h2>" tags highlight sub chapter of the book, "<h3>" tags highlight sub section of the chapter, "<h4>", "<h5>" and "<h6>" tags would highlight internal sections or less focused sections of the book.
Example: If you inspect this page by viewing source, you will see that the title of this page is wrapped in "<h1>" tags then the steps are wrapped in "<h2>" tags, some footer headings are wrapped in "<h6>" tags
To inspect element from desktop you may press right click anywhere in browser and select inspect element or press Ctrl + U. To inspect element from mobile click on URL and add view-source: before URL and hit enter.
Step 6: Optimized Anchor Tags
Having an optimized anchor tags will give you another boost in SEO which would help crawlers understand relevant sources.
Whenever you are having a link on your website in "<a></a>" tags, make sure it has attributes like rel="nofollow noopener noreferrer", target="" as per need. Let's see in detail. By default "<a>" tags is set to allow for all these 3 attributes and target is by default to open in your existing page. Let's see when to use what and why?
- nofollow attribute
- You have to use this when you have a link on your website and you do not want search engines to crawl it because it would be considered as a backlink / link juice. If the website has a high spam score you might end up increasing your spam score as well. Ex: You are providing link like image convertor / online free tools
- If you are linking high authority websites like govt websites, educational websites, or articles that really add a value to your article in this case you may choose not to add this attribute. This way you are also letting search engines know that your post / article is really valuable as you're linking to relevant sources
- noopener attribute
- To improve your site's performance and prevent security vulnerabilities you should use this tags, this would always avoid XSS (Cross-site scripting attacks)
- Use this tag only if you are referring to external links i.e links which are not of your website
- noreferrer attribute
- To prevent passing your domain referrer information to target website by removing referral info from HTTP header use this tag
- When you link an external website and somebody clicks that link, your domain information is transferred to the pointing website which would let them know traffic source. If you add this tag, when someone goes to that link using your domain the information would not be passed
- target attribute
- By default whenever you open a link it will open in current page / view, which means you'll have to press back again to get to the source page
- Use this tag as target="_blank" if you are referring to external websites, this will help your user to open an external link in another tab, keeping your page still open in previous tab
Note: If you are adding a link to your internal website post / category, you do not need to add any of the above, it would also help search engines to crawl your website contents and let them know that posts from your websites are valuable as well.
Step 7: Optimized Image Tags
Yes, images for the posts are necessary, but not for all posts. When we are creating a post we should make sure that images / video are put wherever necessary. It helps to create your post more interactive and makes your user look into things visually.
Example: Let's take this post, had we not put images here the post would look boring and tend users to take away their interest. We usually want things to be seen visually as well apart from text.
On the other hand you should also make sure your images are optimized for SEO perspective as well. Normally an image tag should be SEO optimized. You should include attributes like "title", "alt" which would make your images a bit more descriptive and help search engine crawlers to relate it with content, on other hand if images fail to load, the "alt" tag will take care by displaying an alternative text for the same.
It is also important that you give a caption to your image, which can be beneficial for both, your user to understand the image purpose and search bots to crawl and relate it with the content. If you are using "figcaption" your code should look something like this
Step 8: Breadcrumbs
Breadcrumb is a secondary navigation within a website (also called breadcrumb navigation). Breadcrumbs offer users on the website an option, in form of internal links, to quickly find their way back to the homepage or another level of the website.
It acts as secondary navigation to the website after sitemaps, whereas sitemaps is only for SEO purpose, breadcrumbs are for both SEO and human understanding purpose. With breadcrumbs one can easily traverse the way back to homepage i.e showing a path from source to destination and vice versa.
Step 9: Keywords
One would wonder how can keywords play an important role in determining my page to appear in search results. Trust me, this is most important factor after all above steps are covered. When you are creating a post, you also have to make sure that keywords specific to that post pop-up regularly in the post which you are creating.
Example: Consider this post, the post is about SEO, to be specific On-Page SEO, you can notice that this post consists multiple keywords of On-Page SEO and SEO consistently, not only this but also keywords which are nearby to the same concept like meta data, title and what not.
It helps search crawlers to understand that this post has relevancy / purpose of what is being conveyed. Let's say you are creating a post about SEO but, you posts nowhere has keywords like SEO, On-Page SEO and related keywords to the same. Crawlers would think that content does not match purpose and hence ranking it down. So choice of keywords should always be great.
You can do keywords research always of what your competitor is using and then use it according. You may refer answerthepublic. Here you just need to put up your keyword and hit enter. You will see a detailed analysis of keywords and nearby keywords that you can use to create your post.
Example 2: Let's say you want to create a post on SEO with title "Introduction to SEO". Go to search engines and type your keyword Introduction to SEO and see the search results. Analyze what the competitors are using to rank on first page of search engines.
If you found this information valuable, click here to share. Also, subscribe to StackMantle by clicking here if you haven't, it encourages us to create more interesting posts. See you in the next one!
