Post on 15-Jan-2015
description
1
EFFECTIVE SEO IN ADOBE WEM
Best Practices and Implementation Strategies
2
INTRODUCTIONWho am I?
Paul Legan
Managing Partner at 3|SHARE Corporation
• Background in Economics and Computer Science
• Past work experience in marketing and IT
• Strong interest in user experience and responsive design
• Currently reside in Washington, D.C.
3
INTRODUCTIONLet’s pick a number…
110,585Number of Google searches I have
performed since 2007.
(In case you are wondering, that is just over 50/day.)
4
INTRODUCTIONSo what?
How do I know that?Google told me.
5
INTRODUCTIONSo what?
Why is that important?We rely heavily on search.
🍜 🐦🍜(and we are increasingly impatient!)
6
INTRODUCTIONSearch trends tell a lot
7
INTRODUCTIONGoogle is a user, too
With each Google
algorithm update, we
see more focus placed
on user experience than
on strict keyword
analysis.
8
INTRODUCTIONIt really is good
This is good for us both
as developers and
consumers.👍
9
INTRODUCTIONThere’s a lot to search
Now content needs render
quickly, be relevant, engage
the reader and follow a
structure.
Less room to fool search
engines by focusing just on
keywords.
10
INTRODUCTIONSo we need great content
While Adobe WEM won’t write
your copy for you, it will make it
easier than ever to create
meaningful and engaging
content.
11
• Titles, Descriptions, and Navigation
• Content Structure
• Incorporating Assets from the DAM
• Microformats and Authorship
• Don’t Forget the Web Server
• Empowering Content Authors with Custom Tools
• Beyond SEO: The User Experience
AGENDAWhat’s the plan?
12
We WILL:
• Cover on-page optimization techniques.
• Discuss out-of-the-box component functionality.
• Investigate custom tools for content authors.
We WILL NOT:
• Go over link-building strategies (directly).
• Cover social media integration.
• Discuss content marketing strategies.
AGENDASetting Expectations
13
• Titles, Descriptions, and Navigation
• Content Structure
• Incorporating Assets from the DAM
• Microformats and Authorship
• Don’t Forget the Web Server
• Empowering Content Authors with Custom Tools
• Beyond SEO: The User Experience
AGENDACurrently
14
TITLES, DESCRIPTIONS, AND NAVIGATIONCreating New Pages
• Page names determine the end URL, so
give them significant attention.
• Tips:
• Use relevant keywords!
• Use hyphens to separate those keywords
• Consider page hierarchy so as not to
duplicate important keywords
15
TITLES, DESCRIPTIONS, AND NAVIGATIONDe-clutter Page Properties
• By default, the Page Properties dialog
includes a lot of fields.
• As a developer, we have two options:
• Add field descriptions for content
authors
• Remove fields that are unnecessary to
the application
• There is no benefit to presenting
content authors with too many options.
16
• OOTB CQ page component includes a “headlibs.jsp” – probably looks
something like this:
• A lot of the default META tags are not necessary and should probably be
removed from the base content page component.
TITLES, DESCRIPTIONS, AND NAVIGATIONUse Your <HEAD>
if(!properties.get("cq:lastModifiedBy", "").equals("")) { %><meta name="author" content="<%= StringEscapeUtils.escapeHtml4(properties.get("cq:lastModifiedBy", "")) %>"<%=xs%>><%}
if(!properties.get("jcr:title", "").equals("")) { %><meta name="title" content="<%= StringEscapeUtils.escapeHtml4(properties.get("jcr:title", "")) %>"<%=xs%>><%}
17
• Here are some key properties to consider for your <HEAD> section:
• Set the character set (Charset Attribute)
• Description
• Canonical URL for Dynamic Pages (hopefully you don’t have query strings)
• Google “notranslate” – disable links to translations via Google results
• Robots “noindex” – useful for page-level exclusion from indexing
TITLES, DESCRIPTIONS, AND NAVIGATIONUse Your <HEAD>
18
Navigation is important, but so is a search box – provide proper search for users
who prefer it to deep navigation menus
TITLES, DESCRIPTIONS, AND NAVIGATIONNavigation is Not Just for Google
75% of Internet users are search-dominant (vs. link-dominant).
19
Always remind the user of where they are within the site.
Why?
They will likely forget.
TITLES, DESCRIPTIONS, AND NAVIGATIONNavigation is Not Just for Google
20
• Ensure navigation works without JavaScript
• Use text/CSS, not images for navigation
links
• Shallow navigation reduces bounce rates
and page load times, both suspected to
improve search engine rankings
TITLES, DESCRIPTIONS, AND NAVIGATIONNavigation is Not Just for Google
21
• Titles, Descriptions, and Navigation
• Content Structure
• Incorporating Assets from the DAM
• Microformats and Authorship
• Don’t Forget the Web Server
• Empowering Content Authors with Custom Tools
• Beyond SEO: The User Experience
AGENDACurrently
22
CONTENT STRUCTUREStructure Your Content with Intent
• Semantic code is – and always will be – a relevant part of SEO!
• Remember, it is called a document tree for a reason.
<body> <h1>…</h1> <article> <h2>…</h2> </article> <aside> <h2>…</h2> <section> <!-- or article --> <h3>…</h3> </section> </aside> <footer></footer></body>
23
CONTENT STRUCTUREBody Classes as a Preventative Measure
• Many structural shortcuts are taken to accommodate multiple layouts – why
not avoid this situation from the start?
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <title>WEM is cool!</title></head> <body class="<%=currentPage.getName()%>">
</body></html>
24
CONTENT STRUCTURERemove Superfluous HTML
• CQ components generate mounds of additional HTML that may or may not
be necessary. To remove, you can use the property cq:noDeclaration=true
<%@ include file="/libs/foundation/global.jsp" %><%@ page contentType="text/html; charset=utf-8" import="com.day.cq.wcm.api.WCMMode" %><% String classNames = componentContext.getCssClassNames();if (WCMMode.fromRequest(request) == WCMMode.DISABLED) classNames = classNames.replaceAll("[a-zA-Z0-9_\\-]+ ?", "prefix-$0");%><div class="<%= classNames %>"> <%-- Component Content Goes Here --%></div>
25
CONTENT STRUCTUREEnable Only Components That are Necessary
• If possible, make the one and only H1 header tag part of the page template
• Some places to check:
• RTE Editor Formatting
Dropdown
• Title Component
26
• Titles, Descriptions, and Navigation
• Content Structure
• Incorporating Assets from the DAM
• Microformats and Authorship
• Don’t Forget the Web Server
• Empowering Content Authors with Custom Tools
• Beyond SEO: The User Experience
AGENDACurrently
27
INCORPORATING ASSETS FROM THE DAMDAM Metadata and Filenames
• Three important factors to consider:
• File size
• Use a non-destructive image optimizer such as ImageOptim to reduce the size
of your images and improve page load time
• Filename
• Keywords in filenames are important for image search as well as site credibility;
image search is a surprisingly important traffic source for retail products
• ALT text
• This is the text that search engines use to understand images, so be wise with
your ALT text content.
28
INCORPORATING ASSETS FROM THE DAMOOTB Image Component
• Yes, the ALT text is important, but the Description/Caption is also critical!
• Again, bounce rates
play a part in determining
website importance, so a
caption is pivotal
• Many clients choose to
develop a custom Image
component, so be sure to
include a caption field or
a similar solution
29
INCORPORATING ASSETS FROM THE DAMVIDEO Tag, Transcripts, and Accessibility
• HTML5 defines both VIDEO and TRACK tags for use when embedding videos
• The TRACK tag can include a reference to a servlet (or selector handler) that
pulls track captions from a metadata field on the asset
<video width="320" height="240"> <source type="video/mp4" src=”paul.mp4" > <track src=” paul.TTV.mp4" label="English Captions" kind="captions”> </video>
String assetPath = request.getParameter("asset");if ( (assetPath != null) && (resourceResolver.adaptTo(Session.class).nodeExists(assetPath)) ) { Asset asset = resourceResolver.getResource(assetPath).adaptTo(Asset.class); String caption = asset.getMetadataValue("dc:trackCaptions"); return caption;}
30
• Titles, Descriptions, and Navigation
• Content Structure
• Incorporating Assets from the DAM
• Microformats and Authorship
• Don’t Forget the Web Server
• Empowering Content Authors with Custom Tools
• Beyond SEO: The User Experience
AGENDACurrently
31
MICROFORMATS AND AUTHORSHIPGoogle Rich Snippets
• If Google understands the content
on a page, it will create a rich
snippet to help users with specific
queries
• Google supports rich snippets for:
• Reviews
• People & Products
• Businesses
• Recipes
• Events
• Musichttp://www.google.com/webmasters/tools/richsnippets
32
MICROFORMATS AND AUTHORSHIPGoogle Rich Snippets
• Full Event example (via Schema.org):
<div itemscope itemtype="http://schema.org/Event"> <a itemprop="url" href="nba-miami-philidelphia-game3.html"> NBA Eastern Conference First Round Playoff Tickets: <span itemprop="name"> Miami Heat at Philadelphia 76ers - Game 3 (Home Game 1) </span></a> <meta itemprop="startDate" content="2016-04-21T20:00"> Thu, 04/21/16 8:00 p.m. <div itemprop="location" itemscope itemtype="http://schema.org/Place"> <a itemprop="url" href="wells-fargo-center.html”>Wells Fargo Center</a> <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> <span itemprop="addressLocality">Philadelphia</span>, <span itemprop="addressRegion">PA</span> </div> </div></div>
33
MICROFORMATS AND AUTHORSHIPSocial Application Metadata
<!-- Windows 8 --><meta name="application-name" content="" /> <meta name="msapplication-TileColor" content="" /> <meta name="msapplication-TileImage" content="" /><!-- Twitter --><meta name="twitter:card" content=""><meta name="twitter:site" content=""><meta name="twitter:title" content=""><meta name="twitter:description" content=""><meta name="twitter:url" content=""><!-- Facebook --><meta property="og:title" content="" /><meta property="og:description" content="" /><meta property="og:url" content="" /><meta property="og:image" content="" />
34
MICROFORMATS AND AUTHORSHIPWhy Google Authorship Matters
• Google Authorship lets you connect content with your Google+ profile
• Utilizes the rel=“author” attribute on links to content
• Authors can build a following and establish themselves as subject matter
experts
• Remember, bounce rates are important!
35
• Titles, Descriptions, and Navigation
• Content Structure
• Incorporating Assets from the DAM
• Microformats and Authorship
• Don’t Forget the Web Server
• Empowering Content Authors with Custom Tools
• Beyond SEO: The User Experience
AGENDACurrently
36
DON’T FORGET THE WEB SERVERSitemap Generation and Robots
• Sitemap.xml and Robots.txt files
should be generated automatically
by CQ
• One method is to utilize tags within
the Page Properties field to
determine which pages get added
to robots.txt for exclusion
• Be sure to remove the /content
structure if you are rewriting URLs
to avoid duplicate content penalties
// get the QueryBuilderQueryBuilder queryBuilder = getQueryBuilder();
// do a simple predicate searchMap map = new HashMap();map.put("path", "/content/client");map.put("p.limit", "10000");map.put("type", "cq:Page");map.put("tagid", ”client:nosearch");map.put("tagid.property", "@jcr:content/cq:tags");
// run the queryQuery query = createQuery(map);
[…]
// ultimately output to the robots.txt file<%="Disallow: " + pagePath + ".html"%>
37
DON’T FORGET THE WEB SERVERCompression, Content Expiration and Page Speed
• Google’s search-ranking algorithm considers page speed as a signal
• Use mod_expires in Apache to adjust content expiration:
• Enable GZIP Compression:
<IfModule mod_expires.c> <FilesMatch "\.( jpe?g|png|gif|js|css)$"> ExpiresActive On ExpiresDefault "access plus 1 week" </FilesMatch></IfModule>
# Compress certain file types by extension:<files *.html>SetOutputFilter DEFLATE</files>
38
DON’T FORGET THE WEB SERVERCustom Error Pages
• Many people overlook the opportunities presented by an error page
• An error page can allow users to discover newer, more relevant content
• Worst case users will appreciate a personalized error message
In the repository, copy the scripts at /libs/sling/servlet/errorhandler/ to /apps/sling/servlet/errorhandler/. This path will likely not exist.
Within /apps/sling/servlet/errorhandler, you can:1. Use the existing script.2. Create and edit a new script.
39
• Titles, Descriptions, and Navigation
• Content Structure
• Incorporating Assets from the DAM
• Microformats and Authorship
• Don’t Forget the Web Server
• Empowering Content Authors with Custom Tools
• Beyond SEO: The User Experience
AGENDACurrently
40
EMPOWERING AUTHORS WITH CUSTOM TOOLSIntegrating Third-Party Services - Simple
• The CQ Sidekick can be extended via JavaScript in
a client library.
CQ.Ext.namespace("seo", "seo.tools");
// Custom Action for the buttonseo.tools.KincaidAction = { "text": "Check Flesch–Kincaid Score", "context": CQ.wcm.Sidekick.PAGE, "handler": function() { window.open("http://www.readability-score.com/"); }};
// add this action to the default listCQ.wcm.Sidekick.DEFAULT_ACTIONS.push(seo.tools.KincaidAction);
41
EMPOWERING AUTHORS WITH CUSTOM TOOLSIntegrating Third-Party Services - Complex
• There’s nothing stopping you from going further and
integrating third-party services into the Sidekick (except
maybe a budget or two!)
CQ.wcm.Sidekick.CONTEXTS = [ CQ.wcm.Sidekick.PAGE, CQ.wcm.Sidekick.COMPONENTS, CQ.wcm.Sidekick.WORKFLOW, CQ.wcm.Sidekick.VERSIONING, CQ.wcm.Sidekick.INFO, CQ.wcm.Sidekick.MY_CUSTOM_CONTEXT];
42
• Titles, Descriptions, and Navigation
• Content Structure
• Incorporating Assets from the DAM
• Microformats and Authorship
• Don’t Forget the Web Server
• Empowering Content Authors with Custom Tools
• Beyond SEO: The User Experience
AGENDACurrently
43
BEYOND SEO: THE USER EXPERIENCEThink Logically
1. Think about everything that
frustrates you as a software user.
2. Don’t assume anything.
3. Guide, but do not restrict the content
author.
4. Enable the creation of great
documentation.
5. Always simplify.
* Via ExpoImages
44
QUESTIONSAnd Hopefully Answers
Thanks for your time!
Q&A