evolve'13 | enhance | effective seo | paul legan

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








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.


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








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








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








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

<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

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








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








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








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

evolve'13 | enhance | effective seo | paul legan

Technology

content expiration

content tree

engaging content

base content page component

content marketing strategies

content authorsremove

duplicate content penalties

page properties field