HTML5 & SEO in WordPress Development  <ul><li>What You Need To Know </li></ul>
Fundamentals of WordPress SEO <ul><li>On-Page SEO </li></ul><ul><ul><li>On Keywords & SEO </li></ul></ul><ul><ul><li>Page ...
Making SEO Easy in WordPress
Just Add Keywords
Page Title: Use Keywords Up Front <ul><li>Make sure the page titles display “up front” </li></ul><ul><li>“ YourWebsite| Ke...
URL: Use Pretty Permalinks <ul><li>Always make sure to use Pretty Permalinks </li></ul><ul><li>Make sure to use Blog Post ...
Headers: Display as Post Titles <ul><li>Single.php </li></ul><ul><li>Style.css </li></ul><h1  class= &quot;title&quot; > <...
Meta Description: Make it Relevant <meta name=&quot;description&quot; content=&quot;<?php bloginfo('description'); ?>&quot...
Meta Keywords
HTML5 & SEO in WordPress Development  <ul><li>Moving to HTML5 & Semantic Search </li></ul>
HTML5 Isn’t Scary <ul><li>A few tags to think about: </li></ul><ul><li><header> / <footer> </li></ul><ul><li><hgroup> </li...
SEO Isn’t Scary <ul><li>Building for the Right Keywords </li></ul><ul><li>Link Building </li></ul><ul><li>Today’s Topics: ...
Our Goal: A Clear Layout
Breaking Them Down
What do we need to know? <ul><li>Semantic Search Is Coming </li></ul><ul><li>As developers, we want to be on the forefront...
What about backwards compatibility? <ul><li>HTML5 rolls back to older browsers pretty well, with the exception of older ve...
What about backwards compatibility? <ul><li>IE7 and 8 have no built-in HTML5 semantic tag support </li></ul><ul><li>IE9 fi...
How does HTML5 help? <ul><li>Replace layered divs with article, section, and related tags </li></ul><ul><li>Semantic tags ...
How does HTML5 help? <ul><li>Semantic Search: What if every page result could look like IMDB results? </li></ul>
What does this look like in WP?
What does this look like in WP?
Often-Missed SEO Factors <ul><li>Page load time </li></ul><ul><li>Page render time </li></ul><ul><li>Improving these two f...
Simplify, simplify <ul><li>Identify what takes a long time </li></ul><ul><li>Reduce / Reuse Javascript & CSS </li></ul><ul...
Identify What Takes Your Time <ul><li>Firebug:  “Net” Function </li></ul><ul><li>Called “Profiler” in IE or “Timeline” in ...
Optimize Your Images <ul><li>Make sure you are using web-safe images that are compressed properly </li></ul><ul><li>Avoid ...
What Else Can I Do To Get Faster? <ul><li>If you’re coding a theme for just one site, you have a lot of options! </li></ul...
Sources/Further Reading <ul><li>Anatomy of an HTML5 WordPress theme </li></ul><ul><li>Website Optimization: The Why and Ho...
Sources/Further Reading <ul><li>Dive Into HTML5 by Mark Pilgrim </li></ul><ul><li>Remy Sharp’s Script for enabling HTML5 i...
Upcoming SlideShare
Loading in …5
×

HTML, WordPress, and SEO

1,377 views

Published on

  • Be the first to comment

  • Be the first to like this

