You are on page 1of 90

Självständigt arbete på grundnivå

Independent degree project - first cycle

Datateknik
Computer Engineering

SEO for web developers


Understanding, implementing & testing

Firstname Lastname
Sanna Bergström
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

MID SWEDEN UNIVERSITY


Department of Information and Communication Systems

Examiner: Mattias Dahlgren, mattias.dahlgren@miun.se


Supervisor: Mikael Hasselmalm, mikael.hasselmalm@miun.se
Author: Sanna Bergström, sabe0919@student.miun.se
Degree program: University Diploma, 120 higher education credits
Main field of study: Computer Engineering
Semester, year: Spring, 2020

i
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

Abstract
The objective of this study is to start understanding SEO when you are a web
developer to help increase your knowledge to be able to offer more for your
costumers. It aims to look at the bigger picture and try to touch a lot of areas
within SEO without going in deep into every part.

This study has taken help from several blogs and sources about SEO, mainly
from the internet, to build a base of knowledge to put in to the implementation.
And to test the results several SEO tools have been used, such as Google Ana-
lytics, Siteliner and Googles structured data testing. All tools for measuring
different parts of SEO. Also a user experience test has been conducted to under-
stand how visitors navigate to find information on the site and what roll content
value has in SEO.

To understand how to implement SEO in both code and content this study has 2
projects in its aim, one being translating posts and making sure the SEO is up to
part for a medical blog and the other developing a website for a drop-in solari-
um business and implementing SEO into it. This study goes from braking down
parts of SEO, explaining them whiteout going too deep, implementing them in
both content and code and to finish testing and analyzing it.

Keywords: SEO, Yoast SEO, WordPress, UI

ii
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

Table of Content
Abstract ............................................................................................................... ii
Terminology / Notation ...................................................................................... v
1 Introduction...................................................................................... 1
1.1 Background and problem motivation ........................................... 1
1.2 Overall aim ................................................................................... 2
1.3 Scope ............................................................................................ 3
1.4 Concrete and verifiable goals ....................................................... 3
1.4.1 iDoc24 - goals ...........................................................................3
1.4.2 Megasol - goals .........................................................................4
1.5 Outline .......................................................................................... 4
1.5.1 Chapter 2...................................................................................4
1.5.2 Chapter 3...................................................................................4
1.5.3 Chapter 4...................................................................................4
1.5.4 Chapter 5...................................................................................5
1.5.5 Chapter 6...................................................................................5
1.6 Contributions ................................................................................ 5
2 Related work .................................................................................... 6
2.1 What is SEO?................................................................................ 6
2.1.1 First off, how does it work? ......................................................6
2.1.2 Which search engines are important and which are not? .........7
2.1.3 On-page and off-page SEO? .....................................................8
2.1.4 What is UTM codes and what do you use them for?................9
2.1.5 Keyword and keyword research ...............................................9
2.1.6 Title & Meta description .........................................................10
2.1.7 Links .......................................................................................10
2.1.8 Headers ...................................................................................10
2.1.9 Images ..................................................................................... 11
2.1.10 URL & permalinks.................................................................. 11
2.1.11 Secure website & HTTPS ....................................................... 11
2.1.12 Responsive web & mobile friendly ........................................12
2.1.13 User experience ......................................................................12
2.1.14 Site architecture ......................................................................12
2.1.15 Schema markup ......................................................................12
2.1.16 404 errors & 301 redirect........................................................13
2.1.17 Local SEO...............................................................................13
3 Methodology / Model ..................................................................... 14
3.1 First Derm & SEO ...................................................................... 14
3.2 Megasol, Wordpress & SEO ....................................................... 15
4 Implementation .............................................................................. 16
4.1 First Derm & SEO - content & the process ................................ 16
4.1.1 Keyword & Meta description .................................................17
4.1.2 Translation, Text & Title .........................................................18
4.1.3 Permalink ................................................................................18
4.1.4 Images & alt-text ....................................................................18

iii
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

4.1.5 Links, Anchor text & UTM ....................................................19


4.1.6 SEO analysis ...........................................................................20
4.1.7 Categories ...............................................................................21
4.2 Megasol design, development & SEO ........................................ 21
4.2.1 Design process ........................................................................21
4.2.2 Responsive development ........................................................23
4.2.3 Site architecture ......................................................................24
4.2.4 Page naming & URLs .............................................................24
4.2.5 Schema markup ......................................................................25
4.2.6 Structure & WordPress ...........................................................26
4.2.7 Header & Footer .....................................................................27
4.2.8 Solarium..................................................................................28
4.2.9 Facilities..................................................................................29
4.2.10 Home page ..............................................................................30
4.2.11 FAQ.........................................................................................31
4.2.12 Contact ....................................................................................31
4.2.13 Search .....................................................................................32
4.2.14 Theme options ........................................................................33
4.2.15 404 errors ................................................................................33
4.2.16 Secure website & HTTPS .......................................................33
4.2.17 Content & SEO .......................................................................33
5 Results ............................................................................................. 34
5.1 iDoc24 and firstderm.com results ............................................... 34
5.1.1 Q2 - How is Yoast SEO used on FirstDerm.com? ..................35
5.2 Megasol - testing & results ......................................................... 35
5.2.1 Structured data testing ............................................................36
5.2.2 Mobile Friendly ......................................................................37
5.2.3 Siteliner & Duplicated Content ..............................................38
5.2.4 W3C Markup Validation Service ............................................38
5.2.5 UX Testing with Zoom ...........................................................39
5.2.6 Q2 - How is Yoast SEO used on Megasol.nu? .......................41
6 Conclusions..................................................................................... 42
6.1 iDoc24 – Analysing Google Analytics Data ............................... 42
6.2 Megasol – The analysis of the tests ............................................ 43
6.2.1 Megasol – UX test analysis ....................................................44
6.2.2 Megasol – Local SEO .............................................................45
6.3 SEO & Ethics.............................................................................. 46
6.4 Summing it up ............................................................................ 46
References ......................................................................................................... 47
Appendixces ...................................................................................................... 51

iv
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

Terminology / Notation

Acronyms/Abbreviations

SEO Search Engine Optimization

AI Artificial Intelligence

API Application programming interface

On-page SEO SEO for content on your website and in code

CMS Content Management System

WCMS Web Content Management System

Crawling How search engines goes thru your website

URL Uniform Resource Locator


SERP Search engine results pages
Ad blockers Plugin in browsers for blocking ads
Off-page SEO outside of your website
Cloaking Hiding content from visitors on your website
UTM Urchin Traffic Monitor
Backlinks Links from other sites to your website
CDC Centers for Disease Control and Prevention
Tool for getting analytics of your marketing and
Google Analytics
content of a website and ads.
HTTP Hypertext Transfer Protocol
HTTPS Hypertext Transfer Protocol Secure
JSON-LD JavaScript Object Notation for Linked Data
JSON JavaScript Object Notation
Mobile first Practice of designing a site for mobiles first
KPIs Key performance indicators
UX User Experience

v
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

1 Introduction
With the growing usage of technique today the need for better solutions to reach
the end user increases as well as the need to simplify the usage. According to
Lin, Oberlo [1] there was 4.33 billon active users on the Internet in the third
quarter of 2019, meaning 327 million more than in the same quarter the year
before, an amazing increase. Almost 6 out of 10 had access to the Internet last
year with 57.3 percent of the world’s population using the internet, all over the
world with 3.9 billion mobile Internet users [1]. With this incredible numbers
there’s a big need of great search engine optimization (SEO) and content to
improve your chances to be found in the huge sea of fishes out in the World
Wide Web. Search engine optimization is to get traffic into your website thru
non paid search results and thru different techniques [2] that will be described
later on in this report. It is to optimize your site in ways that search engines will
rank you higher in their search results. You need not only to be found but to
present the visitor with content of value in preferably in a good design as well.
You want to aim for easy and functional, user friendly design as well as being
stylish and intriguing with interesting content.

1.1 Background and problem motivation


SEO is getting more and more important for web applications than just making
pretty websites and beautifully structured code. It is not only experts but every-
one involved in web projects or even the customer that needs to understand
what it means and how to practice it.

The American company iDoc24, owner of the website firstderm.com, needs


their English medical blog translated to the Swedish version of the site and of
course SEO is a big part of that. First Derm have an artificial intelligence (AI)
tool that works as an image search for dermatology problems. As Search Enter-
prise AI explains “Artificial intelligence (AI) is the simulation of human intelli-
gence processes by machines, especially computer systems” [3], meaning that
AI is machines trying to act like humans thru cognitive skills. They try to learn,
reasoning and self-correct [3]. The AI tool that iDoc24 offers thru their website
firstderm.com is an application programming interface (API) that compares
pictures added from the user to a database with pictures to give dermatology
advice. It then adds the picture to the database and learns more about dermatol-
ogy. An API is basically a tool for a developer to use that comes with descrip-
tions how to use it and different operations that can be useful [4]. They can then
use the API tool within their web applications without having to do more than
the instructions given. iDoc24 use the First Derm Blog to get good SEO and to
advertise their AI tool.

SEO is one of the most important parts and the focus of the assignment is there-
for in making sure that even the Swedish translated version will practice good

1
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

SEO to get more costumers in Sweden. Their website is done in WordPress and
with the plugin tool Yoast SEO. Yoast SEO is therefore the main tool of this
project.

On the other hand usage and user friendliness is also an aspect that is getting
more and more important since this is getting requested more from the costum-
ers and end users. Our costumers today have more knowledge than before and
are demanding higher quality products. The end user today don’t forget easily
and after just one mistake as many as 32% will likely abandon a brand they
have loved, according to a costumer survey that pwc did in 2017/2018 [5].

There is another side to SEO than just in writing and content it also includes a
side relevant for a programmer. And the company Megasol based in Gothen-
burg, Sweden is also in need for good SEO. Megasol has several drop-in solari-
um facilities in Gothenburg and therefore has more of an interest in getting
ranked better for local searches. In their case they do have text for content but
they do not want to have a blog nor make news posts on their website and for
that have the need for optimizing their website more than just thru text. They
also want to rank well on search engines to get more costumers. Besides from
this they don’t have a website at all and are also in need for everything from
design to development to SEO.

1.2 Overall aim


The overall aim is to solve different and similar problems for 2 different com-
panies. The first being for the American company iDoc24. Since they do not
have any employer with Swedish mother tongue they need help with translating
posts for their Swedish version of the website as well as making sure the SEO is
up to part. To do this, a good basic knowledge of SEO is needed and therefor it
is necessary as part of the aim to study it as well. iDoc24 need their website to
rank high on Google to get more costumers. The SEO will therefore be the main
aim for this part of the project.

The second aim is also SEO but for the company Megasol but in a different way.
They do want text in their site and of course this needs good SEO, but a lot of
the focus of SEO will also be in the code and implementation of the site. They
want a basic site where their customers can find information they need and are
searching for, like location, information about the sun beds, age rules, payment
and more. They rather spend more time on their social accounts for posting
news than on the website but do want a site to be easier found and pick up more
costumers. The aim for this part will be SEO but also designing and developing
the website. This makes usability important too and therefore this is part of the
aim as well.

