Websites
Bootstrap (a source toolkit/app) =
Most used free open-source front-end-framework
Advantages:
Structure
• Responsive
Front-end code • Cross browser compatibility
On the web, front-end code tells your browser what to do. • Short development time
The opposite of front-end code is back-end code. There are 3 different • Flexible & free
information: Disadvantages
• Unnecessary code included
HTML (Hypertext Markup Language): creates the basic structure and • All bootstrap pages look similar
content of a webpage
Internal structure of typical website
• Headings, paragraphs, lists
Sitemaps are important for
CSS (Cascading Style Sheets): design of a webpage, where everything is Google because it often
placed and how it looks happens that a site consists of
several web pages that are not
• Font,color,backgroundcolor,border... linked to each other
see: "poor internal linking"
JavaScript: defines the interactive elements of a webpage that helps to
engage users Internal linking = An internal link
is a link from one page to
• Dynamic display, widgets, user interaction, click to open a popup another page on the same
domain.
Optimized for different screen sizes. Holy trinity of responsiveness:
• Desktop
• Tablet
• Smartphone
,Typical pages • Search result page
o This is the page where you end up when you search for
something on a website. Think of the page you end up on
when you type "Gent" on the HLN website.
• Log in page, Account page, Account settings page
o All three of these pages are about the pages that are used
by people who have an account on a certain website. It is
important that visitors create an account because it allows
websites to get a better idea of how the user arrived at the
website.
Design
3 pillars of good design:
• Accessibility (user friendly)
• Home page o Designing for users with disabilities
o The home page of a website is the home page of a website. § Large clickable actions
This is, as it were, the gateway of the website from where § Design for keyboard or speech use only
you can reach all parts of the site. § Design with mobile and touchscreen in mind
• Contact page o Designing for users with low vision
o This is the web page where you can get in touch with the § Good colour contrasts, linear logical layout
owner of the website. o Designing for users on the autistic spectrum
• About page § Simple colleurs, plain English, simple sentences
o It is rather more important for potential employees. and plain English
• Blog page • Purpose
o Blog posts o What is the user looking for and what is he trying to
• Web shop pages achieve?
o Product overview page, product page, cart page, checkout § Branding, showing expertise, creating awareness,
page, payment page, confirmation page generating sales, lead generation, …
2
, • Consistency o Reader gets redirected to a Google URL which makes the
o Visual style (importance of style guide!) loading process faster:
o Writing style § AMP-logo next to a website on Google search
o Tone of voice means this page will load faster
o Message § the link to the original, non-AMP-article, is linked at
the top of the page
Mobile first
Desktop vs Mobile
• More mobile users than desktop users! 61%
• New way of thinking:
o DESKTOP-first indexing NO
o Mobile-first indexing YES
• Average Bounce rate: mobile > desktop
Is the percentage that shows who leaves the website after visiting only 1
web page.
• Average time spent on site: mobile < desktop
• Conversion Ratio: mobile < desktop
This indicates how many people are converted into buyers.
Mobile
• Google AMP (Accelerated Mobile Pages) =
o These are pages that are made in such a way that
everything is as small as possible, so that the loading time
of the page is as short as possible. So basically, one tries to
make the website as small as possible in terms of
megabytes.
3
,Search Engine Optimization
• Why Google?
o Google has the biggest market share in the (western) world
(92,17% worldwide 07-2020)
o In Russia: Yandex
1 Why is SEO important? o In China: Baidu
• SEO is important because it ensures that your website has a higher
• Top of page ads
position on the Search Engine Results Page (SERP) such as Google.
o ONLY 1 organic search result in this picture
Sites with a higher ranking also have a higher click-through-rate
o 3 ads
(CTR) than sites with a lower ranking.
• Important because 50% of search queries consists of at least 4
words and 75% of users don’t scroll past the first page of SERPs
• Crawler/Spider: When you have developed a website, Google will
send a crawler/spider to this website. This is a small program that
examines your entire website, including the text and any links.
4
,3 pillars of SEO • Page speed
o How fast the page loads will have a big effect on how google
Technique ranks your page. this is especially important on mobile.
• Robots.txt & meta-robots • Responsiveness
o Robots.txt tells spiders/crawlers which URL’s they can o the page is well presented on different devices, this is very
access on your sites and which not. important
o Meta robots tag is a tag that tells search engines what to • Tool: Google Search Console
follow and what not to follow. o Free service that helps you monitor, maintain, and
• HTTPS certificates troubleshoot your site's presence in Google Search results.
o The lock next to the URL of a website indicates a certificate, ...
which means that the information exchanged between the o Confirms that Google can find and crawl your site
visitor and the website is encrypted.
o Google has a strong preference for websites that have such Content
a certificate because they are simply safer. If a website • Keyword research
does not have a certificate, it will be ranked lower. o Enter the word and see what comes up, which sites and
o Especially with web shops, otherwise third parties can just look for related searches. Look at google key word planner
walk away with the customer information. or google trends
§ HTTP: no encryption (no SSL) • Blog pages vs landing pages
§ HTTPS: secure cheap SSL Connection o Blog pages are ranked much higher than landing pages
• Splash pages (introduction page) because blog pages contain more words.
o It can be a full page or a fixed window across the website. o Landing pages :
§ E.g., choosing a language (NL/FR/DE/ENG) § First meaning : Only 1 purpose ; people should buy
o Google does not appreciate splash pages! my product, most of the time via social media.
• User & XML sitemap § The other meaning : the first page people see
o User: you can easily navigate (e.g., your footer is a sitemap, when they visit your site.
an overview of what can be found on your page) • URL
o XML: (text-based format for presenting structured o Must be readable
information) o Short
= An overview of the URLs and where they are located. § SERP results breaks off URL after 65 characters
o Small letters
o Don’t use spaces ‘%20’
5
, • Meta description • AMP (explained in part ‘Websites’)
o A meta description is the small blurb that appears • Bing vs Google
underneath your website on the SERP that includes o Search intention: context vs exact match
information about your page. It is designed to provide o Social media: Google uses it like any other page, Bing uses
users with a brief summary of the content on your page so it as a base for personalization
that users know if the page will answer their question. o Backlinks: Google more quality, Bing more quantity
o They appear when the page is shared on socials
o Indexing: Google crawls every page, Bing only crawls main
o Use relevant keywords
pages
o Focus on CTR!!!
o Bing significantly better video search!
• Structured data
o Schema.org is structured data, (often called schema) is a Authority
semantic vocabulary of tags (or microdata) that you can • Domain authority vs page authority
add to your HTML to improve the way search engines read o Page Authority (PA) = If another site links to you, it means
and represent your page in SERPs. that the site trusts you. This is of course good because the
o It creates an HTML text that can indicate to a crawler what more qualitative pages that link to your site, the higher you
is being written. Think of a recipe, for example. If you will be ranked = page rank/ authority (PA)
structure the data, you can say what the title is, what o Domain authority (DA) = All these pages together will
ingredient 1 is, what ingredient 2 is, … So, the crawler contribute to the Domain Authority. This will be an overall
knows this and doesn't just see all these words mixed up. score. The higher this score, the higher you are in the
search engine ranking.
o HoGent = 62/100 à high DA
• Internal and external linking
o Anchor text = the part of the link that is the
is (part of the text that is underlined, and you can click on
that can lead to a site)
§ <a> href … </a> (like in website management)
6
, • Linkbuilding SERP (Search Engine Result Page) features
o You pay someone who is going to try to direct links to your Some of the most popular SERP features:
page so that their own PA will rise. They can do this by:
§ Check competitors
• Approach them and ask them to link to
their "own" page
§ Interviews and press
• Can be used to link to the site
§ Universities
§ Guest blogging
• Publishing an article on someone else’s 1. AdWords
site, with a link to your own site. o Traditional Ads
• Follow vs no follow links § Top and/or bottom or the left-hand column
o Before: in the blog is a comment section, there are § Above and below organic results
comments to "have you seen my page?" They did this to o Indicated by green ‘Ad’ label
grab a piece of the DA. The comment section was o Pushes organic ads down the page and can impact CTR
completely abused. We speak of Google bombing. 2. Featured Snippet
o Now: they all get an HTML "no follow links" so they can't o Answer to a question that isn’t in the Knowledge Graph of
follow the link. The crawler is not going to save the link and google, gives answer based on first organic result
he doesn't get any credits for it. So, the DA will not rise if o Special result on top of the SERP
you do this via the comment section.
• Extra
o Google bombing: putting a lot of backlinks to a certain
website so it rises in the ranking.
o Google bowling: after this practice was punished by
Google, farm backlinks for your competitors. After Google
Penguin update this was no longer possible. Farming
backlinks now rarely gets penalized.
7