Chrisdigital's Blog

Tech Notes, Code Tips, And Musings By Chris Carvey, NYC UI/UX Director

Powered by Genesis

You are here: Home / Archives for Bug fix

SEO in WordPress themes, duplicate meta description tags

February 27, 2010 By Chrisdigital 2 Comments

Look out for this bug in your WordPress theme header.php file and meta tags, increase SEO of your CMS templatesI’m using a theme for my blog called “Journalist”. I wanted something no-nonsense, with a minimalist 2 column layout that I could remix to my taste. Once I read Matt Mullenweg (founder of Automattic) uses it, I was sold. I realized when making this choice, I was using an older theme (optimized for 2.7) and I was aware it didn’t have some of the bells and whistles of some of the more expansive WordPress theme frameworks. This made me mindful to continually review what I was doing, looking out for conflicts with the latest WordPress install, and researching features I needed to add myself. I’m glad I stayed on top of this, because a SEO problem was occurring in my header.php file I didn’t catch originally when I was tweaking the theme.

Turns out my meta description tags were running in place

The problem is an easy one to overlook the first time around. Thanks to Pillar Consulting’s Keywordfriendly SEO tool I caught it. After reviewing the report it generated, I discovered I had multiple meta description tags in the head of my blog pages that were competing against each other. The first one being the standard tagline for the blog, and the second is the content compiled from the fields in All-in-one SEO plugin I installed. As Jeffrey Nichols points out, Google IGNORES the second one, defaulting to the first one it sees. Which confirmed my previous worries that something was off, after examination of my Google Alerts results for the blog. So, I was completely missing out the fruits of my diligent SEO work.

A really smart fix

So after a quick Google search I ran across Nathan Rice’s great post on taking complete control of your meta description tags titled Ultimate Guide to WordPress SEO – META Descriptions. This is a must read for any theme developer and I was able to apply his code as a quick fix to my problem.

I modified his code to alternate between the blog tagline and plugin generated meta description tags as needed, depending on whether you were on my homepage or not. Originally, his solution alternates between the tagline and your post excerpt (which is very cool).  So the end result is now that the search engines have a better idea of what I’m writing about, and on my terms.

If you’re not using a SEO-optimized WordPress theme, you might want to look into what’s going on in your header.php file(s) as well. SEO is fickle business.

More SEO Resources

1. Check out the Pillar Consulting Website, their blog and their Keywordfriendly tool.

2. Learn more about All-in-one SEO plugin.

3. Dig in with some more SEO tips and tools with Jeffery Nichols SEO Toolbox.

4. Learn more about Nathan Rice and what he does with WordPress.

5. Here’s a great series of tips for tuning your WordPress install for better SEO results.

Read more on ChrisDigital’s Digital Designer Blog:

1. The CMS Power of WordPress

2. WordPress line break bug in posts

Filed Under: WordPress Tagged With: Bug fix, Code, header.php, Meta tags, SEO, SEO blog theme, WordPress SEO template

WordPress line break bug in posts

February 16, 2010 By Chrisdigital Leave a Comment

distressed WordPress logo marking a persistent line break bug in the visual editorRecently I ran into a weird issue in WordPress as I was remixing an older theme for a friend’s blog. Like most people, I operate under the assumption that WordPress’ visual editor will work as the name sounds. But sometimes you can run into instances where the visual formatting of the entry/post you see in the control panel, does not match up with the content’s appearance on the blog. Glitches can show up when you hit the publish button, in this case- disappearing line breaks are the culprit. The source of the problem is likely a combination of at least two things…

Issue 1. CSS Styling in theme doesn’t provide spacing for line breaks

The theme you’re using probably doesn’t have a CSS style to address breathing room under <p> tags. This is assuming you know enough about HTML and CSS to try to manually format your post… (look for class tags like “.post_content” or “.entry-content” or something similar in your theme css code to edit.)

Why is that?

Some theme designers “zero out” all margin and padding settings on every page element GLOBALLY (eliminating browser defaults) and then manually put it back in various css styles or html tags (to their own taste) in their code as they develop their theme. Adding a padding adjustment to address this issue to your stylesheet is what’s needed here.

Tweaking or building a WordPress theme is a process that has a lot of moving parts, it’s no surprise this got overlooked until you started posting. It’s always a good idea to thoroughly preview a theme before you invest time in it, or pop some “dummy content” into your database so you can see how your aesthetic work is developing as you go.

Issue 2. It’s a bug

Let’s just make sure we’re running the latest WordPress upgrade. Sometimes that’s a magic elixir for a bug. In rare cases, it’s not an option to immediately upgrade your install – so keep reading.

There are notorious TinyMCE bug(s) in certain browsers. To be fair TinyMCE operates with JavaScript (which means it’s at the mercy of your browsers’ implementation of JavaScript standards.)

These issues have been around for a while, not recognizing visual line breaks or not supplying the underlying tags to display posts properly in HTML was just another one.

At least, that’s what I thought before I did some more digging….

No, It’s a feature

Turns out, this seems to be a “feature” of TinyMCE, to strip <br/> and <p> tags from posts at “save” (for XHTML compliance reasons and consistent behavior across browsers.)

Whatever the cause, it’s a source of pain for blog editors when it rears it’s ugly head. You can see a discussion here with several attempts at a work-around in WordPress forums.

My Solution:

I took the alignment advice of forum poster “dandelph” (towards the bottom of the above discussion) in combination with an edit to my “style.css” file:

Step 1. Style it

I added a case to address this in my style.css file: .post_content p {padding-bottom:10px;} //adds 10px of padding under each tag

Step 2. Give TinyMCE a reason to keep the tag

I added the post as usual via typing or cutting and pasting it from plain text in Visual Editor mode. Set up my line breaks as desired, then I highlighted it all and hit the left align button in the visual editor tool bar (behind the scenes this wraps all the paragraphs in <p style=”text-align: left;”></p> tags) You can verify quickly by toggling over to HTML mode in the editor. The reason this works apparently is the editor understands the tags are necessary to force left alignment and leaves them alone. Go figure.

Step 3. Stick the landing

Hit “Save/Publish” button and you should be all good.

Extra Credit: Plugins and hack fixes

The WordPress plugin developer community is definitely on top of this, and those of you out there that like to muck around in code can look up how to hack the TinyMCE build that shipped with WordPress.

Here’s a post over at WP Garage that covers WordPress/Tiny MCE plugins and hacks pretty well.

WP Garage mentions a plugin that “upgrades” WordPress’ native WYSIWYG Editor to TinyMCE-Advanced. This plugin provides a suite of tweaks to TinyMCE including access to your visual editor controls. Once you activate TinyMCE-Advanced, you should see a checkbox in WordPress settings you can use to toggle the code stripping feature on or off. You also end up with a wider variety of options for your visual editor tool bar, and the editor should start behaving more like you expected.

Read more on ChrisDigital’s Digital Designer Blog:

1. The CMS Power of WordPress

2. SEO in WordPress themes, duplicate meta description tags

3. Exploring web fonts, moving beyond Arial and Verdana

Filed Under: WordPress Tagged With: blog theming, Bug fix, fixing WordPress line breaks, Line break, Plugins, Post formatting, TinyMCE, WordPress line break bug, WordPress theme tip