2
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

1.3 Scope
The study has its focus on SEO for content in both the way of the actual content
as well as the code for on-page SEO, meaning the content on your website.
However SEO is a large area which takes years to perfect, therefore it is not
possible to cover everything within this work. The focus should be to try to get
a good overview without going too deep in to each area, to get a good start as a
developer to understand SEO. It should answer the questions in the chapter be-
low whiteout going to deep into each part.

The work can be seen as starting to get to know SEO and how to start applying
it, to get one foot in. Today it’s common that you need to know and understand
more than just your own area and it would make us better developers to under-
stand how to make a good base for SEO and to understand a bit more about the
work SEO experts do.

Page speed is an important part of SEO and much relevant for developers. Since
there is a lot of areas to cover within this study this will not be covered here.
Also backlinks, meaning other pages linking in to your page is a good and im-
portant way to boost your SEO. But this is also outside the scope of this work.

1.4 Concrete and verifiable goals


The common goals for the 2 companies are SEO and therefore it is important to
understanding it. The goals are though divided into smaller and more measura-
ble goals below for each project.

1.4.1 iDoc24 - goals


The main work will be to learn about and apply SEO in the translation of the
blog posts. They use the content management system (CMS) WordPress and
within it they use the SEO tool Yoast SEO. CMS is a content managing system
making that you will not need to do all the coding from scratch [6]. It helps
companies that want to update information on their site to be able to do this
without needing to know programming. Important to know is that CMS in this
case refers to Web Content Management System (WCMS) which just means that
this CMS is for the web. WordPress is one of the most popular WCMS with
35.2% of the market share [6]. The work aim will be to translate and apply SEO
to the texts in WordPress with Yoast SEO. The aim is also to respond to the be-
low stated questions.

3
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

Q1. What are the most important parts of SEO for iDoc24?

Q2. How is Yoast SEO used on FirstDerm.com?

Q3. How can you improve the SEO on FirstDerm.com?

Q4. How important is typography and writing to SEO?

1.4.2 Megasol - goals


The goals for Megasol will be to build a good, stable, pretty and usable website.
It will be important to build a good design, too display the content in a way that
the information is easy to find and make the SEO good for ranking well on
search engines. The work will aim to answer the below stated questions.

Q5. What are the most important parts of SEO for Megasol?

Q6. How is Yoast SEO used on Megasol.nu?

Q7. What can be done with SEO to improve local ranking?

Q8. Is the site user-friendly?

Q9. Are their costumers able to find the information they are searching for
and are they finding it fast and easy?

1.5 Outline

1.5.1 Chapter 2
Chapter 2 describes SEO and a lot of different terms and parts of it. What the
parts are, what they mean and what good practice of them are. The chapter aim
to provide knowledge on important parts of SEO.

1.5.2 Chapter 3
Chapter 3 describes the methods used for analyzing results and different tools
used within the projects.

1.5.3 Chapter 4
Chapter 4 describes the process of the work, what has been done and how, as
well as tools that are utilized.

4
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

1.5.4 Chapter 5
Chapter 5 displays the workflow and results of the SEO analysis and user test.

1.5.5 Chapter 6
Chapter 6 discusses the results from chapter 5. It discusses ethics, bad practice
of SEO and what could have been done better or changed.

1.6 Contributions
The posts that are translated and optimized with SEO are done in the project but
the original articles in English are written by Alexander Börve, the owner of
iDoc24. He is also responsible to provide login into their WordPress site. He
also goes thru the translations before they are published. Alexander will be re-
sponsible to provide data from Google Analytics for the result part of the work.

For Megasol, they will provide the content for the site in form of images, texts
and logo. All the rest will be done within the project.

5
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

2 Related work

2.1 What is SEO?


To understand how to apply good SEO to the translations of the blog posts of
firstderm.com and to the website for Megasol it’s important to have a basic un-
derstanding and knowledge about what SEO is and which parts you can utilize
when you are optimizing texts and websites.

2.1.1 First off, how does it work?


SEO, as earlier mentioned, stands for Search Engine Optimization and is basi-
cally a way of optimizing your website to get traffic from different search en-
gines and in different ways [7]. To understand SEO you need to know the dif-
ferent building parts of SEO and which of these are more important. Below you
find a figure from Moz [8] showing the percentage of importance of the differ-
ent parts to SEO.

Figure 1 - Weighting of Thematic Clusters of Ranking Factors in Google [8]

6
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

According to Moz there are three important parts to understand it, quality of
traffic, quantity of traffic and organic results [2]. The quality part is basically
that you want the right people to find you. There is no point of a lot of traffic to
your site if they are not interested in what you are offering, products, services or
what your website is there to sell [2]. For example if you are selling cleaning
products you don’t want someone searching for cleaning services, you want
someone that are a possible costumer, someone actually searching for cleaning
products rather than a cleaning business. If you do get the quality of traffic you
will also want the quantity, more traffic in this case is good [2].

Organic results is a word for all the content the search engines find that SEO
can affect, meaning traffic that you can affect and don’t have to pay for [2]. The
difference is very clear when you compare it to ads, ads is something you will
have to pay for that for sure can help too but only during the time that you will
pay for them contra to good SEO that can make sure you always get ranked
high up in the search engines. Now days there are a lot of ad blockers out there
that will block your paid ads from showing. People today can more easily
choose to see ads or not. Even though Kelsey [9], page 7, said “there’s evidence
to suggest that Google might make deals with some of the ad blockers to let at
least Google’s ads through”. You can never be sure where your ads will show
and therefor there is a risk that your payed ads might not reach as much cus-
tomers as you would wish for and all that money you are spending for it might
go to waste. This is one reason to make sure you have good SEO and then if
you want ads that should be a good addition to SEO rather than a standalone for
bringing in traffic to your site.

2.1.2 Which search engines are important and which are not?
There is many search engines out there like Google, Bing, Yahoo, YouTube and
many more. According to Gotch SEO Google has 92% of the search engine
market share [10]. This makes Google more interesting than the others that
combined only stand for the remaining 8% and the one that you generally speak
about when you talk about SEO. In figure 2 below, from Gotch SEO [11], you
find a diagram showing stats over different Search engines, showing that
Google is way above the rest.

7
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

Figure 2 - Global Stats, Search Engine Market Share Worldwide from Feb 2018 – Feb 2019 [11]

This doesn’t mean that you don’t have to think about the other search engines
since good general SEO will most likely work for them as well since they all
use similar or the same way of crawling, indexing and ranking. Crawling is the
process which the search engines use to find content on the internet. They send
out crawlers, also called spiders, to find the content for every Uniform Resource
Locator (URL) [12]. This is combined with indexing and ranking to decide
what to display in the Search engine results pages (SERP). SERPs are more or
less self-explained, it is different results of either paid or organic results. Since
they use similar ways and Google stands for 92% of the market share it will
probably be enough to aim for SEO for Google [10].

2.1.3 On-page and off-page SEO?


The differences between on-page SEO and off-page SEO are as basic as it
sounds, on-page is your own content on your website and off-page is everything
outside of your site [13]. On-page SEO includes code as well as the visible
parts on your website [13]. There is also the technical side of it that includes
things like crawling, schema, page speed and so on [14]. On-page will be of
relevance for firstderm.com and both on-page and the technical side of it will
suite the project for Megasol’s website.

In on-page SEO you got several important parts to include within the content.
Things like Keyword, images, videos, links and more. Keyword is the word or
words that are entered in to a search engine for a search [10]. As Moz Pro says,
“Your web content should exist to answer searchers questions, to guide them
through your site, and to help them understand your site’s purpose” [14]. This
means that you don’t want to have extra pages for the sake of having more pag-

8
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

es, you want pages with relevant and good information. You should avoid thin
content and duplicates of information.

Cloaking is another thing you want to avoid. Cloaking means that you hide text
in HTML from normal visitors just of the sake of giving the crawlers more in-
formation than is displayed on the site, to rank better [14]. This might just result
in search engines not ranking you at all [14]. You should always avoid tricking
search engines and just make sure to make good content in the ways of SEO.

2.1.4 What is UTM codes and what do you use them for?
UTM stands for Urchin Traffic Monitor (UTM) and is a way of tracking your
URL links, to see where the user came from [15]. It is a part of code that you
put in the end of the URL to be able to track it [15]. You put in different param-
eters in to the code part to track different thinks connected to the traffic. You
can track a campaign, a source, a medium, a piece of content and a term [16].
The ones that First Derm Blog is using is the source, medium and campaign
pieces for tracking the traffic of the links they have to their AI tool. For the
moment it is only important to understand these three. But it could be good to
look at the others too if the time of the project allows for it and see if they are
missing any good opportunities. The source is to check from what source the
click came from, like if it came from example Google, Yahoo or Facebook [17].
Medium is what type the traffic came from like a certain display type, email or
other and the campaign parameter is for tracking a specific campaign [17].

The UTM codes are essential to be able to understand what generated traffic
and what didn’t so future efforts can be put into the right kind of content. One
way to do this is with the tool Google Analytics where you can check different
analytics of the traffic thru the UTM code used. It is a tool for getting analytics
of your marketing and your content.

2.1.5 Keyword and keyword research


As earlier mentioned keyword is the word that is entered into a search engine to
find the information that you want. So to choose the keyword becomes one of
the most important things to SEO so you should research it, as Gotch SEO says
“you shouldn’t guess the keywords your audience are using” [10]. There are
different ways to do this. One way is to use a tool for researching keywords and
see analytics of it, like search volume or common questions [18]. Volume
shows you how many are searching for this specific keyword and this way you
will know how popular it is [19]. It’s important to have a balance here, it is real-
ly good with a popular keyword since there are many searches for this but it can
also be a very competitive keyword. You need to check if your site can compete
with the results coming up and this makes a simple google search for the key-
word relevant as a way of checking it too [19]. There you will learn more about
what kind of SERPs Google will show for that specific query. Tools will often
also show trends and keyword difficulty which shows how difficult it will be to

9
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

rank on the search with that specific keyword [20]. There is a lot of more things
you can do with this if you really dig in deep, but for firstderm.com it’s only
possible to somewhat affect the keyword since it’s a translation and not done
before writing the whole post.

You should also think of using your keyword several times in your text but
avoid overusing it [14]. You want it to be an interesting text that people want to
read as well as you want to rank good in search engines without getting blocked
by them.

2.1.6 Title & Meta description


The SEO title and meta description are what’s showed in the SERPs, it is basi-
cally the title displayed followed by an excerpt of what the content is. The meta
description is important to fill in since it’s one way of getting a good ranking in
Google [20]. You should set a unique and descriptive title tag since this will be
part of the SERP [14]. This is something you can change in Yoast SEO within
WordPress to optimize for each page. You can also fill in the title and Meta de-
scription in your head tag in the HTML code of your site.

