EVOLVE'13 | Enhance | Effective SEO | Paul Legan

17,805

Published on

Code samples @ http://db.tt/lUp4uB6j

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
17,805
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
38
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Mixed opinions on this from a privacy stand point (what do companies such as Google actually know about me?)However, we can all probably agree on one thing.
  • I look at myself at an example, although it probably doesn't paint me in a good light. I've noticed that in the past 2-3 years, I've been less and less able to sit down and watch a full movie unless I go to the theater. I usually have an iPad or a laptop at my side to look up information about what I'm watching or to informally catch up on work.
  • Released in February 2011Aimed to weed out “lower quality” websites from its rankings
  • Talk about component inheritance for page componentsTalk about possibly renaming the include to something related to META
  • Talk about component inheritance for page componentsTalk about possibly renaming the include to something related to META
  • Content is required, but remember that user experience is critical to solid search engine rankings.
  • Since both Matt Cutts and Bing’s Duane Forrester have suggested that bounce rate is used to calculate search engine rankings, most SEO strategists hypothesize the use of a separate “actual” bounce rate that factors in things like dwell time (the time spent on a bounced site) and type of content to get a better picture of what a site’s bounce rate means.According to Glenn Gabe, writing for Search Engine Journal:“There are several other ways that the engines can determine if a piece of content has a high bounce rate (actual bounce rate). Using these methods, the engines can build a more rounded view of your content with regard to actual engagement.”
  • In general: If the header only contains a heading, you could omit it.If the main content of the page could stand on its own (e.g. like a blog post or similar), then you could use article instead of section.As the #featured-content is some kind of abstract/summary of the main content, it should be part of the article. It makes sense to include it in the header:
  • WebVTT vs. TTML (Captions formats)
  • Schema.org - http://www.schema.org/docs/gs.html#microdata_how
  • Schema.org - http://www.schema.org/docs/gs.html#microdata_how
  • Schema.org - http://www.schema.org/docs/gs.html#microdata_how
  • Three Steps:1)
  • Robots.txt based on a tag – automatically added to the robots.txt fileMake sure that the /content tree is in the robots.txt file (since after the Apache rewrites, this still is a valid path)
  • YSlow - http://developer.yahoo.com/yslow/Google Page Speed - https://developers.google.com/speed/pagespeed/The slower your site, the fewer pages Googlebot tends to crawl.
  • There are many great examples around the Internet.Integrate your brand into EVERY page of your site, including the pages you’d prefer your users not to see.
  • http://www.google.com/webmasters/tools/richsnippets
  • http://www.google.com/webmasters/tools/richsnippets
  • http://www.google.com/webmasters/tools/richsnippets
  • http://www.google.com/webmasters/tools/richsnippets
  • EVOLVE'13 | Enhance | Effective SEO | Paul Legan

    1. 1. 1 EFFECTIVE SEO IN ADOBE WEM Best Practices and Implementation Strategies
    2. 2. 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. 3. 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. 4. 4 INTRODUCTION So what? How do I know that? Google told me.
    5. 5. 5 INTRODUCTION So what? Why is that important? We rely heavily on search.    (and we are increasingly impatient!)
    6. 6. 6 INTRODUCTION Search trends tell a lot
    7. 7. 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. 8. 8 INTRODUCTION It really is good This is good for us both as developers and consumers. 
    9. 9. 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. 10. 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. 11. 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. 12. 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. 13. 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 AGENDA Currently
    14. 14. 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. 15. 15 TITLES, DESCRIPTIONS, AND NAVIGATION 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. 16. 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 NAVIGATION 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. 17. 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 NAVIGATION Use Your <HEAD>
    18. 18. 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 NAVIGATION Navigation is Not Just for Google 75% of Internet users are search-dominant (vs. link-dominant).
    19. 19. 19 Always remind the user of where they are within the site. Why? They will likely forget. TITLES, DESCRIPTIONS, AND NAVIGATION Navigation is Not Just for Google
    20. 20. 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 NAVIGATION Navigation is Not Just for Google
    21. 21. 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 AGENDA Currently
    22. 22. 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> <!-- or article --> <h3>…</h3> </section> </aside> <footer></footer> </body>
    23. 23. 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. 24. 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. 25. 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. 26. 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 AGENDA Currently
    27. 27. 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. 28. 28 INCORPORATING ASSETS FROM THE DAM 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. 29. 29 INCORPORATING ASSETS FROM THE DAM 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. 30. 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 AGENDA Currently
    31. 31. 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. 32. 32 MICROFORMATS AND AUTHORSHIP 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. 33. 33 MICROFORMATS AND AUTHORSHIP Social 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. 34. 34 MICROFORMATS AND AUTHORSHIP 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. 35. 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 AGENDA Currently
    36. 36. 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. 37. 37 DON’T FORGET THE WEB SERVER 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. 38. 38 DON’T FORGET THE WEB SERVER 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. 39. 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 AGENDA Currently
    40. 40. 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. 41. 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. 42. 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 AGENDA Currently
    43. 43. 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. 44. 44 QUESTIONS And Hopefully Answers Thanks for your time! Q&A
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×