SEO OnPage: Page Optimization for Search Engines | SEO COURSE 2020 【Lesson #26】
Articles,  Blog

SEO OnPage: Page Optimization for Search Engines | SEO COURSE 2020 【Lesson #26】

In this section, we will focus on the various
technical elements that can be optimized on a webpage, starting from the title tag, the
meta description, the header tags and the emphasis elements. We will then discuss the images’ and PDF files’
optimization, then we’ll move on to the fundamental concept of CTR and the more advanced code
to text ratio. Finally, we will conclude by analyzing the
most effective ways to get rich snippets and by talking about site crawling and indexing. Title Tag: Length and Practical Tips
In a nutshell, the title tag (inserted in thesection of the page) is basically
the title present in the SERPs (Search Engine Results Pages) for each result, and it plays
a fundamental role in attracting the user’s attention, given the fact that it determines
the first impression. Furthermore, the title will appear in the
browser tab’s header and it will be automatically shown in the preview of the shared post on
the Social Networks (Twitter, Facebook …), even if it is possible to edit it with other specific
meta tags:A good title has the following characteristics: It’s not all uppercase
It is not over-optimized, repeating a keyword over and over again
It is unique throughout the site. There should be no pages sharing the same title tag!
The main keyword must be inserted towards the beginning of the title
It contains the brand name only if it is important. In an EMD (Exact Match Domain) it could be
useless and it would only occupy space. Take advantage of all the available length,
but don’t go any further! If you love tweaks, you can try entering parentheses
or symbols in order to get the user’s attention Talking about the structure instead, I generally
use the following: Main Keyword – Secondary Keyword | Brand For example:SEO <a href="">Tools</a> – OnPage Analysis<br /> | GetSEOfixAt this point, you are wondering if there
is a length limit, given the fact that the space in the snippet is limited. For desktop
results, the maximum length displayed is 70 characters, while for mobile devices it is
78 characters. Actually, talking about characters is not
correct, because in reality, the width is based on pixels and some characters, like
“W”, occupy much more space than a “t”, but we often refer to characters instead of pixels. Now, which length should you choose? In terms of ROI (return on investment), if
you notice from your reports that a site performs much better on Mobile, you could choose to
optimize it for these devices and, at the cost of affecting the desktop results, you
could take advantage of the 78 characters length. In my opinion, considering that these limits
are constantly changing, as it has already happened in the past and as it will probably
happen in the future, it makes sense to opt for a middle way. Personally, I try to stay
within the 60 characters length. So, is the title tag fundamental?
I would say yes, even if sometimes I hear phrases like the following: “Title tag is
useless because Google shows what it wants”. Although the title tag should always be used,
it may happen that Google decides not to show it, and create its own. In my experience,
this has happened in some cases of over-optimization of keywords, or when the query term was not
very relevant with the title text. Meta Description
Not everyone knows that the meta description (inserted in thesection of the page)
is not an HTML element, but a simple attribute consisting of a page’s brief summary which
anticipates the user with the content to be read by clicking that result. If the title element was used in the title
tag, an attribute should be used for the description:Talking about length, I generally use 160
characters, even if the limit varies a lot depending on the query term and it might reach
up to 290 characters in some cases. There has always been a strong debate on whether
the meta description is an SEO factor or not, but the truth (beyond the Google’ official
negative response ⁽¹³⁾ ) is that this element has an enormous impact in terms of
indirect influence on the user desire to click an interesting result, or not. Knowing that the user experience is certainly
considered by Google, then we can conclude that the meta description is also influential. You will have noticed that, when you search
for something, the relevant keywords are shown in bold in the meta description of the results,
which is why this snippet should be optimized from the SEO perspective, as well as for copywriting. As I already mentioned within the Title Tag
section, remember the followings: It is not binding: in some cases, Google may
decide to rewrite meta description by itself in order to make it more relevant to the user.
Avoid duplicates: different pages with the same description can confuse the user.
Social network: it is used in the posts’ preview. In order to analyze the meta tags easily,
without having to open the webpages’ source code, you can use my tool, available on Header Tags
Essentially, the header tags are all those subtitles used in a text for better organizing
the topic and making it easier for the reader to understand it without getting lost, especially
in posts of 1000 or more words. The main one is the tag

. It may be the
same, or differ from the title tag’s text, even if its function is to identify the webpage’s
title. It is inserted directly within the content and not in the ‘head’ section, as
it happens in the case of meta description and title tags. Then there are the tags H2, H3, H4, H5 and
H6. Consider that, as the number increases, the font size will be smaller, as long as
their importance for the search engines. The H2 are like real chapters on the webpage.
Increasing the number, we will move on to less important subsections, although all these
tags play an important role in organizing the appearance and structure of the page. A recent advantage of using the H2 or the
H3 is that, in case of objects’ lists (for example, “The 6 Christmas gifts for girlfriends”),
Google might consider them for the creation of Featured Snippets and therefore, earn an
additional space in the SERP. Here are the main features that differentiate
H1 tag from the following ones: There must be only one H1 for each page. Someone
disagrees, but I personally believe this is a rule to follow.
The H1 font should have a larger size than the other elements.
It should be placed at the top of the page. It should contain the main keyword. Emphasis And Other HTML Elements
The fact is this: a few years ago, talking about emphasis elements, there were real diatribes
about usingtextinstead oftext, while italics was discussed
betweentextandtext. The absurd thing is that both tags show exactly
the same result, but the question was whether Google had any preference on it. As early
as 2006, Matt Cutts (Google’s head of Spam Search) had clarified ⁽¹⁴⁾ that there
was no preference, but speculation went ahead and I think it also will continue in the future. From my point of view, and considering the
user experience, choosing one rather than the other changes nothing at all. At a substantial
level, I believe it is important to show text fragments in bold or italics, because they
help the reader to dwell on important points. The problem is that many people think to over-optimize
by using bold text only for the important keywords. The result of this action is particularly
artificial and it could also determine a penalty. Being a sea lover, I enjoy living with the
feeling of serenity, that I get whenever I am on vacation and I take my mask and flippers
and I go swimming near the coast, admiring the marine fauna and flora. In my projects I always try to put bold on
full sentences or at least on 4 words within the sentence, because I believe that seeing
a single word in bold in the middle of a paragraph neither adds any value nor helps with the
reading. There are many other elements within the HTML
metalanguage. For a complete overview you should know at least the following, because
they are widely used in articles of website:

  • element 1
  • element 2

