What’s better than an on-page SEO guide?
How about a technical on-page SEO Guide!
We know there’s a lot of these resources floating around out there — probably dozens, if not hundreds of them.
What we couldn’t find were guides to the technical processes that help Google think (yes, it has a brain now) and “feel good” about your digital properties from the perspective of their crawlers and semantic principles.
Hopefully, this guide paints a clear picture of on-page SEO from a technical standpoint and helps you improve the ranking of your websites.
Let’s start at the top and make our way down the page in sequential order.
Looks like we have some work to do…
While page speed itself isn’t a direct ranking signal for Google, how users respond to a website due to the following factors is.
Aim to meet or exceed these baselines:
You can test your page speed for free at Google Page Speed Insights.
Note: the above metrics apply to 80% of websites and niches. They don’t apply to ecommerce websites and other niche properties.
From a technical perspective, Google wants your URLs to be informative, concise, easily comprehensible, and most importantly, shallow.
They have a lot of sites to crawl.
For example:
Don’t do: https://viictorymedia.com/tucson/services/SEO/
Or: https://viictorymedia.com/tucson/SEO
But rather: https://viictorymedia.com/tucson-SEO-services/
This structure allows Google to have a crawl depth that hops less between directories.
Users also prefer this structure because what the page is about can be easily discerned from the URL.
(Source: Medium)
There are many opposing viewpoints about white-space and how much real estate it should take up on a website, but one fact stands out…
White space helps direct the user’s focus.
It also makes it easier to achieve a desirable contrast ratio.
Additionally, many believe a white background makes visitors more receptive to the information being presented on the page in comparison to darker colors.
(Source: Contrast Ratio)
The technical requirement for contrast ratio is 4:1. This ratio should always be used as a starting point for web design.
As ADA (Americans with Disabilities Act) guidelines become more important, search engines will continue to reward websites that implement them fully.
Tip: Test the contrast ratio of your design for free.
(Source: Smashing Magazine)
Cascading down the page, the next technical recommendation we come to is bread crumbs.
Bread crumbs are primarily seen as an interlinking structure between pages on your site and also help visitors who may end up “lost.”
While bread crumbs aren’t absolutely necessary, they do give users and crawlers a better understanding of how your pages are linked and their hierarchy.
Moving on to the body of the content, we’ve highlighted a few overlooked yet crucial areas that should help your website be seen more favorably by Google.
(Source: W3-Lab)
While Google guides recommend using 16px fonts, we take this a step further and advise to consider the age demographic of your target market and the medium.
(Source: SEOptimer)
H1 – H6 headings should be used in the proper order.
Semantically, your H1 should also be the first line of text so that crawlers and humans can understand what the topic is at first glance or crawl.
Note: When creating headings do not use them to fulfill a stylistic need.
We often find that SEOs use headings for things like “Our Services”or “About Us”.
Using headings for visual formatting purposes inevitably detracts from your page’s topical relevance.
Primary keywords should appear naturally throughout your text and not condensed in any one area.
As crawlers cascade the page top to bottom, it’s essential to include the keyword ‘naturally’ throughout the body of the entire page, article or blog.
When trying to determine the ideal keyword density, find the average density of the top three websites you’re competing with.
You can do this by searching your keyword on each page, counting the total number in each document, and then dividing it by the number of websites used in your sample.
When constructing your content, make sure to use positive adjectives in close proximity to your keywords to reinforce sentiment value.
Example: If your keyword is Tucson Web Design, proximal words that enforce sentiment value could be: best, expert, professional, or honest.
In essence, sentiment analysis helps provide search engines with a subjective understanding of your keywords and surface better results to search queries.
(Source: James Madison University)
Your line-height should be 150% of the font size.
Thus, we can calculate that 150% or 1.5 to 1-7.
Following this guideline also improves readability and comprehension.
(Source: Babich)
Multiple studies show that a line length of 9 – 12 words (+/- 60 characters) helps readers feel less overwhelmed by walls of text, which in turn increases their dwell time.
SEOs have known for a while now that breaking up lines of text increases dwell time.
Walls of text push readers away from your pages and content.
(Source: UXMovement)
Button size matters, especially on mobile devices and screens.
If a visitor can’t hit the tap target or it’s too small, Google may penalize your website for poor usability.
To prevent this, always make sure your buttons are a line-height of at least 56px or the equivalent.
Your pictures should be sized to the correct proportions of the div container and not appear bigger or smaller than the designated width.
Export images as a JPEG at the lowest possible resolution that preserves the necessary quality.
Include keywords in the naming conventions for your pictures if relevant — with an alt tag to match.
Note: The Save for Web command in Photoshop can help with this.
(Source: Moz)
The alt in alt tags is short for “alternative.”
Alt tags are used to describe in words the appearance or function of images to a user unable to see them.
Ideally, alt tags should be full sentences, without hyphens, underscores or special characters, as they’re primarily intended for screen readers.
If you’re creating div classes and ids, they should contain helpful information regarding the table’s content.
For example, if you’re creating a table with a list of the top ten casinos, our advice is to name the table:
<div class=”top-ten-casino-list”>
This helps crawlers better understand what information you’re providing and how it relates to your website as a whole.
Each document, page, blog or article should include at least one link to other relevant content on your own website.
In many instances, you’ll want to link to additional authoritative content with anchor text that uses the keywords established in the H1 of the page you’re linking out to.
Linking to content on external websites establishes a one-way link that helps Google understand what your content is similar to, or that it’s verifiable and authoritative.
Outbound links are crucial for content in the YMYL niche.
(Source: AlsoAsked)
Adding a “people also ask” section to the bottom of your pages allows you to link to other pages on your website related to similar topics.
For example, if your article is about The Future of Web Design, and you know that people are also asking about The Future of SEO, you can create a People Also Ask section with a brief description of the second topic. Briefly answer the question and link to the long-form content elsewhere on your website.
Tip: You can find out what “people also ask” about your topic by looking in the Google SERP for your query or by using AlsoAsked.
Author biographies help build trust and credibility in your content and brand — both from users who actively follow you and in the eyes of Google’s search algorithm.
Note: Google has begun to associate people’s names (entities) with other entities. For example, if you Google me (Schieler Mew) and head over to images, you’ll see the search engine has related me as a personal entity to SEO and Web Design, among other things.
Author’s Note: All information in this guide is derived from multiple meta-analyses, and Google directly. These guidelines aren’t hard and fast, but time and time again, they’ve been shown to increase optimization for search in multiple case studies.
https://design.google/resources/
https://developers.google.com/style
https://support.google.com/webmasters/answer/7451184?hl=en
https://uxdesign.cc/building-a-design-system-where-to-start-part-4-typography-5065b8d360c
https://medium.com/successivetech/importance-of-whitespace-in-good-design-de03ea0ab4db
https://material.io/design/usability/accessibility.html
Thanks for this. Very helpful guide for neophyte like me. 🙂
Nice post and very helpful!
You must be logged in to post a comment.
Like the article? Read some more:
Buy Now!
x
0 Social Signals
For: https://seobutler.com
$0
Subtotal:
$0
VAT:
$0
Total:
$0
I've read and accept the Terms & Conditions*
August 18, 2020 at 8:32 pm
really nice post. useful information