Breadcrumbs do not validate as HTML5

  • tolgapaksoy

    (@tolgapaksoy)


    11 years, 1 month ago

    I am using WordPress version 3.5.1

    I am using WordPress SEO version 1.4.2

    When I run my website through a validator, they always complain about the xhtml attributes in the breadcrumbs.

    There is a microformat for breadcrumbs, found here: http://microformats.org/wiki/breadcrumbs-formats

    Which would make the breadcrumbs something like this:

    <div class="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a class="breadcrumb-link" href="/" itemprop="url">
    <span itemprop="title">Home</span>
  </a> >
  <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb" style="display: inline;">
    <a class="breadcrumb-link trail" href="/child" itemprop="url">
      <span itemprop="title">Child</span>
    </a> >
  </div>
</div>

    The customers are requesting a lot of HTML5 valid codes with correct microformat use, so something like this would be nice to have as an option.

    http://wordpress.org/extend/plugins/wordpress-seo/

Viewing 2 replies - 1 through 2 (of 2 total)
  • jaikdean

    (@jaikdean)

    11 years ago

    I’ve just used this for a site I’m working on. It may need tweaking for you own set up:

    /**
 * Convert Yoast breadcrumbs to use Microdata
 *
 * @params string $breadcrumbs Breadcrumb HTML
 * @return string
 * @author Jaik Dean
 **/
function convertBreadcrumbsToMicrodata($breadcrumbs)
{
    // remove the XML namespace
    $breadcrumbs = str_replace(' xmlns:v="http://rdf.data-vocabulary.org/#"', '', $breadcrumbs);

    // convert each breadcrumb
    $breadcrumbs = preg_replace(
        '/<span typeof="v:Breadcrumb"><a href="([^"]+)" rel="v:url" property="v:title">([^<]+)<\\/a><\\/span>/',
        '<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="$1" itemprop="url"><span itemprop="title">$2</span></a></span>',
        $breadcrumbs
    );

    $breadcrumbs = preg_replace(
        '/<span typeof="v:Breadcrumb"><span class="breadcrumb_last" property="v:title">([^<]+)<\\/span><\\/span>/',
        '<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><span class="breadcrumb_last" itemprop="title">$1</span></span>',
        $breadcrumbs
    );

    return $breadcrumbs;
}

add_filter('wpseo_breadcrumb_output', 'convertBreadcrumbsToMicrodata');
    Ovidiu

    (@ovidiu)

    10 years, 8 months ago

    Worked perfect for me too. Any feedback from Yoast? Could this be merged into the plugin? I’m afraid that the next time he changes something in his plugin this fix will no longer work and I’m not validating my site after every plugin update 🙁

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Breadcrumbs do not validate as HTML5’ is closed to new replies.