Ensuring web sites are easy to find using search engines is important to ensure visitors will be able to find your content. This training gives some technical tips and suggestions how to optimize your sites for search engine visibility, for example: * How to make sure search engines can find and process your content easily * How to prevent duplicate content showing up in the search results * How to make sure search results are rich and relevant In this training you won't find the one weird trick to get to the top of the Google results but instead some practical tips how to ensure smooth experience for both human visitors and search robots. Exove training by Johannes Siipola

1. SEO FOR
DEVELOPERS
Johannes Siipola
2.12.2016

2. SEARCH
ENGINES

3. How search engines work
▪ Search engines go through the web sites on the
internet (called crawling) and collect individual
web pages into a database (called indexing)
▪ When user types their search phrase into a
search engine, it uses algorithms to find pages
from its index to match the users’intent
▪ Pages are sorted from most relevant to least
(called ranking)

4. How do search engines
rank pages
▪ Good content is the key
▪ Google uses PageRank where pages which a lot of other websites
link to rank better
▪ Tons of different signals
▪ Domain age
▪ Mobile friendliness
▪ Search term in domain and/or url
▪ Domain country
▪ Search term in title tags
▪ Page speed
▪ …

5. WHAT IS
SEO?

6. What is SEO?
▪ Aim of SEO is to improve the ranking of your
website in search engines

7. Why SEO?
▪ Search engines are a top traffic source for
visitors of your site *
▪ Organic placement in search results does not
cost anything compared to search engine ads
* http://marketingland.com/search-remains-first-social-second-for-how-people-find-websites-49394

8. Do I need SEO?
▪ If you website is publicly available and you
expect people to find your content, you should
consider having a SEO strategy
▪ If your project is more like a web application and
it requires a login, there is no need to optimise it
for search engines

9. Types of SEO
▪ Technical SEO
▪ Ensure content should be easy to crawl
▪ Add meta tags for search engines can crawl
▪ Content strategy
▪ Making sure web site content is up-to-date
and relevant to what users are searching for
▪ Content marketing

11. SEO expert walks into a bar, pub,
night club and orders a drink, beer,
whiskey

12. Dirty SEO tricks
▪ Some people try to gamble search engines using various
tricks
▪ Showing different content to search engines and normal
visitors
▪ Invisible text, text with the same color as the
background, text placed outside the browser window
▪ Repeating keywords ”Keywords stuffing”
▪ Network of spam blogs linking to the site
▪ These techniques are not recommended because if you
get caught, you will be likely penalised by Google

14. Legitimate strategies
▪ Good UX = Good SEO
▪ Improving the code of your website
▪ Using tools to track search engine visibility
▪ Content marketing

15. URLS

16. URLs
▪ Every stand-alone piece of content on your
website should have it’s own URL.

20. URLs
▪ Every stand-alone piece of content on your
website should have it’s own URL.
▪ Content that only appears as part of another
content should not have it’s own URL
▪ CMS’s can automatically generate unwanted
URLs
▪ Disable or hide these pages from search
engines

22. What makes a good URL
▪ URLs should not reveal details about programming
environment. Users and search engines don't care
the technology
▪ Clean urls like http://acme.com/about-us are better
than urls like http://acme.com/index.php?page=about-
us
▪ It's useful to have human readable keywords instead
of ids in the URL, they look better when shared and
helps search engines: http://acme.com/blog/my-
blog-post is better than http://acme.com/blog/194

24. What makes a good URL
▪ Readable URLs like ”my-blog-post” are called slugs.
▪ Generated from title of the page or edited by hand
▪ Slugs should be lower case, comma separated and free of
special characters
▪ C'est du français becomes
c-est-du-francais
▪ WordPress does this for you, in Drupal you can use the
Pathauto module with Transliteration
▪ There are numerous libraries for PHP and Node, just
search npm or Packagist

25. What makes a good URL
▪ URLs should mirror the structure of your site

29. PAGE
STRUCTURE

30. Page structure
▪ Valid HTML
▪ Page outline helps search engine understand
▪ Use headers (H1, H2, H3) semantically so search engines
understand the page structure
▪ H1 should not be a magic keyword or page name, it should describe
what the page is about
▪ Make sure important content is displayed as text markup because
search engines have trouble understanding text if it's part an image or
loaded with ajax
▪ Use alt tags on as many images as possible
▪ Well organised page structure helps both search engines and people
using screen readers

