SEO FOR DEVELOPERS

Johannes Siipola 2.12.2016

SEARCH ENGINES

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)

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▪ …

WHAT IS SEO?

What is SEO?▪ Aim of SEO is to improve the ranking of your

website in search engines

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

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

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

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

whiskey

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

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

URLS

URLs▪ Every stand-alone piece of content on your

website should have it’s own URL.

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

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

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

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

PAGE STRUCTURE

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

REDIRECTS

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

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

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

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

HTTP STATUS CODES

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

5xx pages▪ No website is up 100% of the time. Updates,

database is down, 3rd party API 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

DUPLICATE CONTENT

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

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

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 SSL certificate, 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

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!

META TAGS

What are meta tags?▪ Tags that are placed in the head section of a

HTML page ▪ Meta = information about information ▪ Intended to be to read by machines rather than

humans

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”

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

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

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

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

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

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!

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

OTHER RANKING SIGNALS

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 ▪ SSL is important for the security of login pages ▪ Let’s encrypt

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

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

Mobile friendliness - Responsive design▪ One URL for desktop and mobile browsers ▪ Layout is optimised for small screens using CSS

media queries ▪ Recommended technique

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:<linkrel="alternate"media="onlyscreenand(max-width:640px)"href="http://m.example.com/page">

▪ On mobile page:<linkrel="canonical"href="http://www.example.com/page">

Mobile friendliness - Dynamic serving▪ One URL for 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

SEMANTIC WEB

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

Microdata▪ Metadata is embedded in HTML markup

RDFa▪ Embedded in HTML

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

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

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!

LOCALIZATION

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

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

CONTROLLING CRAWLERS

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

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

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

SEO TOOLS

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

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/

SEO Crawler▪ A program 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)

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

CONCLUSION

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

QUESTIONS?