2.1.7 Links
Another important part to SEO is links and more accurate linking back to your
previous posts or other pages [20]. And the anchor text should also be well
thought out. This is the information that search engines see and putting in key-
words can make your ranking better if you don’t overuse it [14]. As earlier men-
tioned keyword stuffing can make search engines not rank you at all so you
want to put the keyword in as much as possible but without making the text
hard to read.

Don’t use random anchor text in your links; think about making it to something
the search engine will understand [14]. If you just link the text “read more here”
than search engines will not know what the link is for. An example would be the
text “If you want to know more about detecting skin cancer in time you can find
more information in our skin cancer guide” and making the text “skin cancer
guide” the anchor text, meaning that search engines will understand that the
link leads to a skin cancers guide. Also think about including keywords in an-
chor text when possible, but as earlier mentioned, avoid keyword stuffing [14].

2.1.8 Headers
Header tags, as we know, exist from H1-H6 but this doesn’t mean that we need
to use them all, the importance is to use them correctly in descending order [14].
Don’t skip to H3 when you can use H2, the lower, the better since search en-
gines rank it higher [14].

10
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

2.1.9 Images
There are different things you can do with images for SEO, some of them can
help make your site faster since images are one of the things slowing down
webpages. But in this project there is not time for optimizing for page speed
and therefore these will not be explained here. But think about using the right
format, it’s good to try to avoid JPEG if possible since they usually have high
image resolution and therefore take more time to render. Make sure to pick the
best option of format for what you need and for page speed.

The alt-text of your images is important for helping people that use screen read-
ers as well as for the search engines to understand the images better [14].

2.1.10 URL & permalinks


URL’s are also a part of SERPs and search engines takes them into count when
ranking pages [14]. Also, imagen when you are looking for results to click and
you see a link of just numbers and characters and you see another that spells out
what you are looking for, which one would you choose? Like Moz says
“Searchers are more likely to click on URLs that reinforce and clarify what in-
formation is contained on that page, and less likely to click on URLs that con-
fuse them” [14]. So optimizing your permalinks for your webpages helps your
ranking better on search engines.

Think about the length of your URLs and try to put keywords into them can
also help. According to Moz [14], users are more likely to click shorter URLs
than longer ones. Don’t use the keyword several times in the URL for the sake
of SEO but if it’s relevant to the page it’s good practice to use it once [14].

2.1.11 Secure website & HTTPS


Hypertext Transfer Protocol (HTTP) and Hypertext Transfer Protocol Secure
(HTTPS) are different kinds on certificates that will affect your security as well
as your SEO [21]. HTTPS works the same way as HTTP with an extra layer of
security for the data being sent thru the website [21]. We don’t need to get in to
how exactly this work but we need to understand that they are different and that
for Google this difference matter. Besides being more secure, sites with HTTPS
tends to load faster and page speed is part of SEO [21].

11
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

2.1.12 Responsive web & mobile friendly


Being mobile friendly or not is something that Google cares about, they rank
mobile friendly pages over none mobile friendly ones [22]. And as we all know,
a lot of the traffic in to your site comes from mobile users today. Responsive
design is a way to not have to make a mobile specific site but adjust so that
your site works on different devices, both making it user friendly as well as
mobile friendly.

2.1.13 User experience


User experience (UX) is another important part not only for user experience
itself but for SEO. As Search Engine Journal say “38 percent for people will
stop engaging with a website if the content and layout is unattractive” [23]. The
SEO part of it is dwell time, the amount of time that users spend on the web site
[23]. So making your site pretty and user friendly is also part of SEO.

2.1.14 Site architecture


Architecture of your site will also help, you should make your site is easy to
navigate and breeze through. As Search Engine Journal say “It should take a
user only three to four clicks to find any page on a website” [23]. You want to
make your navigation logical and easy for the user to find what they are
searching for and fast.

2.1.15 Schema markup


Schema markup helps you to give the search engines better information what
your site is about as well as giving them a tool to understand the elements on
your site better thru labeling and organize them [22]. This gives structure to
your data and the preferred schema markup for Google is JavaScript Object
Notation for Linked Data (JSON-LD) [22].

JSON-LD is a schema markup that uses JavaScript Object Notation (JSON)


and is supported by, as mentioned, Google, but also by Bing, Yandex and sever-
al smaller search engines [24]. JSON-LD uses the Schema.org vocabulary and it
simplifies using this thru just needing to put this inside your HTML markup
instead of putting it in to the elements [25]. You can also do this in with Micro-
data, but why do this when you can simplify it? To explain Microdata it is a bit
outside of the scope, but if you have an interest of understanding this on a deep-
er level you can visit the Schema.org and read more about it. In this you can put
different information like contact information, a link to your logo, site URL and
more.

12
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

2.1.16 404 errors & 301 redirect


A 404 error is when the visitor tries to get to a page on you website which
doesn’t exist [26] and if this happens you might want to display something of
value to your visitor rather than just an error. This is also part of SEO, remem-
ber that you want to give the visitor something of value and not just a confusing
page. So editing a 404-error page is good for your SEO, maybe even make it a
bit more fun for the visitor, but not on the cost of its value.

Fixing 404 errors might also be of interest but this doesn’t mean that you need
to fix them all [26]. When should you fix these issues? When there is infor-
mation on your site that is relevant to what the user was trying to find or when
there is other sites linking to this page [26]. And how do you do this? You can
make 301 redirects to solve it. As Gotch SEO explains; “A 301 redirect signal
to search engine crawlers that a page has been permanently moved to a different
page” [27]. Hence you fix by redirecting 404 errors where you have something
relevant on your website.

2.1.17 Local SEO


Local SEO basically means SEO for local businesses. There are several things
you can do to optimize for your local business. One of them is to set up a
Google My Business page. But why should a business get Google My Business
and not just settle with the SEO on their site? First, it’s free and it contains loca-
tion, contact info, images and more that users can find. Even more important,
Google My Business is showed as the number one result after paid ads, making
it a great ranking organic result [28]. Another thing is easy access for the users
to all that info like contact information and you will appear on Google Maps,
also making it easier for the users to find you [28]. Last but not least, mobile
users tend to do a lot of local searches, as Medium says “Approximately 60% of
all searches take place on a mobile device, and nearly ½ of all mobile searches
are related to a location” [28].

Another good think for local SEO is Schema Markup that is mentioned earlier;
make sure to have a good markup for local business [14]. Also if you have dif-
ferent locations you should have different pages on your site for them [14].

13
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

3 Methodology / Model

Both projects involve SEO and will therefore be somewhat similar in method-
ology. But where they differ is that Megasol needs more than just written con-
tent SEO, it needs design and development as well. Also the way of testing and
analysing the results will differ. For iDoc24, and their website firstderm.com,
these where done first since time was important to gather data in Google Ana-
lytics. For Megasol there will be no time to get these since it will probably be
finished right in the end of this study.

3.1 First Derm & SEO


To do the work with the SEO in the blog post translations it is crucial to under-
stand SEO and how to apply it to the content. Therefor a theoretical and litera-
ture study is essential. Working thru several SEO guides in general but as well
more specific guidelines as Yoast SEO’s own guideline to their tool.
Firstderm.com is a WordPress site and within it they use this plugin. Yoast SEO
is the tool that will be used in the this project.

Besides Yoast SEO, Semrush have a tool called Keyword Magic Tool [29],
where you can check a handful of analytics and statics of the keyword to under-
stand it better. This tool will be used to check and understand the keywords and
links and to try to evaluate the usage of them in the translations of the posts.

Another part to be able to evaluate is to check the analytics of the earlier posts
translated. The later posts will not had enough time to be able to see any result
but the earlier posts and maybe a few more will be able to be analyzed. To get
analytics from Google Analytics, the project will use the tool Google URL
builder to make UTM codes to put in the links to track.

To analyze the data from Google Analytics there is Key performance indicators
(KPIs) that need to be considered and analyzed. Search Enginge Journal ex-
plains KPIs like this “KPIs are objective metrics that help to measure and give
clarity into the success of a given organization or campaign” [29]. To measure
your SEO is important and critical to be able to understand what is not working
or what is working [30]. To evaluate the results the project will look at the time
people spends on the page, amount of page views and the bounce rate from
Google Analytics.

14
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

3.2 Megasol, Wordpress & SEO


For Megasol it is also really important with good SEO in the same way as for
First Derm’s blog posts. But here it’s also very important to do optimizing
within the development parts too. Therefor it’s as important here to combine the
theoretical study from content SEO with a theoretical study of SEO from a
developer’s perspective.

Since there will not be enough time to get SEO analytics for Megasol there will
be testing instead in different ways. Usability testing will be important here for
making sure to have a good designed and functional site. During this Covid-19
time the amount of users for testing will be a bit limited even though more
would be preferred. Therefore the aim is to have approximately 5 people testing
the finished website. For the test the subjects will be given certain directions to
be able to perform the tasks and they will be monitored during the test. If not
possible in person they will be asked to share their screen and preferably use a
webcam if possible.

Other testing will be done both during the development and after. The tools to
be used are listed below.

 Googles tool for testing structured data will be used to test the schema
markup. The tool is found on this site;
https://search.google.com/structured-data/testing-tool.

 Google also have a tool for checking if your site is mobile friendly here;
https://search.google.com/test/mobile-friendly.

 Siteliner will be used to search for duplicated content;


https://www.siteliner.com/.

15
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

4 Implementation
Since the study has two different projects to execute the implementation parts
are separated to be able to follow them more easily. But in both of the projects
SEO is the key.

The implementation will start with the project for iDoc24’s site firstderm.com
since it’s needed to check analytics in the end of the project for the result and
conclusion of this study. To be able to have these SEO analytics of the blog
posts, time is of the essence and therefore is it critical to begin whit this part of
the study.

The second part of implementation will be to design and develop the website
for Megasol and of course optimize the SEO for the site. The SEO will be done
for both the content, similar to the project for iDoc24, and more important here,
within the development. This project will aim more for understanding SEO
from the developers view.

4.1 First Derm & SEO - content & the process


Since the text in the blog posts already exists there is a limit to how much of the
content that can be changed and optimized. But the task is not only to translate
it but to work with the SEO as well and therefore the possibility to make some
changes. This works as long as the whole text or big parts of the text doesn’t get
changed much, that the changes are minor and not affecting the original post.

The process is per each translation of the posts so after one is finished you start
over with the exact same process for the next post. The aim is to do around 5
translations per week during the whole project. Each time is about finding a
good process and then evolve it when possible. It means that with more and
more experience you might find new things that you can evolve or change with
the process.

First the original posts to be translated gets checked so that you understand
what the subject is about. To be able to make a good translation it’s important to
understand it. Below in figure 3 you see the workflow of this process.

Figure 3 - Workflow for translating & SEO of the blog post


16
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

4.1.1 Keyword & Meta description


Keyword might be one of the most important parts with SEO and doing key-
word research is critical to making good content. Since the keyword already
exists in English just a little bit of keyword research is done.

