EVOLVE'13 | Enhance | Effective SEO | Paul Legan

1
EFFECTIVE SEO IN ADOBE WEM
Best Practices and Implementation Strategies

2
INTRODUCTION
Who 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
INTRODUCTION
Let’s pick a number…
110,585
Number of Google searches I have performed
since 2007.
(In case you are wondering, that is just over 50/day.)

4
INTRODUCTION
So what?
How do I know that?
Google told me.

5
INTRODUCTION
So what?
Why is that important?
We rely heavily on search.
🐦 🍜
(and we are increasingly impatient!)

6
INTRODUCTION
Search trends tell a lot

7
INTRODUCTION
Google is a user, too
With each Google algorithm
update, we see more focus
placed on user experience
than on strict keyword
analysis.

8
INTRODUCTION
It really is good
This is good for us both as
developers and consumers.
👍

9
INTRODUCTION
There’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
INTRODUCTION
So 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
AGENDA
What’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.
AGENDA
Setting Expectations

13
AGENDA
Currently

14
TITLES, DESCRIPTIONS, AND NAVIGATION
Creating 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
De-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.
Use 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
Use Your <HEAD>

18
Navigation is important, but so is a search box – provide proper search for users who
prefer it to deep navigation menus
Navigation 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.

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

21
AGENDA
Currently

22
CONTENT STRUCTURE
Structure 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>
<h3>…</h3>
</section>
</aside>
<footer></footer>
</body>

23
CONTENT STRUCTURE
Body 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 STRUCTURE
Remove 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 STRUCTURE
Enable 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
AGENDA
Currently

27
INCORPORATING ASSETS FROM THE DAM
DAM 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
OOTB 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
VIDEO 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
AGENDA
Currently

31
MICROFORMATS AND AUTHORSHIP
Google 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
• Music
http://www.google.com/webmasters/tools/richsnippets

32
Google 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
Social Application Metadata

<meta name="application-name" content="" />
<meta name="msapplication-TileColor" content="" />
<meta name="msapplication-TileImage" content="" />

<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="">

<meta property="og:title" content="" />
<meta property="og:description" content="" />
<meta property="og:url" content="" />
<meta property="og:image" content="" />

34
Why 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
AGENDA
Currently

36
DON’T FORGET THE WEB SERVER
Sitemap 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 QueryBuilder
QueryBuilder queryBuilder = getQueryBuilder();
// do a simple predicate search
Map 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 query
Query query = createQuery(map);
[…]
// ultimately output to the robots.txt file
<%="Disallow: " + pagePath + ".html"%>

37
Compression, 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
Custom 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
AGENDA
Currently

40
EMPOWERING AUTHORS WITH CUSTOM
TOOLS
Integrating 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 button
seo.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 list
CQ.wcm.Sidekick.DEFAULT_ACTIONS.push(seo.tools.KincaidActi
on);

41
EMPOWERING AUTHORS WITH CUSTOM
TOOLS
Integrating 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
AGENDA
Currently

43
BEYOND SEO: THE USER EXPERIENCE
Think 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
QUESTIONS
And Hopefully Answers
Thanks for your time!
Q&A

EVOLVE'13 | Enhance | Effective SEO | Paul Legan

More Related Content

EVOLVE'13 | Enhance | Effective SEO | Paul Legan

Editor's Notes