Structured Data with Bootstrap
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.