31. REDIRECTS

32. Redirects
▪ Cool URL's don't change
▪ Sometimes necessity when for example CMS or
technology changes
▪ Redirects are good for both UX and SEO
▪ Users find content they are looking for
▪ Search engine ranking for the page are not
lost

33. 302 redirect
▪ Temporary redirect. For example you want to
redirect mobile users to different page, or you
want to redirect all users to a campaign page for
a certain period.
▪ Browsers do not cache these redirects
▪ Search engines keep the both pages in the index

34. 301 redirect
▪ Permanent redirect. The content has moved to
the new location
▪ Browser caches the redirect
▪ Search engines replace the old page with the
new page in the index and keep its search
engine ranking

35. Redirects
▪ Always do a 302 redirect first to see if it works!
301s get cached to visitors' browsers unless they
clear the cache
▪ Can be set on server level or app level

36. HTTP STATUS
CODES

37. 404 pages
▪ If the page is not found, in addition to showing
”page not found” text to the user, make sure the
server returns 404 status code

38. 5xx pages
▪ No website is up 100% of the time. Updates,
database is down, 3rd partyAPI doesn't work...
▪ If there is an error, make sure to return a 5xx
code so that search engines do not index that
page with wrong content

39. DUPLICATE
CONTENT

40. Duplicate content
▪ Duplicate content is bad because it makes it
harder for users to find the exact page they are
looking for
▪ Search engines don’t know which version is
most relevant

41. Causes of duplicate
content
▪ One page can be reached at multiple domains and protocols
▪ http://acme.com/example-page
▪ http://www.acme.com/example-page
▪ https://acme.com/example-page
▪ https://www.acme.com/example-page
▪ One page can be reached at multiple paths
▪ http://acme.com/example-page?utm_source=facebook
▪ http://acme.com/example-page?
sessionId=fb37f9a68c494857b8f38bea6cee428c
▪ http://acme.com/example-page?category=widgets

42. URL canonicalization
▪ Pick www or no-www address the canonical version and
redirect the other version to it
▪ It doesn’t matter which one you pick, just be consistent
▪ If you have SSLcertificate, redirect non https page to https
version
▪ Always allow users to access the site over http, users don’t
type the protocol in the address bar
▪ Always redirect full path
▪ http://example.com/page/another-page ->
https://example.com/page/another-page

43. URL canonicalization
▪ In addition to the domain, there can be
▪ Path can have query string
▪ https://acme.com/example-page?utm_source=facebook
▪ https://acme.com/example-page?
sessionId=fb37f9a68c494857b8f38bea6cee428c
▪ https://acme.com/node/432
▪ There might be duplicate content for other reasons
▪ Google recommends you to use <link rel=“canonical”> meta tag to signal
which is the canonical version on the page
▪ Add <link rel="canonical" href=“https://acme.com/products"> to the head
tag of your page
▪ Wordpress and Drupal do this out of the box for you!

44. META TAGS

45. What are meta tags?
▪ Tags that are placed in the head section of a
HTMLpage
▪ Meta = information about information
▪ Intended to be to read by machines rather than
humans

46. Title tag
▪ Will be shown in the browser title and search results
▪ Every page should have unique title
▪ Format is often {{page title}} {{separator}} {{branding}} for
example “My example blog post -Acme” or “Careers -
Acme”
▪ Separator can be -, –, —, |, ·, :, ›, », ::, ., It’s a stylistic
choice
▪ Don’t put extraneous stuff in the title for example “Acme -
Web design company - Drupal, Wordpress, SEO,
Design, Development - Contact us now and get a quote”

51. Meta keywords
▪ Relic from the 90’s when search engines could
not process language very well
▪ None of the major search engines support
keywords anymore
▪ Don’t bother with it

52. Meta description
▪ Does not directly influence search ranking but is
often displayed in the search result snippet
▪ One or two sentence summary added by hand is
the best but can also be programmatically
created from the page content
▪ Leads to cleaner search results

55. Social sharing
▪ Social media is important source of traffic in
addition to search engines
▪ You can use social media specific markup on your
site to have richer previews when links get shared
▪ Facebook’s Open Graph
▪ Twitter Cards
▪ You can configure title, image, description and
more

56. Open Graph
▪ Rich previews on social media platforms
▪ Initially created and supported by Facebook but
now an open standard
▪ Supported by Facebook, Twitter (partially),
Tumblr, LinkedIn, Slack, iMessage and others.
▪ Use the debugger ( https://
developers.facebook.com/tools/debug/ ) to
check how your page looks when shared

