HTML, CSS And On-Page Optimisation

1. HTML, CSS And On-Page Optimisation FOR DUMMIES If you can’t do On Page Optimisation by the end of this, then I have failed… with… James “Flaxative” Flacks Helen “Cuppa” Geraghty

2. WHAT IS HTML? Invented by Sir Tim Berners Lee in 1990 Its invention (along with a browser and web server) created the WWW It’s the “language” behind webpages It was invented to be used to display Technical Documents and Reference Manuals efficiently It’s the most common skill people lie about on their CV Possibly the 4th greatest British invention after football, Mars Bars and curry

3. AN OLD WEBPAGE (1992) This is the HTML behind it This file can be created in any text editor. World Wide Web The WorldWideWeb (W3) is a wide-areahypermedia information retrieval initiative aiming to give universal access to a large universe of documents. Everything there is online about W3 is linked directly or indirectly to this document, including an executive summary of the project, Mailing lists , Policy , November's W3 news , Frequently Asked Questions . What's out there? Pointers to the world's online information, subjects , W3 servers, etc. Help on the browser you are using Software Products A list of W3 project components and their current state. (e.g. Line Mode ,X11 Viola , NeXTStep , Servers , Tools , Mail robot , Library ) Technical Details of protocols, formats, program internals etc <H1>World Wide Web</H1> The WorldWideWeb (W3) is a wide-area <A NAME=0 HREF="WhatIs.html">hypermedia</A> information retrieval initiative aiming to give universal access to a large universe of documents. <P>Everything there is online about W3 is linked directly or indirectly to this document, including an <A NAME=24 HREF="Summary.html">executive summary</A> of the project, <A NAME=29 HREF="Administration/Mailing/Overview.html">Mailing lists</A>, <A NAME=30 HREF="Policy.html">Policy</A> , November's <A NAME=34 HREF="News/9211.html">W3 news</A>, <A NAME=41 HREF="FAQ/List.html">Frequently Asked Questions</A> . <DL> <DT><A NAME=44 HREF="../DataSources/Top.html">What's out there?</A> <DD> Pointers to the world's online information,<A NAME=45 HREF="../DataSources/bySubject/Overview.html"> subjects</A> , <A NAME=z54 HREF="../DataSources/WWW/Servers.html">W3 servers</A>, etc. <DT><A NAME=46 HREF="Help.html">Help</A> <DD> on the browser you are using <DT><A NAME=13 HREF="Status.html">Software Products</A> <H1>World Wide Web</H1> The WorldWideWeb (W3) is a wide-area <ANAME=0HREF="WhatIs.html">hypermedia</A> information retrieval initiative aiming to give universal access to a large universe of documents. <P>Everything there is online about W3 is linked directly or indirectly to this document, including an <ANAME=24HREF="Summary.html">executive summary</A> of the project, <ANAME=29HREF="Administration/Mailing/Overview.html">Mailing lists</A>, <ANAME=30HREF="Policy.html">Policy</A> , November's <ANAME=34HREF="News/9211.html">W3 news</A>, <ANAME=41HREF="FAQ/List.html">Frequently Asked Questions</A> . <DL> <DT><ANAME=44HREF="../DataSources/Top.html">What's out there?</A> <DD> Pointers to the world's online information,<A NAME=45HREF="../DataSources/bySubject/Overview.html"> subjects</A> , <ANAME=z54HREF="../DataSources/WWW/Servers.html">W3 servers</A>, etc. <DT><ANAME=46HREF="Help.html">Help</A> <DD> on the browser you are using <DT><ANAME=13HREF="Status.html">Software Products</A> Like Notepad in Windows. Just save it as something dot htm or dot html. A HTML document is made up of a mixture of text and tagsthat describe what the text is about. i.e. click here may be surrounded with tags that say it’s a link This is how it displays in the browser… You can use editing programs like Dreamweaver or CKEditor to make webpages without knowing HTML

