Internal site structure is one of the important SEO factors that help Google and other search engines to easily understand your site. Besides linking other pages on your site, adding breadcrumb can help users to navigate to different sections. If you don’t know about breadcrumb, it is an additional navigational links, generally displayed on top of the webpage containing the structure. It help users navigate to the upper level categories or sections of the site easily from the current page.
Related: How to add breadcrumbs in WordPress site?
Breadcrumb Examples
Below is an example of how horizontal and vertical breadcrumbs will look like.
As you can see, it provides the relative position of the current page among the whole site something like a “You are Here!” pin board in the map.
Weebly and Breadcrumb
Weebly does not offer default breadcrumb element to add it on your site. However, you can use custom CSS/HTML and manually insert the breadcrumb on each page. Here we will show you six different CSS styles breadcrumbs that you can add in your Weebly site.
Note: Remember, these are simple and manual breadcrumbs. It is not part of schema and hence search engines will not show them in the search results like WordPress websites.
Prerequisite for Breadcrumbs
Before we start, the prerequisite for a breadcrumb is to keep your pages in a structured manner. Though there is no need of arranging pages as per the breadcrumb we strongly recommend to do maintain the needed hierarchy under the “Pages” tab and align your navigation accordingly. We will explain with an example structure as “Home > Site Building > Weebly > Weebly Tips & Tricks > This Page”. This needs five blocks with corresponding links to create a breadcrumb.
How to Add Breadcrumbs in Weebly Site?
The breadcrumbs use simple CSS and HTML code, hence the CSS code is to be added to the stylesheet and the HTML code is to be embedded on the required page. Since you may need to place the breadcrumbs on more than one page it is recommended to add the CSS code under “Theme > Edit HTML / CSS > Styles > main.less” as shown below:
The HTML code is to be inserted on a page using “Embed Code” element above the content.
Style 1 & 2
Below style 1 & 2 breadcrumbs share common CSS class with minor addition of code for second style.
CSS Breadcrumb Style 1
CSS Breadcrumb Style 2
Style 3, 4, 5 & Bonus 6
CSS Breadcrumb Style 3
CSS Breadcrumb Style 4
CSS Breadcrumb Style 5
Bonus CSS Breadcrumb Style 6
- Site Building
- Weebly
- Weebly Tips & Tricks
- Current Page Title
Click on the below button to get CSS / HTML code for all the above breadcrumbs and the CSS code is highlighted for each style.
There are four images required for these breadcrumbs which you can download below and upload it on your Weebly site. Don’t forget to replace the image URLs inside CSS with your own URLs.
Note: Breadcrumbs styles 1, 2, 3 & 4 in the downloaded CSS represent example 3, 4, 5 & 6 respectively as shown above. Don’t forget to replace the image links with your own URLs.
Leave a Reply
Your email is safe with us.