58. Twitter cards
▪ Many different card designs but
summary_with_large_image and summary are
the most important
▪ Needs Twitter account specified as a meta tag in
order to work
▪ Use the Cards validator ( https://cards-
dev.twitter.com/validator ) to check how your
shares look

60. Social meta tags
▪ Most important tags are title, image and description
▪ Title
▪ Tag: og:title, twitter:title
▪ Remove extra stuff from the end of the title so “My example article -Acme blog”
becomes just “My example article”
▪ Image
▪ Tag: og:image, twitter:image
▪ Open graph: 1200x630, you can reuse the same image for twitter
summary_large_image
▪ Description
▪ Tag: og:description, twitter:description
▪ Usually few sentence summary is the best but can be automatically generated from
body text
▪ You can re-use the meta description!

61. Meta tags - implementation
▪ Wordpress has Yoast SEO plugin among others to
automatically add meta description social sharing
metadata
▪ In Drupal you can use Metatag module but it’s pretty
hard to configure
▪ On a custom/framework project you need custom code
or a library
▪ Consider allowing editors to explicitly define the image
and the description.
▪ Make sure the tags are rendered on the server side

63. OTHER
RANKING
SIGNALS

64. HTTPS
▪ HTTPS is a positive ranking signal in Google
▪ HTTPS brings more trust to the users with the
green lock icon
▪ Google Chrome is going mark HTTP pages
insecure in the future
▪ SSLis important for the security of login pages
▪ Let’s encrypt

65. Performance
▪ Good for user experience
▪ Positive ranking signal on Google
▪ There are multiple techniques to ensure fast
page load speeds
▪ Caching
▪ Gzipping and minifying static resources
▪ Optimizing images

66. Mobile friendliness
▪ Many people browse websites on their phone, for some people
it’s even the only way to browse the web
▪ Mobile friendly web pages are good for user experience
▪ Google ranks non-mobile optimised pages lower when
performing searches on mobile devices
▪ There are three ways to implement mobile friendly pages
▪ Responsive design
▪ Separate m. subdomain
▪ Dynamic server side serving
▪ Use Google mobile friendly test to check your site is
compatible with mobile devices

67. Mobile friendliness -
Responsive design
▪ One URLfor desktop and mobile browsers
▪ Layout is optimised for small screens using CSS
media queries
▪ Recommended technique

68. Mobile friendliness -
Separate subdomain
▪ Two different versions of the website, one optimised for desktop and one mobile
▪ Good for cases where mobile and desktop sites are too different to be able to
use responsive design effectively
▪ Disadvantage is the larger overhead of maintaining 2 sites, approach is falling
out of favour as of late
▪ Redirect mobile users to m. domain automatically
▪ Remember to redirect the to full path!
▪ For Google use meta tags to signal the mobile and desktop versions of a page
▪ On desktop page:
<link rel="alternate" media="only screen and (max-width:
640px)" href="http://m.example.com/page">
▪ On mobile page:
<link rel="canonical" href="http://www.example.com/page">

69. Mobile friendliness -
Dynamic serving
▪ One URLfor desktop and mobile users
▪ Mobile users and desktop users are served a different
template depending on user agent
▪ Combines the advantages of responsive design and
separate mobile site
▪ Good for cases where responsive design would be too
complicated
▪ Use Vary: User-Agent header so intermediary caches
and Google know the content differs depending on the
browser

70. SEMANTIC
WEB

71. Semantic web
▪ Web markup is content, but semantic web gives meaning to that
data
▪ For example, what part of an article is the title, body and author
▪ Implemented using meta tags that describe the content
▪ Fully semantic web is a pipe dream, but there are various
practical implementations
▪ Most important standard is schema.org, it can be used in
several different formats
▪ Microdata
▪ RDFa
▪ JSON-LD

72. Microdata
▪ Metadata is embedded in HTMLmarkup

75. RDFa
▪ Embedded in HTML

77. JSON-LD
▪ Latest standard for semantic content
▪ Meta data is separate from the content, much
like how meta tags are separate from page body
▪ Based on JSON
▪ Easier to generate using a CMS because the
JSON data can be generated from the fields
directly
▪ Recommended schema.org format by Google

