Joomla SEO & Performance

transcript

How to rank high in Google with Joomla 2.5 and 3

JOOMLA SEO & PERFORMANCE

20 years in IT 4 years in Joomla Webdesign Webdesign website : SK-Web.nl Webshop: Hielspoorinfo.nl Blog about Joomla SEO & Performance: Joomla-seo.net Also translated in French (http://alphadesign.fr/joomla/checklist-seo-pour-

joomla-referencement-joomla/) and Arabic (http://estemthal.com/) Ebook: Joomla 3.5 SEO & Performance (will be translated in dutch and french)

ABOUT SIMON KLOOSTRA

ON-SITE SEOKeywordsHTML MarkupURL StructureSEF URL'sMeta-dataAnchor-text & ImagesPrevent duplicate URL's301-redirects404-errorssitemap.xml & robots.txtExtensions

OFF-SITE SEO

Google Webmaster ToolsGoogle AuthorshipGoogle PlacesLinkbuildingSocial MediaRich snippets

CONTENT (1)

PERFORMANCE

Check website speedExtensions and templatesCachingG-ZipImage-sizeCSS & JS fi lesCDNMobile devicesWebhostExtensions

CONTENT (2)

DETERMINE KEYWORDS

Brainstorm / logicGoogle search, use

suggestionsSeorch.eu websiteGoogle Adwords keyword toolAdwords for search volume and

competitionAfter site is live:

Google Analytics and Webmaster Tools

USE KEYWORDS

Sitename & URLTitles (Global Configuration)Meta-dataHeadersTextEverywhereDon't stuff itLocate at start of sentence /

string

KEYWORDS

Use valid HTMLExternal CSS and JavascriptPreferably HTML5 with correct use of tags like <header>,

<article>, etc.Clean code (text / code ratio)Don't use tags like H1 just to enlarge text

HTML MARKUP IN YOUR TEMPLATE

Avoid deep link structures:Bad: http://joomla-seo.net/joomla/seo/keywords/joomla-specific/keyword1 (=5 levels)

Use breadcrumbs if this cannot be avoidedNo more then 7 items per menuNot necessarily bad for SEO directly, but helps usability

URL AND MENU STRUCTURE

Title (not arti cle ti tle, but <ti tle>, also visible in browser tabs)"URL"Meta-Descripti onMeta-Keywords (not used anymore)

META-DATA IN GOOGLE

SEF = Search Enguine FriendlyConfigurable in Global Configuration

Non-SEF example: index.php?option=com_content&Itemid=117&id=10&lang=es&view=article

SEF example:article-alias

SEF URL'S (1)

Switched on by default since Joomla 1.6

Use URL-rewriting to remove index.php part from URL

Requires renaming htaccess.txt to .htaccess in Joomla root

Watch out changing this on live sites, URLs will change

SEF URL'S (2)

Joomla uses aliases (for articles, categories and menus) to create URLs

Actual URL depends on article being linked to menu-item or not.Default aliases are based on titleSometimes better to use your own alias for better URL

SEF URL'S (3)

Max 65 characters If configured in Global Configuration , uses sitename:Then: (category +) article title if NOT linked to a menuOr: menu title if linked to a menuCan (must?) be overridden in " Page Display Options" in menu

configuration, see next slide If overridden, Sitename is still added

TITLE (1)

TITLE (2)

Don't abuse tags for display (no H1 just to enlarge)Use correct hierarchy -> H1, H2, H3, P, etc.Always ONE, but never more the ONE <H1> Decide how to achieve this in Joomla article's:

Use template overrideSet "Show title" to "No" and just type an H1 in the editorUse Page Display option if linked to menuUse extension (Header Tags)

H1 TITLES

Max 165 charactersExtremely important to set on every pageShould be unique, not identical on all pages! Google hates thisNot used by Google to establish ranking.......... Main reason: Click Through Rate (possibly massive eff ect)! Use your keywords in meta descriptionCreate for readers, should be enticing to click on.

META-DESCRIPTION & KEYWORDS (1)

Set globally in "Global Configuration"Set for every single article (also category, contact, weblink, etc.)Can be set on menu-level (overrides article meta), but is less advisableMeta-keywords: set 2-3 globally and leave it at that, or simply do not use

Easy Front-end SEO:Perfect for beginners, easy to use, and will cause no issuesAdd meta-data from front-endCan auto-generate meta-data (use with caution, check and correct)

When creating links, set a descriptive anchor-textNot: "Click here"or "Download" If "Click here" cannot be avoided, use the "title" attribute to give

meaningUse internally for creating an internal link structure (aside: also

breadcrumbs are perfect for this)Best aid: JCE editor

ANCHOR-TEXT (1)

ANCHOR-TEXT (2)

Set correct dimensionsDon't use resizing with your editorGoogle cannot 'see' images, but reads filename and alt-text

Use filenames with your keywords (example: bird.jpg)Set a descriptive alt-text with the editorWith JCE, filename can be set as alt-text automaticallyProper set-up can be checked with www.feedthebot.com/tools/alt

OPTIMIZE IMAGES (1)

OPTIMIZE IMAGES (2)

Avoid using the same content on more pages, this is especially bad Joomla creates many "technical" duplicates They will not kill your rankings, but better is to avoid them Check your Google Webmaster Tools for any duplicate URL on a

regular basis

DUPLICATE URL'S (0)

A duplicate URL is a URL that shows exactly the same content as another URL on your site.

Joomla creates menu duplicates for one article:/sample-sites /index.php/sample-sites (same with index.php)/index.php?option=com_content&view=article&id=2 (article

view)/index.php?

option=com_content&view=article&id=2&Itemid=10 (same, but linked to a menu through the ItemId

The same article with and without www in the url (or even https)With or without a trailing slashWith parameters like /sample-sites?font=large or othersPrint/Email view

DUPLICATE URL'S (1)

Other causes for duplicate URL's:Someti mes even uppercase, lowercase issues In Joomla specifi cally: The same arti cle, reached from multi ple menu-itemsOther extensions

DUPLICATE URL'S (2)

DUPLICATE URL'S (3)

Set canonical tag <link href="/preferred-url" rel="canonical"/>Implemented in Joomla 3 (buggy?)

301 redirect to preferred URL using .htaccess (separate slide)Set up .htaccess for small issues like trailing slashes

DUPLICATE URL'S (4)

www or non-www URL's: only use 1:Google Webmaster Tools: Validate both and set preferred domainReroute to preferred domain using 301-redirect:

DUPLICATE URL'S (5)

Use robots.txt to inform Google which URL's not to index (separate slide)

Use an extension like SH404SEF, MijoSEF, etc. (separate slide) or Non-SEF to SEF (perfect for beginners)

Use Google Webmaster ToolsRemove duplicates with "Remove URL" optionwww or non-www preferenceRemove URL parameters like ?font=large (careful)

DUPLICATE URL'S (6)

Joomla ships with a reeeaally ugly 404-page, change this to fi t your template

Create an article in Joomla with a nice error message and record the IDSet up error.php in your template folder

(copy from templates/system/error.php) in 2.5:defined('_JEXEC') or die; //Look up and addif (($this->error->getCode()) == '404') {header('Location: /index.php?option=com_content&view=article&id=999');exit;}

SET UP A 404-PAGE (1)

In 3.1:defi ned('_JEXEC') or die;i f ( ! isset($this->error)){$this->error = JError: :raiseWarning(404, JText: :_( ' JERROR_ALERTNOAUTHOR')) ;$this->debug = false;}//get language and directi on$doc = JFactory: :getDocument() ;$this->language = $doc->language;$this->directi on = $doc->directi on;

i f ( ($this->error->getCode()) == '404') {header( 'Locati on: / index.php?opti on=com_content&view=arti cle&id= 999') ;exit ;}

SET UP A 404-PAGE (2)

404 errors should be avoidedLogical structure: www.website.com/products/shoes, make sure website

still works if "shoes" is removedMake sure URL's are rerouted if URL's are changed, like after renaming a

menu-itemLog 404-errors so you can correct them.

AVOID 404 ERRORS (1)

Monitor using Redirect Component (enable redirect-plugin):

AVOID 404 ERRORS (2)

301 tells Google to index the new page and keep the "authority" of the old page

Especially necessary if a site is changed or upgradedPro-acti ve bett er then re-acti vePro-acti ve: Before change:

Determine old URLs Determine new URLs Redirect old to new

Re-active: Aft er change Just monitor 404-errors Redirect logged errors

301-REDIRECTS (1)

Monitor 404-errors in Redirect component and set a desti nati onExtension: RedJ, SH404SEF, etc. In .htaccess, especially for pro-acti ve use:

RewriteRule ^oldpage1\.html$ "http://www.newsite.com/newpage1" [R=301,L]RewriteRule ^oldpage2\.html$ "http://www.newsite.com/newpage2" [R=301,L]etc.

301-REDIRECTS (2)

Robots.txt tells the bots from search enguines which URL's to ignoreUsed for directory structure, for Joomla content use the Robots settingShipped robots.txt is fine usually, except for one line:

Disallow: /images/ -> no images will be indexedRemove this line

Advanced: One short line will disallow al URL's with parameters, like non-SEF URL's, font-parameters etc. Be carefull not to block crucial pages:

Disallow: /*?*

ROBOTS.TXT

Usually globally set to INDEX, FOLLOWAlternatives: NINDEX, NOFOLLOW in all combinationsCan be overriden per article or menuCould be useful for login-pages, service-page, category views, etc.

ROBOTS SETTING IN JOOMLA

Generate sitemap from www.xml-sitemaps.com Use an extension like Xmap Review the generated sitemapSubmit to Webmaster Tools If done well, full sites may be indexed in 2 days

SITEMAP.XML

SH404SEFMijoSEF JoomSEFEasy Frontend SEONon SEF to SEFCanonicalRedJMore, like extensions that auto-generate metadata (less advisable)

EXTENSIONS (1)

SH404SEF:Similar to MijoSEF, JoomSEF, AceSEF (removed from JED)Reroutes non-SEF to SEFSet canonical tagMetadata and title managementMonitor and reroute 404-errorsAdditional features like short-URL's, social media, Analytics dashboard

and security, can all be switched offComplicated for beginning users, you MUST plan wellOnce configuration is set up, preferably don't touch If used incorrectly can screw up your site and Google rankings

EXTENSIONS (2)

OFF-SITE SEO

Register all your sites (validation via Analytics or HTML-fi le) Register www and non-www as separate sites and set preferred domain Set location for domains like .com, .net Register sitemap.xml (repeat for changed or new URL's) After live:

Monitor HTML-improvements Index-status Search traffi c (especially since Analytics shows "Not provided") Links to your site

Don't forget BING Webmaster Tools......

GOOGLE WEBMASTER TOOLS

Google Authorship

Adds your face in SERP'sSet-up Google+Verify email on your domainPerfect for small companiesCan increase CTR

Google Places

MORE GOOGLE TOOLS: DO AS GOOGLE WANTS YOU TO DO

• Perfect for local business• Easy to set up

• Picasa• Youtube• Etc.

More....

Outside scope of presentationBut: extremely importantBest: Great content that stimulates user to link to youOtherwise: Create your own links from authority sites:

Press-releasesDirectoriesLink-exchanges (carefull)

Make sure to keep a healthy link profi le Social media: Great if they generate traffi c, less important for SEO (yet)

LINKBUILDING AND SOCIAL MEDIA

Seorch.euLipperhey.comSEO doctor (Firefox extension)Etc.

VERIFY YOUR WORK

HOW TO SPEED UP YOUR SITE, KEEP VISITORS HAPPY -> GOOD FOR SEO

Joomla Performance and Speed

PageSpeed Insights from GoogleY-slow (as a browser extension)Pingdom ToolsGT-metrix (combines Pagespeed Insights and Y-slow in one go)Webpagetest.org

Actual loading ti me diff ers, but all provide very usefull data

CHECK BEFORE YOU MAKE CHANGES (1)

CHECK BEFORE YOU MAKE CHANGES (2)

Only load what you really needOnly install crucial front-end extensionsAvoid sliders (NOBODY clicks them, banner blindness)

http://shouldiuseacarousel.com/Avoid extensions loading from elsewhere (Facebook, Twitter,

Picasa, etc.), or move them away from Home Select your template carefullyYou could even de-install core- Joomla components, like

weblinks, contacts (or safer, de-activate)Keep up with updates (Joomla 3 is faster than 2.5), also for

EXTENSIONS AND TEMPLATES

Caching is the mechanism of storing previous views on the server, allowing for loading stored views, without re-generating thisSome disadvantages:

Users might see old views, missing recently updated informationSome extensions don't function well, like shopping carts or contact forms.

TestAdvantages:

FastFast Fast

JOOMLA CACHING (1)

1. Switch on cache in Global Confi gurati on, set to Conservati ve (can be overridden in modules)

2. Switch on "System-Cache" plugin (Leave "Use Browser Caching" to No, only usefull for sites where users oft er return to a page that they already accessed within a browsing session.)

JOOMLA CACHING (2)

Some of the downsides of the caching mechanisms can be avoided with extensions:

NoNumber's CacheCleaner can very easily clean up your cache in the backend. You can also set to auto-clean aft er every Save-acti on, or with intervals. Very usefull.

JOT-Cache: Allows for very specifi c setti ng of cache parameters. You can set diff erent levels per page /extensions, etc.

Cache Control

JOOMLA CACHE (3)

Supply your browser with informati on how and what to load from your siteETag - tells browsers when one image has already been downloaded and can be fetched

from the local browser cache instead from the serverExpires headers - similar to ETag but allows you to set diff erent expirati on ti mes for

diff erent fi le typesAddOutputFilterByType DEFLATE - minifi es the source code of your compiled HTML fi les

by removing empty lines, breaks and spacesCan be added automati cally by Jbetolo

LEVERAGE BROWSER CACHING (1)

LEVERAGE BROWSER CACHING (2)

G-ZIP packs your whole website in a zip-fi le which is decompressed in your browser. There should be no issue in using it, and performance gain can be quite big. It is supported in all browsers. Server should support mod_gzip / mod_deflate

Make sure your images are properly sized, don't use your editor to make images smaller, actually resize them.

If possible, use sprites to minimize HTTP-requestsStrip images from unnecessary data:

Photoshop: Save for web and devices. Use correct image qualityYahoo's Smush.it (included in Jbetolo)TinyPNG.com: Excellent for .png, better than Smush.itGT-Metrix provides stripped images as well

IMAGE SIZE (1)

IMAGE SIZE (2)

Try to combine CSS and JS as much as possible to minimize HTTP-requests Defer or Async Javascr ipt i f possible (fi rst load s ite, then execute Javascr ipt) Compress fi les as much as possible. For MooTools and Jquery, use compressed versions Remove MooTools and Jquery completely i f unused (true for many smaller s ites) . For MooTools, use the

"MooTools enabler/disabler plugin" Check i f extensions don't place unused Javascr ipt

Example: SH404SEF loads Facebook Javascr ipt unless social plugin is disabled NoNumber ReReplacer can come in handy for removing unwanted Javascr ipti f ( typeof( lpcurruser) == 'undefi ned') lpcurruser = ' ' ; i f (document.getElementById( ' lpcurruserelt ' ) && document.getElementById( ' lpcurruserelt ' ) .value != ' ' ) { lpcurruser = document.getElementById( ' lpcurruserelt ' ) .value; document.getElementById( ' lpcurruserelt ' ) .value = ' ' ; } i f ( typeof( lpcurrpass) == 'undefi ned') lpcurrpass=' ' ; i f (document.getElementById( ' lpcurrpasselt ' ) && document.getElementById( ' lpcurrpasselt ' ) .value != ' ' ) { lpcurrpass = document.getElementById( ' lpcurrpasselt ' ) .value; document.getElementById( ' lpcurrpasselt ' ) .value = ' ' ; } var lploc=1;var lponlyfi l l=nul l ;var l ink=document.getElementById(" i1668"); i f ( l ink&&typeof(g_lpcl icked)=="undefi ned"){if(document.createEventObject){var evt = document.createEventObject() ; l ink.fi reEvent("oncl ick",evt) ;}else{var evt2 = document.createEvent("MouseEvents") ;evt2. initMouseEvent("cl ick", true, true, document.defaultView, 1, 0, 0, 0, 0, fa lse, fa lse, false, fa lse, 0, nul l ) ; l ink.dispatchEvent(evt2);}g_lpcl icked=1;} i f( lploc==3){var pholders=["idDiv_PWD_UsernameExample"," idDiv_PWD_PasswordExample"," i0116_hint"," i0118_hint"] ; for(var i=0; i

CSS AND JAVASCRIPT (1)

JCH Optimize is a plugin that can handle all previously mentioned actions for CSS and Javascript. It can also generate sprites to reduce HTTP-requests for images.

Some options may need to be disabled, like combining CSS and deferring Javascript

Other plugin like this :Jbetolo, ScriptMerge

Try either one (not together), benefi ts can be huge!

CSS AND JAVASCRIPT (2)

A CDN stores stati c resources like images, css and javascript on multi ple off -site locati ons around the globe that are opti mized to deliver fast.

Some providers:Amazon, Google, MaxCDN, Cloudfl are

Especially useful for sites operati ng world-wide, large countries or locati ons with slow internet connecti ons

Siteground off ers free Cloudfl are without any confi gurati on (only with www-sites)Extensions:

CDN for Joomla (NoNumber)JBetoloJomCDN (CorePHP)

CONTENT DELIVERY NETWORK (1)

Example with Amazon Cloudfront and NoNumber CDN for JoomlaCreate Amazon account and sign up with CloudfrontCreate a distributi on: and record the Domain Name Install CDN for Joomla and confi gure plugin with Domain Name

CONTENT DELIVERY NETWORK (2)

Mobile devices often operate without wifi, so sites load slower. Possible solutions:

Use different template for mobileLoad content based on device:

User Agent Detector (Rene Kreijeveld)NoNumber Advanced Module Manager

MOBILE DEVICES

Look for a host that knows Joomla and has optimized their serversPHP up to datePossible options for further optimizationFor sites operating world-wide: nice to select location for data center

(USA, Europe, Asia)Large diff erences between hosts

WEBHOST

EXTENSIONS

CHECK AGAIN

Joomla SEO & Performance

Technology