contains a list of elements and aims to form an unordered formatted list.
anchor text: it is used for hypertext links to
other pages of the website or to external sources. The target=”blank” attribute will
open the new URL in another tab, by keeping the current page open.

: it organizes data within cells, with a header. Thanks to Javascript / CSS, it is
also possible to obtain the ordering by columns in real time or create tables in responsive
design. Optimized Images
Now let’s focus on image optimization. You must know that the famous alt text performs
some functions: Visually impaired: if someone could not see
a photograph as they are visually impaired, they would definitely appreciate the access
to an alternative in order to understand what the image is about.
Description: it is required to indicate the keywords and give information on the images’
content. Loading: if, for any reason, the image could
not be loaded, an alternative text will then be shown to the user.
Google Images: images can provide traffic to your website, if they are properly optimized. It is quite easy to fall into keywords over-optimizations’
trap. Let us remember that we only need to provide a precise description, by using different
keyword within sentences that are readable by humans. We have seen how to optimize the img tag,
but there is one last operation we need to do in order to get a really optimized image:
the compression. Inserting images in an article can be harmful
if we aim to offer an excellent loading speed, but if we make sure that they are properly
optimized and do not cause delays, then it should not raise any problems. Here are the two techniques that I generally
apply in order to manage the situation: Image file compression: you can do it manually
with a WordPress plugin, by using a desktop software, or with an online tool like TinyPNG.
Lazy Load: this technique allows to have the image downloaded only when the user has scrolled
the content until the image is displayed in the browser and not immediately when the page
is loaded. You may be wondering if in this situation
Google is able to index everything correctly, but if you think about how page rendering
works, Big G generally waits a few seconds and then scrolls down to generate all the
events that make up the webpage. Technically speaking, the implementation is
not immediate, but you can use WordPress plugins like Lazy Load in order to enable it in one
click. Optimized PDFs
Let’s be clear on one thing. Google has been able to read and index PDF files since 2001
and this is why we often see them directly among other SERP results. Remember that a PDF is, in reality, a great
source of keywords with attractive content and immediately available to read for both
Google and human users. When I’m dealing with projects that include
PDF files, I apply some tricks: File name: use the keyword already in the
filename. For example, cooking-in-garden.pdf Title: set a title with keywords. With Adobe
Acrobat DC, you will find the field in File>Document Properties>Title
Description: set a description with keywords. In Adobe Acrobat DC, you will find the entry
in File>Document Properties>Subject Compression: if the file includes images,
try to load compressed versions in order to save space, since a 100-page PDF can occupy
several Mb, if it contains various images. Organization: use subtitles and paragraphs
in order to detach content and make the reading easier.
Internal Links: try to insert a link from your website to the PDF file in order to let
Google find it and assign a relevant importance. Do not save it as an image: some tools allow
you to save a document into PDF format with non-selectable text. In this case, search
engines may have difficulties indexing your document.
I would like to point out that a PDF file uploaded to the server is accessible from
the address and it is considered as any other page on the website. CTR: Indirect Influence
Finally we have reached one of the most interesting topics, namely the click through rate (CTR):
a metric that indicates the percentage of people who click on a result after seeing
it in the SERP. Here is an example of the average CTR for
my website in the shopping sector, as reported in the Google Search Console account. Text To HTML Ratio
Without complicating thing too much, you need to know that the text to HTML ratio is simply
the relationship between the code and the text within a webpage. It also includes Javascript
and CSS lines belonging inline to the source code. I reassure you right away, by saying that
this is not an official SEO factor (even Google’s John Mueller confirmed it ⁽¹⁵⁾ in the
past), but, in my opinion, it may have an indirect influence. Having a webpage with a lot of code, perhaps
with an HTML weight higher than 275 Kb, often means increasing the loading speed or the
rendering time and considering the continuous push to have faster websites, this can be
an indirect disadvantage. Basically, you need to make sure that your
text to html ratio is aligned with that of your competitors and other similar websites
within the industry. Generally, for an e-commerce website the ratio
is around 15-20%, while for blogs we’re talking about 25-30%, especially if we use WordPress,
with sophisticated themes and plugins. Here are some steps to follow in order to
improve the Text to HTML ratio: Include CSS and Javascript in external files
Delete HTML comments Delete unnecessary code
In any case, remember to check the value of this ratio in your competitors’ webpages because
things change considerably, from niche to niche. In order to easily calculate this ratio, you
can use the tool that I’ve inserted on

Leave a Reply

Your email address will not be published. Required fields are marked *