First the keyword of the original post is checked in Yoast SEO tool in Word-
Press and translated. But this is not always the best word or keyword for Swe-
dish as well. So next is to research if the translated keyword will make sense, is
there a better and similar word that people are searching for more?

The keyword is searched for in Google and the results are checked if they are
relevant for the post. Also a check in Semrush tool Keyword Magic Tool [31] is
done. There the volume of searches, trends and number of URLs displayed in
organic search is checked to determine if the keyword should be altered,
changed or kept. This part will differ for each keyword and also with more ex-
perience. It’s a learning curve to understand this better and better.

When the keyword, called focus keyphrase in Yoast SEO, is chosen it is put in
to their tool in WordPress. In figure 4 below, you can see a part of the Yoast
SEO plugin in WordPress.

Figure 4 - Yoast SEO plugin in WordPress part 1

17
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

In figure 4 you also see a lot more of the Yoast SEO tool. The SEO title for First
Derm is set to the title of the post, a separation tag and a text which depends on
the length of the title. iDoc24 have asked to always have “hudläkare online”,
“hudläkare online tjänst” or similar. Which means “dermatologists online ser-
vice”. If it’s a really long title you need to make this part shorter and if it’s a
short title it needs to be longer to maximum the space showed in the SERP.
Here you can also see how it will look like on both a mobile and a desktop view.
It’s made up out of the SEO title and the Meta description. All this information
is filled in and analyzed by Yoast SEO, as seen in figure 4 there’s a green line
beneath these inputs. The line goes red if Yoast thinks of it to be bad either in
being too short or too long. Synonyms to the keyword are also put in when
needed.

4.1.2 Translation, Text & Title


The post title is translated and made sure it contains the keyword. If the title
doesn’t make sense in Swedish it will be tweaked a bit to fit better but to not be
changed totally from the original.

Since the main focus is on making sure to get good SEO in the Swedish blog on
the site, the translation part is optimized by using an online translation. With
these you don’t get the best translation but a good draft to work with to speed
up the process. Also there is some extra work put into translating all the medical
terms correctly and switching some of the sources like the Centers for Disease
Control and Prevention (CDC) in the US to “Folkhälsomyndigheten” which is
the corresponding authority in Sweden.

Next step is to check that the keyword appear several times in the text without
making the text harder to read [10]. If it is not appearing enough according to
Yoast SEO’s analyze the text is optimized again and changed to fit more key-
words but in a natural way.

4.1.3 Permalink
The URL of the permalink is also translated and sometimes optimized since
First Derm often seems to be using stop words, meaning words like and, the, a,
by and more [20]. These stop words are ignored by search engines and therefore
not needed [20]. These are removed as best as possible from the URL to make it
shorter and optimized.

4.1.4 Images & alt-text


Since search engines isn’t good enough at reading on pictures yet [20] the alt-
text of the images needs to be translated or set if missing. The alt-text is set to
the keyword.

18
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

4.1.5 Links, Anchor text & UTM


The links in the posts already exists since it’s a translated post, but sometimes
the internal target post doesn’t exist in a translated version. In these cases
iDoc24 asked for keeping the links but informing them so that article translation
gets to be a priority. The anchor text is set to just the relevant part telling what
the linked material is about.

iDoc24 is mostly interested in tracking the traffic with Google Analytics thru
links to their AI tool for scanning for dermatology problems thru images. So the
only links where the UTM code is used is in these links. To build the UTM code
the tool Campaign URL Builder is used, which is a Google Analytics tool. You
can access it without having to be logged in to an account. Below in figure 5
you can see the tool and an example of how it’s filled in.

Figure 5 - Campaign URL Builder


Source: https://ga-dev-tools.appspot.com/campaign-url-builder/

19
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

“Website URL” is the target of the link and the “Campaign Source" is where the
link is and the source where the link is, in the First Derm’s blog, is here called
FD Blog. The “Campaign Medium” is filled in with the kind of medium used.
For firstderm.com we use “Desktop” for knowing it’s accessed thru a computer
and this is put in to the normal text of the post. When the translation is done
Firstderm.com uses AMP plugin in WordPress for how the article is displayed
on mobile [32]. In the editor of AMP it’s the same content but the UTM code’s
“Campaign Medium” is changed to “Mobile” to be able to track traffic from
where they accessed the link. The “Campaign Name” is the name of the article
the UTM code is used in. This is to be able to see which articles did well in traf-
fic and which didn’t. Below in figure 6 you see the next part of the Campaign
URL Builder, the builder has generated a campaign URL for you to use. This
link is copied and put in as the link source in all the links to the AI tool in the
blog post.

Figure 6 - Campaign URL Builder (link text)


Source: https://ga-dev-tools.appspot.com/campaign-url-builder/

4.1.6 SEO analysis


If after all of this the nice little Yoast SEO smiley has not turned green the anal-
ysis results are checked. Here you can find tips on what can be changed or fixed
to improve SEO. In figure 7 below you see when Yoast is happy with the SEO.
Even though it shows a green smiley there is still tips on what you can approve.
This is something you have to analyze yourself, what is possible to do and not?

20
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

Figure 7 - Yoast SEO plugin in WordPress part 2

4.1.7 Categories
The last step is to see that all the important categories for the post are chosen
and to always make the blog category priority.

4.2 Megasol design, development & SEO

First up was a start-up meeting with Megasol and back and forth emailing about
what is important to them and getting all the accesses, images, social links and
logo for the project. After follows the design process, then the programming
and SEO of the site and last, launching the site. De process is described below
divided into different areas or parts following the logic project flow as much as
possible.

4.2.1 Design process


Since this is not the main part of the project the design process will be de-
scribed in short. The process of designing have been mobile first and started out
with making wireframes of all the templates of the site in Adobe XD. Then fol-
lowed a wireframe for the desktop size, you can find it in appendix A. The
wireframes where sent for approval by the customer.

21
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

When the customer approved, the project moved on to build design on top of
the wireframes, also in Adobe XD. The design was planned out from their al-
ready existing logo and its colors, which is grey and yellow. You find the logo
below in figure 8.

Figure 8 - Megasol logo

After the approval the design process went to putting on design thru colors,
fonts and more, starting with the mobile size wireframe. You can see part of the
design below in figure 9. The full design is found in appendix B.

Figure 9 - Design mobile size

22
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

Next step was making the design for desktop size too and you can see part of it
below in figure 10. The full design of desktop size is found in appendix C. It
was sent for approval and when it was approved the development could begin.

Figure 10 - Design in desktop size

4.2.2 Responsive development


To both achieve good SEO and make the site user friendly, it’s developed as a
responsive site, working in different desktop sizes and mobile with a focus on
mobile first as earlier mentioned. To help check the responsive parts the inspect
tool of Chrome is used, to see how it looks in different sizes. To design for dif-
ferent sizes @media is used in the CSS. And to make it fully responsive the
sizes in-between are controlled with setting them to percent instead of a set size
to make them scale. Also hiding some things in mobile sizes, to make the site
easier to use, is applied for parts like the Hero. The Hero takes up a lot of the
page and has high rendering pictures that are not needed to display in a small
screen size as mobiles.

23
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

4.2.3 Site architecture


To make a good site architecture that is easy to use and navigate thru it’s im-
portant to think about what the users are interested in. Since this is a local busi-
ness it’s important to find where they exist and therefore the first link in the
menu is for the facilities so the user can see all of them and find where they are.
The addresses are also applied in the contact page in case the user goes directly
there. Then the other menu items are placed in-between these to make it easy
for the user to find other information they might need too. The other menu
items are the sunbeds they have, information about them and a FAQ for the
most frequently asked questions.

All the important information is also placed on the first page in case the user
dosen.t’ go straight to the menu. First there is a hero-slider to present pretty and
impactful images, as we all have heard, “a picture is worth a thousand words”.
Followed are the facilities, again to showcase where the business is located.
After this follows 2 informational widgets informing about the age limit law for
using solariums and information and a link to the application used to pay and
open the front door to the facilities. It also informs about cash payment possibil-
ities. After that comes a display of the sun beds, since this is not as important
they are placed further down in the page. At the bottom, in the footer, is dis-
played a message and contact information.

In the header you find the menu, a search field and social icons. The search
field is placed on the top of the page to make it even easier for users to find the
information they are searching for. In case they don’t see what they want for the
menu, or simply don’t have the energy to look, they can use the field to find
information on the site. Below in figure 11 you see the header of the site with
the logo, navigation, search area and social icons.

Figure 11 - Header

4.2.4 Page naming & URLs


Clear page naming is important to help the user understand what the page is
about, since users are more likely to click a URL that they understand [14].
Therefore it’s set in the settings page in WordPress for permalinks to use post
names for permalinks. Also all special letters in Swedish are set to a corre-
sponding letter, like ä to a, to make easier and functional links.

24
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

4.2.5 Schema markup


A schema markup for local business is put in the header, you can see it below in
the code section. It’s done with JSON-LD and put in the header as Google
recommends [25]. W follow this since Google is one of the most important
search engines, just as earlier mentioned.

<script type='application/ld+json'>
{
"@context": "http://schema.org",
"@type": "Organization",
"name": "Megasol",
"url": "http://www.megasol.nu",
"logo": "https://www.megasol.nu/logga_megasol/",
"description": "Drop-
in solarium på flera platser i Göteborg",
"contactPoint": {
"@type": "ContactPoint",
"email": "info@megasol.nu",
"contactType": "general"
},
"address":
[
{
"@type": "PostalAddress",
"name": "Megasol Amhult",
"streetAddress": "Amhults torg 3",
"addressLocality": "Göteborg",
"addressRegion": "Torslanda",
"postalCode": "42337",
"addressCountry": "SE"
},
{
"@type": "PostalAddress",
"name": "Megasol Bräcke",
"streetAddress": "Södra Vårvindsgatan 16",
"addressLocality": "Göteborg",
"addressRegion": "Göteborg",
"postalCode": "41877",
"addressCountry": "SE"
},
{
"@type": "PostalAddress",
"name": "Megasol Eklanda",
"streetAddress": "Eklandagatan 41 B",
"addressLocality": "Göteborg",
"addressRegion": "Göteborg",

25
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

"postalCode": "41877",
"addressCountry": "SE"
},
{
"@type": "PostalAddress",
"name": "Megasol Frigga",
"streetAddress": "Friggagatan 13 A",
"addressLocality": "Göteborg",
"addressRegion": "Göteborg",
"postalCode": "41101",
"addressCountry": "SE"
},
{
"@type": "PostalAddress",
"name": "Megasol Tolered",
"streetAddress": "Toleredsgatan 5",
"addressLocality": "Göteborg",
"addressRegion": "Göteborg",
"postalCode": "41727",
"addressCountry": "SE"
}
]
}
</script>