4. HTML: The Basics >p is the paragraph tag Your Browser Window… Tags are what make HTML. To identify they’re not text, tags are contained within angular brackets. < and > It turns text. Some general rules Pictures of dogs Pictures of dogs • Tags can be opened within other tags. • <p><a>Pictures of • dogs</a></p> • But they should be opened and closed in order. • Last opened, first closed. • Spacing/new lines in HTML doesn’t matter • <a>Pictures of • dogs</a> • Is the same as • <a>Pictures of dogs</a> • Into whatever the tags describe • i.e. <a>Pictures of dogs</a> • <a> is the link tag. You describe it as a link, it becomes a link. • i.e. Pictures of dogs This is a paragraph. Link starts here Link finishes here • Tags should not overlap. • There’s a start tag (open) & an end (close) tag • Don’t cross the tags…

5. HTML: The Basics To prevent overlapping tags, web developers make their HTML look like this It’s not essential, it just makes things easier to read. Overlapping tags has serious consequences… • Don’t cross the tags! • It just causes stuff to display weird…

6. HTML: 1992 HTML documents are divided into 2 sections. The <head></head> and the <body> </body> A 1992 Graphical Browser It was designed to display manuals and reference material • But what would such a system need? Titles <title>X11 Protocol Reference 1.4</title> So you can search the site for the topic you want. It’s 1992. Your computer* sucks. Forcing it to search a whole document will be too much. • A title is important for finding documents? Mmm… that might be important • Anything in the <head> is considered information ABOUT the page and not displayed in your browser

7. HTML: 1992 Headings are supposed to describe the text beneath it… • But what would such a system need? Headings <h1>Paper to discuss X11 Protocol</h1> Like a page heading Sub-headings… And sub-sub-headings… HTML supports 6 levels of headings. <h2>1. Introduction</h2> <h3>1.1 Aims in Implementing the X11 Protocol</h3> <h4>1.1.1 X10 Protocol Compatibility</h4> • Headings describe the document content? That seems neat. • Scanning the headings might be an easy way of seeing what a document is about…

8. HTML: 1992 • But what would such a system need? Lists <ol> <li>Introduction</li> <li>Updates from X10 Protocol</li> </ol> Paragraphs Because sometimes text is just text. <p>As discussed in the X10 Protocol Reference document, the X11 Protocol needs to upgrade the STAC compression matrix.</p> <ol>is Ordered List. <ul>is Unordered List (bullets) <li>is List Item

9. HTML: 1992 Rather than use “click here” they recommended using text to describe what the page linking to was about • And most importantly…. Links! Because HTML would suck without them <a href=“another-file.htm”> X10 Protocol Reference </a> <a>X10 Protocol Reference</a> would still be a link, just to nowhere. href=“another-file.htm” just says where it’s linking to. Hypertext Reference… yeah… Images got added a while later. <imgsrc=“hamsterdance.gif” alt=“dancing hamsters”> OMG NO CLOSE TAG Technically single tags like this should be closed like <this /> • That might also be important

10. HTML: 1992 You can find a list of attributes for each tag by visiting the W3Schools page for that particular tag. • Attributes… <a href=“another-file.htm”> X10 Protocol Reference </a> Anything you put within the tag isn’t shown in the browser. <h1align=“center”>American Spelling</h1> Each tag originally had their own set of attributes although some shared them. <fontsize=“7”>Dead tags ftl</font> Attributes that change appearance are now outdated. This is an attribute These are the attributes for the <img> tag. An example… <imgsrc=“hamsterdance.gif” alt=“dancing hamsters” height=“200” width=“50” /> Attributes that give extra information about the tag are still used. • Every tag supports the attributes class=“” and style=“”

11. HTML: 2013 And Google/Search Engines added some of their own. • HTML is pretty similar nowadays… There’s more tags… www.w3schools.com/tags/ <div></div> Effectively creates a “box” <span></span> Actually does nothing <br /> New line But in practice, you get by with about 20-30 tags. <html> <head> <title>Justin Bieber Fanpage</title> <metaname=“description”content=“OMG JB rocks. I love him so much” /> <linkrel="stylesheet"type="text/css"href="style.css"> </head> <body> <h1>Hello</h1> </body> </html> • Which will look like this in Google The biggest change was CSS. Cascading Style Sheets.