80. schema.org
▪ Hundreds of schemas available
▪ Only handful are actually used by Google
▪ LocalBusiness
▪ Event
▪ Review
▪ Breadcrumbs
▪ Sitelink searchbox
▪ Site name
▪ Corporate contacts
▪ Logos
▪ Social profile links
▪ Google uses these schemas to enrich its search results
▪ Article
▪ Course
▪ Music
▪ Recipe
▪ Video
▪ Tv/movies
▪ Product
▪ Science dataset

86. schema.org -
implementation
▪ Check if your CMS or platform has a plugin
▪ Check that is outputs the schema correctly
using Google’s testing tool https://
search.google.com/structured-data/
testing-tool/
▪ JSON-LD is not too hard implement yourself!

87. LOCALIZATIO
N

88. Localization
considerations
▪ Different language versions of a page should always have unique
URL!
▪ Different domains
▪ http://acme.com/page, http://acme.fi/page
▪ Domains are associated with particular region but they all have
different ranking
▪ Subdomains
▪ http://en.acme.com/page, http://fi.acme.com/page
▪ Seen as separate sites by Google
▪ Directories
▪ http://acme.com/en/page, http://acme.com/fi/page

89. Localization
considerations
▪ Remember language tag in html element
▪ Google can serve your users the appropriate language and/or country
version if you use the hreflang meta tag
▪ <link rel="alternate" href="http://example.com/en" hreflang="en" />
▪ For users speaking english regardless of location
▪ <link rel="alternate" href="http://example.com/en" hreflang=”en-
us" />
▪ For english users in the United States
▪ Remember to cross-link the pages using hreflang
▪ Google documentation: https://support.google.com/webmasters/
answer/189077

90. CONTROLLIN
G CRAWLERS

91. robots.txt
▪ Robots exclusion standard, supported by all
major search engines
▪ Controls which pages search engines are
allowed to index
▪ Good candidates are admin login pages, staging
sites, special campaign pages, etc.
▪ WordPress and Drupal ship with robots.txt, you
can add new pages to it if needed

92. robots.txt
▪ Can be used in three different ways
▪ robots.txt in domain root
▪ User-agent: *
Disallow: /secret
▪ Meta tag
▪ <meta name="robots" content="noindex" />
▪ HTTP header
▪ X-Robots-Tag: noindex

93. Sitemap
▪ Normally search engines search follow links on your
site to find content to index
▪ Sitemap.xml is standard for listing all pages to index on
your site
▪ Useful if your site has a lot of content not directly linked
▪ Wordpress and Drupal support automatic sitemaps via
plugin/module
▪ Often more trouble than it’s worth for custom/
framework sites

95. SEO TOOLS

96. Google Search console
▪ Allows you to get visibility to how your site is
crawled and ranked by Google
▪ Shows top search terms on your site
▪ Shows top sites which link to your site
▪ Suggests improvements to meta data
▪ Identify problems like 404/500 error codes on
pages
▪ Allows you to remove pages from Google index

97. Dead link checker
▪ Allows you check your page for internal and
external dead links
▪ Improves usability when your visitors don’t
encounter links that don’t work
▪ Improves SEO when pages are linked to each
other
▪ http://www.deadlinkchecker.com/

98. SEO Crawler
▪ Aprogram you install on your computer
▪ Works a bit like real search engine indexer, it goes
through the entire site and gives you a report for all
the pages
▪ Useful to make sure all your pages have correct
meta data and structure
▪ Can also check for dead links
▪ Xenu Link Slough (Free, Windows)
▪ Screaming Frog SEO Spider (Paid, Mac, Windows)

99. SEO analysing tools
▪ Check that your website follows SEO ”best
practices”
▪ Track your ranking in search engines for certain
terms
▪ Usually paid services
▪ Moz
▪ Siteimprove
▪ Ahrefs

100. CONCLUSION

101. In conclusion
▪ Technical SEO is an important part of a SEO strategy
▪ Make sure all content has it’s own URL
▪ Make sure URLs are clean and easy to read
▪ Redirect old URLs to new content
▪ Make sure there is only one canonical domain for your site
▪ Have strategy to handle duplicate content
▪ Make sure all pages have title and description meta tags
▪ Consider adding semantic metadata where is makes sense
▪ Have a strategy for localisation if you have multiple language versions
▪ Utilise various tools and plugins when available
▪ Check the documentation of Google and other search engines

102. QUESTIONS?