Perhaps you used Bootstrap for your web site and are excited that you have a responsive web site with all the bells an whistles. You were hoping that would help your SEO ranking, but you should know there is more to be done! Enter “structured data“. Structured data can help differentiate a recipe from an article from an event – all things that Google supports and will display depending on how the structured data is set up.

Not sure where to start?

Navigation

The differences are not too much but can make a big difference.

Simple Default Bootstrap Navigation

<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
</ul>

Simple Default Bootstrap Navigation with Structured Data

<ul itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement"class="navbar-nav mr-auto">
<li itemprop="name" class="nav-item active"><a itemprop="url" class="nav-link" href="#">Home <span class="sr-only">(current)</span></a></li>
<li itemprop="name" class="nav-item"><a itemprop="url" class="nav-link" href="#">Link</a></li>
</ul>

Breadcrumbs

By adding a little code to your already existing breadcrumbs – you will provide structured data that search engines can understand.

Simple Default Bootstrap Breadcrumbs

<ol class="breadcrumb">
<li class="breadcrumb-item"><a itemprop="item" href="/"><span itemprop="name">Home</span></a></li>
</ol>

Simple Default Bootstrap Breadcrumbs with Structured Data

<ol itemscope itemtype="http://schema.org/BreadcrumbList" class="breadcrumb ">
<li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="/"><span itemprop="name">Home</span></a></li>
</ol>

Once you add in structured data to your site you can then use the Google Structured Data Testing Tool to make sure everything is set up and configured correctly. Not sold? Check out: The Beginner’s Guide to Structured Data for SEO: A Two-Part Series

Note: This is based on Bootstrap 4.