HTML, WordPress, and SEO
Upcoming SlideShare
Loading in...5
×
 

HTML, WordPress, and SEO

on

  • 1,398 views

 

Statistics

Views

Total Views
1,398
Views on SlideShare
1,379
Embed Views
19

Actions

Likes
0
Downloads
4
Comments
0

2 Embeds 19

http://bostonwp.org 16
http://kurteng.com 3

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Remy Sharp’s Script for enabling HTML5 in IE

HTML, WordPress, and SEO HTML, WordPress, and SEO Presentation Transcript

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