Add note about schema.org

diff --git a/docs/pages/breadcrumbs.md b/docs/pages/breadcrumbs.md
index a0675d82422f5088170dc5fb7c7d141e1d90fed9..824c93af342f4d98ba5090d156b9c55711312cbc 100644 (file)
--- a/docs/pages/breadcrumbs.md
+++ b/docs/pages/breadcrumbs.md
@@ -20,6 +20,15 @@ To mark a disabled item, add the class `.disabled` to the `<li>`, and just use p
   <a class="codepen-logo-link" href="https://codepen.io/IamManchanda/pen/MmGeMx?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
 </div>
 
+<div class="warning callout">
+  <p>We use a CSS <code>::after</code> element containing a slash character to create the separator between items. Some screen readers will read this character out loud&mdash;if this is an issue, you can use a background image or a separate element with <code>aria-hidden="true"</code> to create the separator instead.</p>
+</div>
+
+<div class="warning callout">
+  <p>If your site is visited by search engines, then you should consider adding Schema.org structure data. This will allow your site to appear more attractive in search results. </p>
+  <p>For more information, see <a href="https://developers.google.com/search/docs/data-types/breadcrumbs">Breadcrumbs - Google Developers</a>, <a href="http://schema.org/BreadcrumbList">BreadcrumbList - schema.org</a>.</p>
+</div>
+
 ```html_example
 <nav aria-label="You are here:" role="navigation">
   <ul class="breadcrumbs">