12. Cascading Style Sheets Squiggly brackets this time… Or even by adding them within a <style> tag within the <head> <html> <head> <title>Justin BieberFanpage</title> <meta name=“description” content=“OMG JB” /> <style type="text/css"> h1 { color: red; background-color: black; } p{ font-size: 30px; } </style> </head> <body> <h1 style=“color: blue; background-color: white”>Hello</h1> </body> </html> • If you’ve been paying attention… You should “get” that HTML is not about how things look, but what things are about. <html> <head> <title>Justin Bieber Fanpage</title> <meta name=“description” content=“OMG JB rocks. I love him so much” /> <linkrel="stylesheet"type="text/css"href="style.css"> </head> <body> <h1>Hello</h1> </body> </html> i.e. a list, a link, a heading. Microsoft/Netscape wanted to make the web prettier so added HTML tags for visuals. But this wasn’t intended. CSS was developed to separate appearance and content. It’s SUPPOSED to be a separate file with just “styles” Start H1 appearance info h1{ color: red; background-color: black; } p { font-size: 30px; } This is the content of style.css End H1 appearance info Or even all 3 at once… but I wouldn’t recommend it This is ironically similar to my Plenty of Fish main statement • But you can also change it on a single tag by adding <h1style=“color: red; font-size: 10px”>Hello</h1>

13. A Step Back… You don’t need to use every possible property. • A bad analogy… CSS gives every HTML tag (H1, p, img) a HUGE LIST of “properties” or styles. apple { color: red; taste: sweet; texture: crunchy; organic: no } color: red, green, yellow organic: yes, no There’s a list of EVERY property at www.w3schools.com/cssref/default.asp They are mostly shared on every tag. freshness: mouldy, ripe texture: chewy, crunchy taste: bitter, sweet, sour, tangy The biggest change was CSS. Cascading Style Sheets. If you don’t change it, it stays at default

14. Some CSS Examples… Just click through to the property page… A great site to experiment on is jsfiddle.net And it will give you a range of values…

15. Basic On-Page Optimisation • Selecting keywords Ride the long tail! More specific keywords will be easier to rank higher for as there’s less competition – but not too specific or no one will search for them. • Use a ‘’keyword theme” – don’t try to rank for a single keyword, try to rank for many variations. • i.e. • dentist Oxford, • cosmetic dentistry Oxford • Emergency dentist Oxford • Dental practice Oxford • Laser teeth whitening Oxford

16. Basic On-Page Optimisation We said it was important 10 slides ago… • The title tag • Maximum of 70 characters are displayed on Google* • Should contain the primary keyword and a concise, unique summary of the page’s contents. • 2 Schools Of Thought… • Keyword 1 + Keyword variations • Keyword 1 + Unique Selling Points • Use keywords close to the beginning in title tag • Avoid repetition of keyword (keyword stuffing) One of the most important on-page factors

17. Basic On-Page Optimisation Sell the benefits, not the product! • Meta Description • When you use a search engine and view the results this is the snippet of info beneath link on the results • Not crawled by search engines but should still contain keyword to increase click-through rate but still very important!! Because… • The more interest your webpage gets, the more clicks and shares and traffic – the better your ranking • Should be a brief concise, compelling description of contents of webpage to entice people to click the link • Less than 156 characters <metaname="Description" content="AddPeople have over 10 years experience in SEO, Link building, PPC management & Web Design with businesses all over the UK, Europe and the US." /> This is in the webpage <head> tag. Another tag called meta keywords exists but is no longer used by Search Engines. The Meta Description is not a ranking factor. It’s a sales pitch! Someone who wants to buy a drill wants a hole, not a drill.

18. Basic SEO Buying manchesterbuilders.com used to be a great way of ranking for “manchester builders” • The Address (Page URL) • Include keyword once in URL • Use hyphens not underscores • Don’t make it too long • Make it memorable • This includes filenames for sub-pages, i.e. • http://www.loxleydentist.com/teeth-whitening-oxford Permanent vs non-permanent links Google seems to prefer permanent links. That is links like www.example.com/dentist To non-permanent links like; www.example.com/?p=23we And simple directory structures like: example.com/dentist/manchester Although this limits the page to just being about Oxford But it’s less important now

19. Basic SEO | • Adding content Audio/Video/Flash If you need to add audio, video or Flash content to a website then make sure it is accompanied by a detailed text description of what it is, including any important keywords. Images / Alt tags If using images assign them alt tags in the html. This is just a short description inserted into the html of what the image so search engines can ‘read’ it Use keyword or keyword variations in the alt tag • This means ensuring that search engines are able to ‘read’ what you put on your website – there needs to be an internal link to it. • Make important info on the website html text content • Eg. If all your content is on Flash the search engine won’t have anything to read so won’t know what your website is about so you won’t rank. • <imgsrc=“weddingcats.jpg”alt=“Wedding photography funny image of cats getting married”> • Technically these tags were made for blind people and text only browsers