HTML, WordPress, and SEO

  1. 1. HTML5 & SEO in WordPress Development <ul><li>What You Need To Know </li></ul>
  2. 2. Fundamentals of WordPress SEO <ul><li>On-Page SEO </li></ul><ul><ul><li>On Keywords & SEO </li></ul></ul><ul><ul><li>Page Title </li></ul></ul><ul><ul><li>URL (Pretty Permalinks) </li></ul></ul><ul><ul><li>Headers (H1, H2, H3, etc) </li></ul></ul><ul><ul><li>Meta Description </li></ul></ul><ul><ul><li>Meta Keywords </li></ul></ul>
  3. 3. Making SEO Easy in WordPress
  4. 4. Just Add Keywords
  5. 5. Page Title: Use Keywords Up Front <ul><li>Make sure the page titles display “up front” </li></ul><ul><li>“ YourWebsite| Keyword Rich Page or Post Title” </li></ul><title> <?php wp_title(' | ', true ,' right '); ?> <? php bloginfo(' name '); ?> </title> <title> <?php bloginfo('name'); ?> <?php wp_title();  ?> </title>
  6. 6. URL: Use Pretty Permalinks <ul><li>Always make sure to use Pretty Permalinks </li></ul><ul><li>Make sure to use Blog Post / Page Title in the URL </li></ul><ul><li>Settings >> Permalinks </li></ul><ul><li>/%postname%/ </li></ul><ul><li>/%category%/%postname%/ </li></ul>http://yourwebsite.com/?p=123 http://yourwebsite.com/archives/123 <ul><li>http://yourwebsite.com/keyword-rich-post-name/ </li></ul>
  7. 7. Headers: Display as Post Titles <ul><li>Single.php </li></ul><ul><li>Style.css </li></ul><h1 class= &quot;title&quot; > <?php the_title(); ?> </h1>
  8. 8. Meta Description: Make it Relevant <meta name=&quot;description&quot; content=&quot;<?php bloginfo('description'); ?>&quot; /> <?php if ( is_single () || is_page () ) : if ( have_posts () ) : while ( have_posts () ) : the_post () ; ?> < meta name= &quot; description &quot; content= &quot; <?php the_excerpt () ; ?> &quot; /> <?php endwhile; endif; elseif(is_home ()) : ?> < meta name= &quot; description &quot; content= &quot; <?php bloginfo( 'description' ); ?> &quot; /> <?php endif ; ?>
  9. 9. Meta Keywords
  10. 10. HTML5 & SEO in WordPress Development <ul><li>Moving to HTML5 & Semantic Search </li></ul>
  11. 11. HTML5 Isn’t Scary <ul><li>A few tags to think about: </li></ul><ul><li><header> / <footer> </li></ul><ul><li><hgroup> </li></ul><ul><li><nav> </li></ul><ul><li><article> </li></ul><ul><li><section> </li></ul><ul><li><time> </li></ul><ul><li><aside> </li></ul>
  12. 12. SEO Isn’t Scary <ul><li>Building for the Right Keywords </li></ul><ul><li>Link Building </li></ul><ul><li>Today’s Topics: </li></ul><ul><li>Help SEs Understand Your Layout </li></ul><ul><li>Having an Optimized Site </li></ul>
  13. 13. Our Goal: A Clear Layout
  14. 14. Breaking Them Down
  15. 15. What do we need to know? <ul><li>Semantic Search Is Coming </li></ul><ul><li>As developers, we want to be on the forefront of it (and our customers want to, too!) </li></ul><ul><li>You Can’t Fool SEs (for long) </li></ul>
  16. 16. What about backwards compatibility? <ul><li>HTML5 rolls back to older browsers pretty well, with the exception of older versions of IE </li></ul>
  17. 17. What about backwards compatibility? <ul><li>IE7 and 8 have no built-in HTML5 semantic tag support </li></ul><ul><li>IE9 fixes this </li></ul><ul><li>Why this is a problem: IE doesn’t style unrecognized elements </li></ul><ul><li>Until then: Elements created via JS will be recognized & styled </li></ul><ul><li>See Remy Sharp’s script in the notes </li></ul>
  18. 18. How does HTML5 help? <ul><li>Replace layered divs with article, section, and related tags </li></ul><ul><li>Semantic tags give the SEs inside info </li></ul><ul><ul><li>For the first time, a search engine can now tell where the main article is, what your header is, etc. </li></ul></ul><ul><ul><li>Comments can be read separately and understood </li></ul></ul>
  19. 19. How does HTML5 help? <ul><li>Semantic Search: What if every page result could look like IMDB results? </li></ul>
  20. 20. What does this look like in WP?
  21. 21. What does this look like in WP?
  22. 22. Often-Missed SEO Factors <ul><li>Page load time </li></ul><ul><li>Page render time </li></ul><ul><li>Improving these two factors will yield more indexed pages, more crawl time, and better rankings </li></ul>
  23. 23. Simplify, simplify <ul><li>Identify what takes a long time </li></ul><ul><li>Reduce / Reuse Javascript & CSS </li></ul><ul><li>Optimize images </li></ul>
  24. 24. Identify What Takes Your Time <ul><li>Firebug: “Net” Function </li></ul><ul><li>Called “Profiler” in IE or “Timeline” in Safari </li></ul><ul><li>Will help you pinpoint the bad points </li></ul><ul><li>Social Media-related JS is popular… </li></ul><ul><ul><li>But it has a high cost </li></ul></ul><ul><ul><li>You become dependent on their uptime and their load </li></ul></ul>
  25. 25. Optimize Your Images <ul><li>Make sure you are using web-safe images that are compressed properly </li></ul><ul><li>Avoid images when possible & use CSS </li></ul><ul><li>Stick with PNG unless it’s a photo or you need transparency </li></ul><ul><li>For computer-generated images, JPEG can be 33-50% bigger and will have more artifacts </li></ul>
  26. 26. What Else Can I Do To Get Faster? <ul><li>If you’re coding a theme for just one site, you have a lot of options! </li></ul><ul><li>Hardcode Names & Values </li></ul><ul><li>Optimize Your CSS/JS </li></ul><ul><li>Make sure you’re using server-side caching </li></ul>
  27. 27. Sources/Further Reading <ul><li>Anatomy of an HTML5 WordPress theme </li></ul><ul><li>Website Optimization: The Why and How (Part II) </li></ul><ul><li>CSSOptimiser.com </li></ul><ul><li>HTML5 & CSS3 </li></ul>
  28. 28. Sources/Further Reading <ul><li>Dive Into HTML5 by Mark Pilgrim </li></ul><ul><li>Remy Sharp’s Script for enabling HTML5 in IE </li></ul><ul><li>A List Apart: Preview of HTML5 </li></ul>

×