The different information we are sending to the search engines is type of busi-
ness, the name, URL, logo, a description and all the addresses for the different
facilities. There is ton of information that you can apply here but these are the
more important chosen for this site. A generator to get a basic code for local
schema markup was used from https://jsonld.com/json-ld-generator/. This was
then altered a bit after what was thought as a suitable schema for Megasol.

4.2.6 Structure & WordPress


The client wanted a site where they can go in and change text and images them-
selves, so WordPress is used as a CMS to provide this possibility. Also to be
able to build custom functions as well as being able to use plugins where there
is either no need to do your own function or when there is not enough time to
build a feature or function from scratch. The site is built with HTML, CSS, PHP
and some JS.

The site has a home page with different widgets and parts to show the rest for
the information on the site like the facilities, important information and the dif-
ferent sun beds they have. The site has a page for showing the different facili-
ties linking to pages for each facility to be able to read more about them and
where they are. The third page is a solarium page displaying the different sun

26
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

beds they have and linking to each page about the sun beds. After that there is a
page with simple information about the company to say a bit about who they
are. Next is a FAQ to help answer questions the user might have and last is the
contact page with a contact form, contact information and a map with all the
facilities.

4.2.7 Header & Footer


The logo of the page needs to be changeable but restricted to a certain size to fit
the design and to do this it needs to be set in the functions.php in the theme in
WordPress. The function megasol_custom_logo_setup sets the height, width
and the proportions of the logo.

The menu is made with the built in Wordpress function wp_nav_menu with
another function called register_my_menues to register top menu as the main-
menu thru an array. This will make it possible to arrange the menu in the UI in
WordPress, making it dynamically changeable.

The social icons and search bar are added thru making widgets. This is added to
the site in the functions.php as well with register_sidebar and an array in it giv-
ing the name, id and code snippets before and after. This function is inside the
widgets_area_init function, where all widgets for the site are put. And then the
add_action is used to add the widgets. Blew you find a code example for this in
the function.php. Then it is checked in the header.php if it exists and in that case
it is showed.

/* Widgets */
add_theme_support( 'widgets' );

function widgets_area_init(){
register_sidebar( array(
'name' => 'Widget Social Icons Top',
'id' => 'widget_social_top',
'before_widget' => '<div class="widget-socialIconstop">',
'after_widget' => '</div>',
'before_title' => '<span class="hidden">',
'after_title' => '</span>',
));
}

add_action( 'widgets_init', 'widgets_area_init' );

27
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

4.2.8 Solarium
The page-solarium.php is done as a template and is fairly simple page just dis-
playing a featured image and the content from the UI. The featured image is
showed using the_post_thumbnail function. The thumbnail is collected thru
featured image with the below code. This makes it possible to set a featured
image in the pages and when choosing the image size “solarium-thumb” it will
show the image with this size set.

/* Featured Image */
if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 111, 89, true );
add_image_size( 'facility-thumb', 960, 400, true);
add_image_size( 'solarium-thumb', 960, 540, true);
add_image_size( 'solarium-thumb-small', 150, 150, true);
}

For the solariums there is also a page to collect all the different solarium pages
and display them with the link going to each solarium using the page-
solarium.php template. The query is made to check for results of pages with that
specific template and with an if-statement that has a while loop within, looping
thru the information and then displaying it. See the code below.

<?php
wp_reset_query();
$query = new WP_Query( array(
'post_type' => 'any',
'meta_key' => '_wp_page_template',
'meta_value' => 'page-solarium.php',
'orderby' => 'post_title',
'order' => 'DESC'
) );

if ( $query->have_posts() ) {
while ( $query->have_posts() ) : $query->the_post(); // WP loop
?>
<div class="solariumsummery-content-item">
<div class="solariumsummery-content-image">
<a href="<?php the_permalink(); ?>" alt="Link to <?php th
e_title(); ?>">
<?php the_post_thumbnail('solarium-thumb-small'); ?>
</a>
</div>

28
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

<a href="<?php the_permalink(); ?>" alt="Link to <?php the_t


itle(); ?>">
<?php the_title(); ?>
</a>
</div>
<?php
endwhile; // end of the loop.
}
wp_reset_query();

4.2.9 Facilities
Since there are several facilities to display, the page-facility.php is made into a
template page to be able to loop thru the different pages made in the UI and see
which have this template and display them in the same way. You can find the
design and structure of this page in appendix C.

First a picture is showed of the facility behind the specialized heading and to do
this the the_post_thumbnail function is used in page-facility.php to display it as
featured image. This will make the image shown behind the heading changeable,
which will be really good since Megasol didn’t have images yet of their
facilities and dummy images are used for now.

Opening hour’s needs to be able to change for each facility and therefore this is
a custom meta box maid in the functions.php. This is a longer part of the code
since there is several parts to it since you need to display it on all the pages with
the facility template. You need to be able to save the input that the user writes
and this need to later be fetched to display on the page. To see the code from
functions.php, see appendix D. The function add_openinghours_meta adds the
Meta box in the UI o the pages with facility template. An if statement checks if
the function display_opening_information exists and if it doesn’t it creates it
and makes the UI displayed for the meta box. Then there is a function opening-
hours_save_metabox that saves the information from the input. This infor-
mation is then displayed on the facility if it is set. See the UI for this in figure
12 below.

Figure 12 - Opening hours in the UI of WordPress

29
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

In the function add_solarium_meta and display_solarium_information in


functions.php a Meta box for adding solariums is added in the page-facility
template. It is displayed as different checkboxes and images upload. Se the full
code for this in the functions.php in appendix D. Below in figure 13 you see
how it looks in the UI. This is checked in the page-facility.php if it is set and
displayed in that case. This will make the solarium connected to the specific
facility and only displayed if that solarium is added. These are then checked if
they are set in the page-facility.php and displayed if they are.

Figure 13 - Solarium in UI in Wordpress

Then there is a page-facilitysummery.php that checks for all the facilities added,
just like the page-solariumsummery checks for solariums.

4.2.10 Home page


In the front-page.php, which is the home page, the hero is the first part dis-
played. Since there are a lot of good plugins for this today, the plugin Slide An-
ything is used. Slide Anything is a responsive HTML slider which you only
need to use a short code to access. The images and how to display the slider are

30
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

set in the plugin. To put the slider on the home page the below code is used in
the front-page.php. The id refers to the specific slider that you have made.

<?php echo do_shortcode('[slide-anything id="36"]'); ?>

The same way as displaying the facilities and solariums in their summery pages
they are displayed on the home page.

4.2.11 FAQ
For a FAQ the plugin Ultimate FAQs is used which makes it easy for the com-
pany to add, edit and remove FAQs in the UI in WordPress. In this plugin you
get a dynamic design where you can expand and hide the answers to each ques-
tion, see figure 14 below.

Figure 14 - Ultimate FAQ plugin for WordPress

4.2.12 Contact
On the contact page there is another widget for social icons, the same as in the
header with just a difference in how it’s displayed. Then there is a contact form
and a map over all their facilities.

The contact form is made with the WordPress plugin Contact Form 7 and
placed on the page with a short code. The only thing altered is a piece of code
to make the loader symbol that is hidden and affects some CSS to display none,
purely for design purpose.

For the map there is another widget made and within it is the plugin WP Google
Maps. But even that this is simplified with the plugin you still need an API from
Google Maps. This is then put in the advanced settings of the plugin.

31
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

4.2.13 Search
For the search form there’s a template made called searchform.php that basical-
ly displays an input and a button that saves down the question asked as a search
query that is later fetched in the search.php which is the result page. The query
is made into an array that then loops thru the content of the site and displays the
results found. Beneath is also the search form again to be able to make another
search if the user didn’t find what they were looking for. See code from
search.php below.

<?php
global $query_string;
$query_args = explode("&", $query_string);
$search_query = array();

foreach($query_args as $key => $string) {


$query_split = explode("=", $string);
$search_query[$query_split[0]] = urldecode($query_split[1]);
} // foreach

$the_query = new WP_Query($search_query);


if ( $the_query->have_posts() ) :
?>
<!-- the loop -->
<ul>
<?php while ( $the_query->have_posts() ) : $the_query-
>the_post(); ?>
<li>
<a href="<?php the_permalink(); ?>" alt="<?php the_tit
le(); ?>"><?php the_title(); ?></a>
</li>
<?php endwhile; ?>
</ul>
<!-- end of the loop -->
<div class="main-content-searchform">
<p>Hittade du ej vad du sökte? Testa en ny sökning här:</p>
<?php get_search_form(); ?>
</div>

<?php wp_reset_postdata(); ?>

<?php else : ?>