20. Page Content Guess you need good copywriters then! • Quality • Google can tell if the content on your website isn’t of a high quality and will rank it accordingly So what makes high quality content? • Depth – The more depth a piece of content has the more search terms it should answer for. • Relevancyto keyword ‘theme’ – keep it relevant to include more keywords and variations to rank higher. • Uniqueness– Google has a minimum uniqueness threshold, if your content doesn’t pass this it won’t rank. The more unique content is the more clicks/ links it should get This came about in a Google Update called Panda There’s a handout!

21. Semantic Analysis… • Beyond Keyword Density Semantics analysis is knowing that when you say apple, you’re talking about the fruit. Golden Delicious, crumble, recipes, fruit , cider… • Google looks for commonly used words/phrases and identifies them as the keywords, it then looks for synonyms of these words in the page title. It looks at the site itself, it looks at pages linking to the site, external and internal… It uses characteristics observed on one page to help it understand other pages. So if a page that’s clearly talking about the fruit uses other terms… It looks at the rest of the content of the page – looking for related words. Google learns those words are related…. It learns from content WE make We don’t know the name… Google Be Smart, yo. Some people call it Latent Semantic Indexing but it’s not…

22. An example… • Health Benefits of Green Tea First pass • Pages linking to the article describe it as “John’s Article about the health benefits of green tea” • On page content references “health benefits of green tea” • In the title • In the main heading • In the content Using these factors, Google will work out how confident it is about the content. This is supposed to be a blog…

23. An example… • Health Benefits of Green Tea Second pass Using semantic analysis, Google identifies that the article references the following topics A connection is made between these topics. How strong this connection is won’t be known until….

24. An example… • Health Benefits of Green Tea Final pass Google sees what other pages reference and compares them. In this example, “polyphenols” is cited by most of the articles. Polyphenols and catechinswill be considered to be important to any article or webpage about “The Health Benefits of Green Tea” It’s not about “keyword density” or “keyword optimisation” but about “Concept Optimisation”

25. Content • Length Studies have shown a positive correlation between rankings and number of words on a webpage There is no optimal length but studies show that Google tends to devalue webpages with less than 300 words, but it’s not been figured out exactly why Formatting • Putting important keywords in bold/italic can improve ranking • Studies have shown more positive correlation between words formatted in italics and higher rankings than in bold Why? • Google thinks these words are important/relevant to the webpage’s content A possible explanation Could be because of extra depth or better number keywords/variations in longer content Because when you use <strong> HTML tag, it’s not because you want a word to be bold, it’s because it’s IMPORTANT

26. Internal Links • Links The links found within your content have more value than your navigation links Links in text have more value than links within images Make sure anchor text has relevance to page it’s linking to, avoid generic anchor text, eg. ‘click here’ Only the text in the first link to a page counts… Way back at the start, people were saying the link should describe the target’s content

27. Over Optimisation This content had to be rewritten… • Google hates to be manipulated… So don’t try to over optimise! Google is smart – it will recognise a webpage that does not read naturally and rankings will drop… Google is smart – it will recognise a webpage that does not read naturally and rankings will drop Way back when, people set up pages with THOUSANDS of words to try and rank for everything… Gateway pages…

28. Basic On-Page Optimisation You don’t need to use every possible property. • Selecting keywords CSS gives every HTML tag (H1, p, img) a HUGE LIST of “properties” or styles. apple { color: red; taste: sweet; texture: crunchy; organic: no } There’s a list of EVERY property at www.w3schools.com/cssref/default.asp They are mostly shared on every tag. The biggest change was CSS. Cascading Style Sheets. If you don’t change it, it stays at default

29. Basic On-Page Optimisation You don’t need to use every possible property. • Selecting keywords CSS gives every HTML tag (H1, p, img) a HUGE LIST of “properties” or styles. apple { color: red; taste: sweet; texture: crunchy; organic: no } There’s a list of EVERY property at www.w3schools.com/cssref/default.asp They are mostly shared on every tag. The biggest change was CSS. Cascading Style Sheets. If you don’t change it, it stays at default