<p><?php _e( 'Vi är ledsen men vi kunde inte hitta det du sökte
efter, gör gärna en ny sökning.' ); ?></p>
<div class="main-content-searchform">
<?php get_search_form(); ?>
</div>
<?php endif; ?>

32
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

4.2.14 Theme options


Theme options was added to set the Facebook and email in just one place in the
interface, making it change everywhere on the site. You find this code in the
appendix D from row 407 in functions.php.

4.2.15 404 errors


A 404 page was set up as 404.php with a message that the page was not found
and the search form to make it easy for the user to do a search after what they
are looking for.

4.2.16 Secure website & HTTPS


To add an extra layer of security the SSL at the webhost was activated and mak-
ing it to HTTPS.

4.2.17 Content & SEO


For the content on the site the same process described for firstderm.com is used.
The content is provided by Megasol and applied in the site. Although, an extra
check of the content is made with the process from the other project. Images are
also part of the content provided by Megasol. Additions with link, keywords
and Meta descriptions are done in the same way as for iDoc24.

33
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

5 Results
This part of the study aims to answer the questions stated in chapter 1 thru dif-
ferent analysis, technical tests as well as a user test as mentioned in chapter 3.
The results will be divided into each project and presented below respective
heading.

5.1 iDoc24 and firstderm.com results


To be able to find results about the translations done for iDoc24’s blog
firstderm.com SEO analysis needs to be done. They use Google Analytics al-
ready and have sent over results from 5 different articles translated that will be
analyzed here to answer some of the questions from chapter 1.4. A table with
the information from Google Analytics of the 5 articles is presented below. To
see the full information from the Google Analytics sheet sent by iDoc24, check
appendix E.

Article Path Page Unique Time Bounce Rate % Exit


Views Page on Page
Views

Hudsprickor-
spruckna- - - - - -
fingertoppar

Basalcellscancer-
basiloma-bilder- 20 19 00:04:34 69,23% 60.00%
cancer-bilder

Coronavirus-
4,529 4,357 00:02:05 97,03% 95,03%
tecken-pa-huden

Coronavirus-
3,164 3,078 00:02:26 96.71% 96.14%
hud-tar

Basta-
behandlingen-
aldersvartor- 14 14 00:00:50 100% 85.71%
seborroisk-
keratos-ansiktet

34
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

To be able to analyze the results you need to understand what the table is show-
ing. Page views are as simple as it sounds, but the unique page view is as im-
portant to compare with since one user can have several sessions logged. Here
is where you see the actual number of people that visited the page. And the col-
umn for time on page is the average time the visitor spent on the page, all part
of seeing the results.

Bounce rate is a way of measuring how many people visit the page and bounce
out straight away, meaning they leave directly and before performing any kind
of action on the page [29]. The exit part of the table is the amount of users that
visited that page last before ending a session. More analytics of posts would be
good and give a good amount of data to analyze, but since there has only been a
month or less there is no more result to show at this stage.

5.1.1 Q2 - How is Yoast SEO used on FirstDerm.com?


One of the questions to answer is Q2, how Yoast SEO is used for the articles on
firstderm.com. This is answered within the implementation part but we will
here summarize it.

Firstderm.com has a payed version of the Yoast SEO tool making it possible to
use the tool for more specifications like having several keywords instead of just
one and in figure 4 and 7 under chapter 4 you can see the Yoast SEO tool and it
is used in two different ways. The first is to be able to specify the keyword or
keywords chosen for the article as well as synonyms, SEO title and Meta de-
scription, all parts of affecting the SEO. The second part is that the tool analyz-
es more than just these parts like the text, URL, use of the keyword or key-
words and more, and hand out recommendations. It then shows you either red,
yellow or green color to tell you what level the SEO of the post is. In the trans-
lations the focus is on getting the green symbol for the SEO tab. It is used dur-
ing the whole process of the translation to optimize the post.

The rest of the questions from chapter 1 will be discussed in the conclusion in
chapter 6.

5.2 Megasol - testing & results


In the project for Megasol there is not yet any analytics to check so other kind
of testing is done here to find results after launching the site. The different tests
and results are listed below in respective heading.

If you want to check the website you can find the on www.megasol.nu.

35
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

5.2.1 Structured data testing


Structured data testing is checking the Schema markup for your site and it can
be done with Googles free testing tool for structured data that you find here:
https://search.google.com/structured-data/testing-tool/. You go to the link, enter
your domain URL and run the test.

The site validated and the tool shows what information is collected from the
schema markup on your site, the result is showed in figure 15 and 16 below.
Figure 16 doesn’t show the whole part but the rest is just displaying the other
addresses in the same way.

Figure 15 - Googles testing tool for schema markup

36
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

Figure 16 - Googles testing tool for schema markup 2:nd part

5.2.2 Mobile Friendly


Google have another useful and free tool for checking if the site is adjusted for
mobile sized screens; https://search.google.com/test/mobile-friendly. When the
test was run it validated as a mobile-friendly site but with a warning indicating
that the tool could not read the whole page, see below in figure 17.

Figure 17 - Googles Mobile Friendly Test Tool

In the specification of the test it says that the resource https://www.facebook.co


m/tr/ didn’t load.

37
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

5.2.3 Siteliner & Duplicated Content


Siteliner is a free tool for checking for duplicated content on your site, you find
the tool here: https://www.siteliner.com/. You can also use this tool to check for
broken links, page load time, number of words on the pages, internal links and
much more. When running this test it showed that the duplicated content on the
site is 30% and below you can see a table of all the duplicated content on the
site Megasol.nu.

Hyperlink URL Title Match Match Per- Match Page


Words centage Pages Power
https://www.megasol.nu/ (home page) Megasol 153 34% 3 74

https://www.megasol.nu/vara-solarium- vara-solarium- Megasol 29 17% 3 74


goteborg/amhult-solarium/ goteborg/amhult-
solarium/
https://www.megasol.nu/vara-solarium- vara-solarium- Megasol 31 18% 3 75
goteborg/bracke-solarium/ goteborg/bracke-
solarium/
https://www.megasol.nu/vara-solarium- vara-solarium- Megasol 31 18% 4 74
goteborg/eklanda-solarium/ goteborg/eklanda-
solarium/
https://www.megasol.nu/vara-solarium- vara-solarium- Megasol 30 18% 1 74
goteborg/frigga-solarium/ goteborg/frigga-
solarium/
https://www.megasol.nu/vara-solarium- vara-solarium- Megasol 31 19% 3 74
goteborg/tolered-solarium/ goteborg/tolered-
solarium/
https://www.megasol.nu/faq/ faq/ Megasol 762 84% 11 75

https://www.megasol.nu/ufaqs/solkort- ufaqs/solkort-och- Megasol 117 38% 1 28


och-bonus/ bonus/
https://www.megasol.nu/ufaqs/betala/ ufaqs/betala/ Megasol 187 49% 2 13

https://www.megasol.nu/ufaqs/hur- ufaqs/hur-laddar- Megasol 37 23% 1 15


laddar-lag-ner-appen-flexysun/ lag-ner-appen-
flexysun/
https://www.megasol.nu/ufaqs/hur-hittar- ufaqs/hur-hittar-jag/ Megasol 18 12% 1 13
jag/
https://www.megasol.nu/ufaqs/oppnar- ufaqs/oppnar- Megasol 42 25% 1 13
dorren/ dorren/
https://www.megasol.nu/ufaqs/kopa- ufaqs/kopa-solkort/ Megasol 58 31% 1 13
solkort/
https://www.megasol.nu/ufaqs/lange-kan- ufaqs/lange-kan- Megasol 73 37% 1 13
jag-sola/ jag-sola/
https://www.megasol.nu/ufaqs/vad- ufaqs/vad-kostar- Megasol 40 24% 1 13
kostar-det/ det/
https://www.megasol.nu/ufaqs/vilka- ufaqs/vilka- Megasol 28 18% 1 13
oppettider-har-ni/ oppettider-har-ni/
https://www.megasol.nu/ufaqs/vilka- ufaqs/vilka- Megasol 29 19% 1 13
solsangar-finns/ solsangar-finns/

5.2.4 W3C Markup Validation Service


W3C’s validator tool is another free tool to use for validating your code and this
has been used during the development. You find the tool here:
https://validator.w3.org/. All errors and warnings besides 4 errors and 16 warn-
ings have been corrected. The errors and warnings left are regarding plugins
used in the project.

38
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

5.2.5 UX Testing with Zoom


The last test conducted is a User Experience (UX) test in form of a moderated
user test in remote. This way of testing is when you observe the user while they
perform tasks, like User Peek says, “moderated user testing is when the user
completes set tasks on a product or service, whilst being observed by a re-
searcher (moderator) in real time” [34]. Now being Covid-19 times the testing
has been done remotely using Zoom as a video conference tool for this. All the
users connected their webcam and audio in Zoom, with one exception of one
user who didn’t have a webcam, and was asked to share their screen. In this
way it was possible to both see the user when performing the tasks as well as
see how they where clicking and scrolling on the site during the test. All the
sessions was recorded to make it possible to go thru them after the test for fur-
ther analyzing.

The test was done with 5 subjects and took from 03.44 to 08.08 minutes to exe-
cute after setting everything up. Three of the test subjects where men and two
where women, from the ages 27 to 45 years and all living in the local area
where the business exists besides 1. In the test they were given different tasks to
perform on the website as well as some questions to answer. You can see the
questions and tasks with the test subjects answers and responses presented in
the table below.

Test Test Test Test Test


Question (Q) subject 1 subject 2 subject 3 subject 4 subject 5

/ Task (T) Female Male Female Male Johan Wilén


27 years 45 years 34 years 38 years 40 years

Q1 – What is Solarium in Solarium to sun- A business that has About a solarium It looks like very
the website Gothenburg. bath. solariums that you business, to sun- cool solariums,
about? / What (looked at the home can book and some bath in, maybe when I scroll it
do they offer? page). different solarium that you can buy looks like you can
models. I guess that solariums or go there for sun-
you can sunbath information about bathing.
there. them.

T1 – Figure (Found thru the (Clicks the facility (hovers the menu (Goes directly to (Scrolls on the
out where they facilities section on menu item and lists item facilities and the menu item for home page and
are located. the home page). the facilities). sees all the facilities the facilities and finds the facility
and clicks one clicks it). section).
after).

T2 – You want (Scrolled down (Checks the page (Clicks on one of (Goes directly to (Scrolls down the
to use their home page and read for one item of the the other facilities the menu item home page and
ser- in the payment menu item sunbeds first, goes to about FAQ and clicks finds the payment
vice/product, widget). and then hover Megasol, then the q “How do I widget).
figure out how several menu items contacts, then clicks pay?”).
you pay for it. back and forth in back to one facility
the main menu and clicks a sunbed
again, then clicks link and then clicks
the search field in FAQ menu item

39
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

the header and and last clicks q


search “betala” and “how do I pay”).
finds the FAQ page
“How do I pay”).

T3 – Figure (Scrolls down the (Goes straight to (Goes back to a (Goes to the menu (Scrolls down
out what home page, goes facilities in the facility again). item contact, then more then goes to
opening hours back to the facility menu and go in to to facilities and contact and then to
they have. section and clicks the first facility, the clicks one of the facilities and
the first facility & next and the next them). reads the footer
finds it on the facili- and so on). and then clicks one
ty page for Amhult). facility).

Q2 – Was I found it extremely Payments, I had to I think that pay- You could think Opening hours was
anything easy to find every- search for it because ments should be, or that you would be not the first I saw
difficult to thing. it wasn’t clear it would be logic for able to find the but where it was
find & in that where to find it. me if there was a opening hours were pretty easy. If
case what? Search is the last link on every facili- under contact. it was solariums
thing you should ty page. FAQ is the for buying or for
have to do. last place I look. sunbathing was not
super clear straight
away on the site,
but when u
scrolled you un-
derstood it.

Q3 – Do you Yes, they offer Yes, they offer to Yes, there is a little Yes, different Yes, you can go
understand solariums for sun- sunbath in solari- risk though I could solarium facilities. there to sunbath in
now what they bathing to get ums. think that they sell solariums.
are offering? brown. solariums, but since
they had several
facilities I thought it
was for sunbathing.

Q4 – Did the I think it is good but No it wasn’t hard, I think it was logic. Logic. It was logic but not
navigation of I am missing some relatively logic the opening hours,
the site feel text of presentation besides the payment I want them more
logic or was it on the home page. that I couldn’t find easily.
hard to un- It’s hard to know easily.
derstand? where you ended
up, it is a anony-
mously first page.
(Talking about the
hero slider).

Q5 – Was it It was easy, very That was super Easy. Easy. That felt easy.
easy or hard concrete. easy.
to read the
text on the
site?

Q6 – What do It is nice, but it Very simple, clear I like the facilities, It works like a It looks really
you thing could be more and the sunbeds they feel nice that normal website futuristic, but I can
about the spacy, less budget. I look very fresh. they are very flashy but not really for a ask myself why
colors and like the slideshow Colors and fonts are and uniform but wide screen. you go sunbathing
design of the and the colors too good. It is very clear differ from the rest in a solarium when
site? simple. on my big screen. of the page at the it’s so beautiful
same time as they around (joking
are cohesive with about one picture
colors and more. of the sunbed that

40
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

is on a beach).

Q7 – Is there The image here is Don’t think there is Only the payment. No, it’s so easy. I might not like the
something very blocky or a bit more needed since Because what you boxes (referring to
that you think blurred. (the image it’s just a few facili- want to know is the information
should be in the payment ties. opening hours, widgets on the
different and widget on the home address and how home page), in the
in that case page). you pay. design, it’s a bit
what? flat.

Q8 – Do you When I was 18, not No it’s been a really No, I have never No. No.
usually use anymore. long time, I did it tried but I want to!
solariums? sometimes when I
was younger.

5.2.6 Q2 - How is Yoast SEO used on Megasol.nu?


Yoast SEO is similarly used on megasol.nu as on firstderm.com but with the
difference that they don’t have the premium version but the free limited one.
The only difference for Megasol because of this is that it’s not possible to put in
several keywords or synonyms. There are more differences between the free
and premium versions but in the way it is used for these sites, this is the only
difference.

41
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

6 Conclusions
SEO is such a large area that it is really hard to get down in just one study and it
has only been possible to scrape the surface even though it would have been
grate to understand it on a deeper level.

6.1 iDoc24 – Analysing Google Analytics Data


The information collected from Google Analytics differs a lot between the dif-
ferent posts from no data to over 4000 page views. With an average time on
page from not even a minute to almost 5 minutes, a Bounce rate from ~96% to a
100% and an exit rate from 60% to ~96%. How do you interpret this data?

To understand the page views you also have to look at the unique page views
since a single user can be responsible for several sessions [29]. Some of the
articles have a really low amount of visits for a blog and two of them have at
least a few thousand unique visits, but is this a lot? It will be really hard to say
for sure since it takes a long time to get SEO results and it’s really hard to know
exactly how long it can take [35]. There are a lot of things on your site affecting
how long it will take to see SEO results but it could take up to 6 months to get
results of your SEO while some parts can give results in just a few weeks [35].
So is a month enough time to analyse the SEO of the translated posts? Accord-
ing to Web FX it normally takes 4-6 months to see organic traffic to your site
[36]. So 1 month is hardly a good time for analysing the blog translations, but
since it’s not possible to wait longer it will have to be an open-minded analyse.
But it makes it quite impossible to say if the amount of page visits are good or
bad, but we can for sure say that some of the articles did way better here.

The time on page differs too and it’s very easy to say that it is not good when a
user doesn’t even stay 1 minute on the page. 4 minutes is definitely better, but is
it enough to read a blog post? It might be if the post is not really long because
then it would be impossible to read in this time.

The main goal for iDoc24 is also that people use their AI tool for scanning for
dermatology problems, so if people leave the page fast would not be good. Ac-
cording to Search Engine Journal, a normal bounce rate is between 40-60% [29].
Here in these posts it’s not within those numbers, mostly not even close, indi-
cating that the user might not find the page relevant or functional [29]. We can-
not trust these results yet but if it keeps on being the same, something needs to
be changed. Maybe the keywords where no good; maybe the site doesn’t seem
trustworthy or something else with the content. Here the exit rate is also im-
portant, here it’s high on almost every one which means that this is the last page
the user visited before exiting the site. Since the goal is to get the visitors to use
the AI tool it is not good when it is high. The post on cancer seems to have done
a bit better here. So it would be worth comparing what was done differently

42
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

between that one and the others. But since it’s only a month this numbers might
change a lot and no conclusion from this is possible at this moment.

To answer the question Q1, Q3 and Q4 probably everything is important for


their SEO but the focus should really be on good keyword research, good meta
descriptions and making sure the content gives value to the user. If this bounce
rate keeps up it might be for bad content or just faulty marketing of the content
with keywords or descriptions. You really want a lot of traffic but it makes no
point if the visitors won’t stay, if they don’t find it valuable. I strongly believe
that the keyword research could be done better since only a little has been done
within this project and from looking at the original posts it doesn’t always
seems to be thought thru but seems to rather be guessed. Sometimes the texts
are not approved but the Yoast SEO and rarely are they green, more often yel-
low. Time to optimize how the posts are written would also make it possible to
make the translations better. When translating is limited to the original post;
small things are possible to change but not the big picture.

6.2 Megasol – The analysis of the tests


A lot of different testing was done for megasol.nu, but there are many more
tests that could have been done and that are wanted if there were more time
within the project. One test that sadly took too long to validate the website has
therefore been cancelled. If there were more time, this would be the first thing
to do and it is yet another testing tool from Google called Google Search Con-
sole. This is, like all the other testing tools, a free one. This tool can be used for
checking indexing status and optimize visibility of your website.

One of the first things was fixing issues from the W3C validation. Not all was
fixed, this is due to all the remaining errors and warnings were about plugins
and not part of our WordPress theme that where developed. It’s possible to ar-
gue that maybe other plugins should be used since they don’t validate but this is
a bit outside of the scope of this study.

The structured data test is used to see that your schema markup shows what you
want too Google and other search engines using JSON-LD. This validated to no
errors which is really good, but that doesn’t mean that it’s the best schema you
can have. So what is a good schema? First off you need to think about what
your business is about, in this case it’s a local business and the most important
part is to get local traffic into the site. Therefore a schema with local infor-
mation was created having all the addresses for the facilities, contact infor-
mation and general business information. There are though more you can put in
for this but before doing so it’s important to understand schema markup and I
decided to use a rather basic one to begin with, one to build upon in the future.
One thing I have already seen is that it is possible to add geo coordinates for the
addresses too, this would have taken more time but are wanted in future work
on the site.

43
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

The mobile friendly test seems to have worked out really good, letting us know
the site is mobile friendly. But there was one warning in the test telling us that it
couldn’t read one resource. This was https://www.facebook.com/tr/ and this is a
link which I don’t know where it can be. It is something that future develop-
ment should conduct a troubleshoot to figure out where this source is and how
to fix it.

The test with Siteliner showed that it was as much as 30% duplicated content on
the site. This is more than 77% of other websites according to the test on Site-
liner, which also say that the median for other sites are just 19%. This almost
sounds outrages and is definitely something that needs to be fixed when contin-
uing working on the site. Moz says “There are plenty of legitimate reasons for
internal or cross-domain duplicate content, so Google encourages the use of
a rel=canonical tag to point to the original version of the web content” [14]. So
this should be an easy fix to make search engines understand that it is a legiti-
mate duplicated page. This tag is put inside of the head tag as a link as you can
see in the code below.

<link rel="canonical" href="https://www.megasol.nu/theoriginalvers


ion" />

Something to add is that Google doesn’t give penalties for duplicated content,
but they remove duplicated content from their search results [14]. So for this
reason it is still really important to fix so that Google understands your dupli-
cated content. This is another recommendation for further work on the site.

6.2.1 Megasol – UX test analysis


The UX test was presented with tasks to test the logical of the website and un-
derstand how users navigate to find the most important information. What
Megasol finds most important, the usual questions they get, is about how you
pay and where they are. This is why the test subjects were given instructions to
find where they are located and how you pay for their service. They were also
given the task to find the opening hours and asked about things like what the
site is about, how the design was and if they thought something should be dif-
ferent. It seemed like a lot of stuff was easy to navigate, it was easy to find
where they are located, none of the test subjects had any problems whit this part.

Something we can say from the test is that for some it was easy to find the
payment information and fore some it was hard. This is one of the most fre-
quently asked questions Megasol has and what they have said from the begin-
ning is one of the most important things to be clear on their site. So having it in
a widget on the home page you have to scroll down to find it or the FAQ. This
might not be the best way since some customers have a hard time finding this.
One solution could be to have a dedicated page for payment so it’s showed in

44
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

the navigation, or perhaps to have it as a menu item under the facilities. Another
option could be to and/or have it higher up on the home page. This is something
that is really important for your users to understand your site and it might help
them to stay on your site longer or at least stay until they found what they are
looking for. You don’t want visitors to leave the page for not finding the info.
Another thing was the opening hours which some of the test subjects had a hard
time to find and wanted on a more obvious page. This is good on the facilities
page but during the test some tried to find the information in different pages,
one being the contact page. Probably it could be good practice to have it there
as well, but how to do this is something that’s needed to be well thought out. All
the places but one, Amhult, has the same opening hours and how to display this
difference in the contact page would be crucial to not just confuse the user more.

Some of the users also find it a bit hard to know if the site was about selling
solariums or if it was a drop-in solarium facility offering sunbathing in their
sunbeds. I think this could be a really easy fix that is already recommended to
the costumer from the beginning, which they turned down, to put a short
presentation in the hero-slider. The slider probably makes no sense to have
more than to block important content as it is now. Now it only shows beautiful
pictures of the sun beds, making it really anonymous instead of telling the user
straight away what the site is about. From doing this testing it will be easier to
recommend this once again to the costumer.

When it came to design, text and those parts, the users seemed generally happy,
just a few personal comments about things they disliked where made and since
it’s only 5 users it doesn’t give enough information to know what to really
change. To know more about how pleasing the design is there should be another
UX test whit a lot more test subjects to be able to get a better picture of this. It
would also have been better for this test to have more subjects but due to the
time span of this study as well as the special circumstances with Covid-19 a
limited test was all that was possible within the time. To answer Q7, if the site
is user friendly, in general yes, but there seems to be more to do to get it more
user friendly. To make it a bit easier to find all the information and to conduct
more UX testing to learn more about the design part of the site, what can be
improved here. This is well connected to Q8, if it is easy to find information on
the site, as well, they are able to find some of the information and some not, and
this is a fix needed to be done.

6.2.2 Megasol – Local SEO


I believe that the Q5 and Q6 are connected; the most important part of the SEO
for Megasol is local. This doesn’t mean though that other parts of SEO is not
important, it’s the combination of everything that makes good SEO. And this
study has showed that for good local SEO you should adjust your Schema
Markup for local business. You should also have Google my business to display
your local information better on Google, this being outside of the developer part,
it is still important. And a lot of the other SEO enhances the local part and is as
needed for making good local SEO too.

45
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

This area is probably a lot bigger than just this but in the scope of this study
there is simply not more time. So to be able to answer this question better it
would be recommended to do a dedicated project for just this part.

It was wanted to fix the 301 redirects too for this project but sadly no time to do
it, so this is yet another recommendation for further development.

6.3 SEO & Ethics


So what are the ethics when working with SEO? There is a funny way of dis-
cussing this in the ways of hats, you have white hat, grey hat and black hat SEO.
Each indicate different ways of using SEO, white hat being SEO in line with
terms and conditions of search engines [37], black hat violating it [38] and grey
hat being riskier than white hat but that might pay off or might not [39].

White hat, following the terms and conditions, is a good way of being ethical
when working with SEO but maybe there are more ways of getting better rank-
ing. Black SEO could increase your page ranking but it could end up in getting
your site banned from search engines [38]. So if you will end up being banned,
will it be worth even trying to use this, basically cheating your way to better
ranking? Probably not, since the traffic itself doesn’t matter at all if the users
don’t find your site having any value, why have traffic that will not give you
any costumers? Some of black hat SEO is keyword stuffing, cloaking and link
manipulation, some of what we have mentioned are bad practise earlier in this
study. Good ethics as well as optimizing your site for the right traffic is proba-
bly the better way to go with SEO. Have the focus on the right things to do and
you will not need all that dead weight traffic anyways, you will have the right
traffic actually giving you value as well.

So what about grey hat SEO? This is something that always changes; something
that is grey hat now might be black hat next year since search engines always
are involving their way of crawling and understanding websites [39]. So I am
going to leave this part to you. If something isn’t clearly white hat nor black hat
you have to think if it’s worth the risk or not. My level is not an SEO expert and
therefore I cannot say if it is worth it, but personally I would not take such a
risk until I possess more knowledge of this huge area of SEO.

6.4 Summing it up
Since SEO is such a large area it’s impossible to do anything more than just
scratch the surface here. There are probable a 100 more things you can do. My
recommendation to myself and anyone interested in learning more about this is
time, study and trial and error. We learn by mistakes we do and we gain so
much from understanding SEO even as a developer, you can never know too
much but you can definitely know too little. SEO is a work never fully finished.

46
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

References

[1] 10 Internet Statistics Every Marketer Should Know in 2020 [Infographic]


[blog on the Internet]. Oberlo; 2019 Nov 08- . [cited 2020 April 04].
Available from: https://www.oberlo.com/blog/internet-statistics

[2] Moz, What is SEO? [Internet]. Moz; [date unknown] [cited 2020 May
05]. Available from: https://moz.com/learn/seo/what-is-seo

[3] Search Enterprise AI, Artifical intelligence. [Internet]. Search enterprise


AI; 2020 May- . [cited 2020 May 14]. Available from:
https://searchenterpriseai.techtarget.com/definition/AI-Artificial-
Intelligence

[4] How-To Geek, What Is an API? [Internet]. How-To Geek; 2018 March
21- . [cited 2020 May 14]. Available from:
https://www.howtogeek.com/343877/what-is-an-api/

[5] pwc, Experience is everything. Get it right. [Internet]. pwc; 2018- . [cit-
ed 2020 April 04]. Available from:
https://www.pwc.com/us/en/services/consulting/library/consumer-
intelligence-series/future-of-customer-experience.html

[6] Kinsta, What is a Content Management System (CMS)? [Internet].


Kinsta; 2020 April 13- . [cited 2020 May 14]. Available from:
https://kinsta.com/knowledgebase/content-management-system/

[7] Search Engine Land, What Is SEO / Search Engine Optimization? [In-
ternet]. Search Engine Land; [date unknown] [cited 2020 May 05].
Available from: https://searchengineland.com/guide/what-is-seo

[8] Moz, What is SEO? [Internet]. Moz; [date unknown] [cited 2020 May
05]. Available from: https://moz.com/learn/seo/what-is-seo. Figure 2,
Weighting of Thematic Clusters of Ranking Factors in Google

[9] Kelsey, T. Introduction to Search Engine Optimization: A Guide for


Absolute Beginners. 1 ed. Berkeley, CA: Apress; 2017.

[10] What is SEO? The Ultimate Guide for 2020 [Gotch SEO] [blog on the
Internet]. Gotch SEO, 2019 March 23- . [cited 2020-05-05]. Available
from: https://www.gotchseo.com/what-is-seo/

47
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

[11] What is SEO? The Ultimate Guide for 2020 [Gotch SEO] [blog on the
Internet]. Gotch SEO, 2019 March 23- . [cited 2020-05-05]. Available
from: https://www.gotchseo.com/what-is-seo/. Figure 1, StatCount
Global Stats, Search Engine Market Share Worldwide from Feb 2018 –
Feb 2019.

[12] Moz Pro, How search engines work: crawling, indexing, and ranking.
[Internet]. Moz Pro, [Date unknown] [cited 2020 May 05]. Available
from: https://moz.com/beginners-guide-to-seo/how-search-engines-
operate

[13] Search Engine Journal, SEO Fundamentals: Your Guide to SEO Success
Factors. [Internet]. Search Engine Journal; 2018 May 18- . [cited 2020-
05-06]. Available from: https://www.searchenginejournal.com/seo-
guide/seo-success-factors/

[14] Moz Pro, On-page SEO. [Internet]. Moz Pro, [Date unknown] [cited
2020 May 06]. Available from: https://moz.com/beginners-guide-to-
seo/on-page-seo

[15] What is UTM Code and How to use it for Traffic Analysis. [Wei-
dertGroup] [blog on the Internet]. Weidert Group, 2019 October 21- .
[cited 2020 May 07]. Available from:
https://www.weidert.com/blog/what-is-utm-code

[16] HubSpot, How to Create UTM Codes to Track Your URLs [UTM
Builder]. [Internet]. Hubspot, [Date unknown] [cited 2020 May 07].
Available from: https://blog.hubspot.com/marketing/what-are-utm-
tracking-codes-ht

[17] UTM Tracking: What are UTM codes and How Do I Use Them? [Agen-
cy Analytics] [blog on the internet]. Agency Analytics, 2017 January 13-
. [cited 2020-05-07]. Available from:
https://agencyanalytics.com/blog/utm-tracking

[18] Moz, Keyword Research. [Internet]. Moz, [Date unknown] [cited 2020-
05-08]. Available from: https://moz.com/beginners-guide-to-
seo/keyword-research

[19] Shout me loud, Keyword Research for SEO – The Ultimate Guide For
Beginners (2020). [Internet]. Shout me loud; 2020 [cited 2020 May 08].
Available from: https://www.shoutmeloud.com/keyword-research.html

[20] Shout me loud, How To Write SEO Friendly Content (Beginner To Ad-
vanced). [Internet]. Shout me loud; 2019 [cited 2020 May 08]. Available
from: https://www.shoutmeloud.com/write-seo-content.html

[21] HTTP vs. HTTPS: How Your Decision Impacts SEO. [blog on the inter-
net]. Gotch SEO; 2019 April 18- . [cited 2020 May 19]. Available from:
https://www.gotchseo.com/http-vs-https/

48
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

[22] Moz Pro, Technical SEO. [Internet]. Moz Pro, [Date unknown] [cited
2020 May 19]. Available from: https://moz.com/beginners-guide-to-
seo/technical-seo

[23] Search Engine Journal, Top 7 Ranking Signals: What REALLY Matters
in 2020. [Internet]. Search Engine Journal; 2018 [cited 2020 May 19].
Available from: https://www.searchenginejournal.com/seo-
guide/ranking-signals/

[24] A JSON-LD Implementation Guide. [blog on the Internet]. Portent;


2016 June 08- . [cited 2020 May 20]. Available from:
https://www.portent.com/blog/seo/json-ld-implementation-guide.htm

[25] A Guide to JSON-LD for Beginners. [blog on the Internet]. Moz; 2017
Feb 09- . [cited 2020 May 20] Available from:
https://moz.com/blog/json-ld-for-beginners

[26] Gotch SEO, 7 Awesome 404 Error Pages from The World’s Most Popu-
lar Websites. [Internet]. Gotch SEO; 2019 [cited 2020 May 20]. Availa-
ble from: https://www.gotchseo.com/404-error/

[27] Gotch SEO, 301 Redirects: The Ultimate Guide for 2020. [Internet].
Gotch SEO; 2020 Jan 11 [cited 2020 May 20]. Available from:
https://www.gotchseo.com/301-redirects/

[28] Medium, 3 Reasons Why Google My Business Matters. [Internet]. Me-


dium; 2018 April 19 [cited 2020 May 20]. Available from:
https://medium.com/@ASAPmaps/3-reasons-why-google-my-business-
matters-ddabbc2d3b07

[29] Search Engine Journal, The 9 Most Important SEO KPIs You Should Be
Tracking. [Internet]. Search Enginge Journal; 2018 Sep 14 [cited 2020-
05-27]. Available from: https://www.searchenginejournal.com/seo-
guide/top-seo-kpis/

[30] Moz, Tracking SEO Performance. [internet]. Moz, [Date uknown] [cited
2020 May 27]. Available from: https://moz.com/beginners-guide-to-
seo/measuring-and-tracking-success

[31] Semrush, Keyword Magic Tool. [Internet]. Semrush [Date unknown]


[cited 2020-05-08]. Available from:
https://www.semrush.com/analytics/keywordmagic/

[32] WordPress.org, AMP. [Internet]. WordPress.org, [Date unknown] [cited


2020 May 16]. Available from: https://sv.wordpress.org/plugins/amp/

[33] Complete guide to mobile first design. [blog on the Internet]. Justinmind;
2018 Jan 22- . [cited 2020 May 24]. Available from:
https://www.justinmind.com/blog/complete-guide-to-mobile-first-
design/

49
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

[34] User Experience Testing: Definition, How To, Tools and Methods. [blog
on the Internet]. User peek, [Date unknown] [cited 2020 May 28].
Available from: https://userpeek.com/blog/user-experience-testing/#tab-
con-17

[35] Bear Fox Marketing, How Long Does SEO Take? A Complete Over-
view of Your SEO Timeline. [Internet] Bear Fox Marketing; 2019 Oct
24- . [cited 2020 May 28]. Available from:
https://www.bearfoxmarketing.com/how-long-does-seo-take-a-
complete-overview-of-your-seo-timeline/

[36] Web FX, How Long Does It Take To See the Results of SEO? [Internet]
Web FX, [Date unknown] [cited 2020 May 28]. Available from:
https://www.webfx.com/internet-marketing/how-long-does-it-take-to-
see-seo-results.html

[37] Wordstream, White Hat SEO: How to Rank Without Breaking the Rules.
[Internet] Wordstream, [Date unknown] [cited 2020 May 29]. Available
from: https://www.wordstream.com/white-hat-seo

[38] Wordstream, What Is Black Hat SEO? [Internet] Wordstream, [Date


unknown] [cited 2020 May 29]. Available from:
https://www.wordstream.com/black-hat-seo

[39] Wordstream, Gray Hat SEO: How to Improve Your Search Results
Without Breaking The Rules. [Internet] Wordstream, [Date unknown]
[cited 2020 May 29]. Available from:
https://www.wordstream.com/gray-hat-seo

50
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

Appendix A: Wireframe desktop


for Megasol.nu

Home

51
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

52
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

Facility page

53
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

Page

54
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

FAQ

55
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

Contact

56
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

Appendix B: Design mobile for


Megasol.nu
Home

57
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

58
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

Facility page

59
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

Page & FAQ

60
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

Contact

61
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

Appendix C: Design desktop for


Megasol.nu
Home

62
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

63
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

Facility Page

64
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

Page

65
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

FAQ

66
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

Contact

67
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

Appendix D: Functions.php

68
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

69
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

70
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

71
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

72
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

73
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

74
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

75
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

76
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

77
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

78
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

79
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

80
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

81
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

82
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

Appendix E – Google Analytics


Results from firstderm.com

83
SEO for web developers – understanding, implementing & testing
Sanna Bergström 2010-07-05

84

You might also like