HTML Design Tips – BootStrap SEO friendly

Spread the love

HTML Design tips for seo are these odd things that we either

  • gave very little thought to,
  • just plain did them wrong
  • or like most, we attempt to tack them on after the fact.


They have to do with seo aspects, site navigation and a respect for mobile devices which may need to do more scrolling on the part of the user. For those of us using either bootstrap or a custom css style that is pretending to be Bootstrap seo friendly like, these considerations have to do with the mobile first priority.

SEO Friendly above 1500 words

We are being told that for good seo, pages require a minimum of about 600 words per article, up from 300 in the past decade because spammers have figured out how to do 300 without problems. But 600 words causes a bit of a problem for non-writers ( read spammers ). 


However the truth is, if you start examining articles that rank in the top 10 of the Google serps, you are going to find a whole lot of articles there in the 1500 to 2000 word range. What do readers of HTML Design Tips think about that?

But if you start scrolling through 1800 – 2000 words, particularly on a cell phone it’s going to get a back tiring.

HTML Design Tips for Site Navigation

Why is this, well for a number of reasons. One being the article of 2000 words is split into about 4-6 subtopics and these subtopics require an internal navigation system or table of contents in order to allow the user to quickly move about. 

Bootstrap friendly TOC’s

HTML Design Tips - Example of a TOC or Table of Content image from Wikipedia
TOC sample from Wikipedia

This internal TOC ensures that the author of the article is forced to put internal links back to the subsections and voila, those internal links are quite valuable for seo purposes too.
This TOC also ensures that the article author absolutely must think the whole article through and as much as possible give equal weight or balance to the subsections. 

It also means that an id tag needs to be associated with each of the locations that you wish the user to be able to click and navigate to. Note the id=”” section below.

<!-- HTML Design Tips -->
<h3 id="Bootstrap_friendly" title="If you click here u will go to
 the bootstrap TOC section">Bootstrap friendly TOC's</h3>

Forethought for h2/h3 Subsections

That means possibly 1 or 2 pictures or media per subsection, perhaps one or two customer testimonials if there are any, perhaps an external link per subsection and a minimum of 4-6 h2 headers with a very generous12-18 h3/h4 sprinkled throughout.

Wow, thats a whole lot of thought, time and effort put into segmenting which will be followed by adequate white spacing for easy legibility etc.
When was the last time that you put that much effort into a document that you really wanted to rank?


And that’s not all. The TOC at the top, enables movement downward but what about movement back upwards? Quite a few options there but most of them are going to look a bit messy. Perhaps a link at the end of each of the 4-6 major sections which enables the user to go back up to the top.

The page should probably go overboard on attempting to get social media responses right from the get go. This means that several social media niceties should be built right into the page.


You want people to actually share the whole darn page on FB or Linkedin or twitter if they were so impressed. A plugin can take an excerpt including a picture and allow users to use that on FB such that a user will read the short excerpt, click on that picture on FB and come directly to the page. 


HTML Design Tips for Social Media Commenting

I am going to put my neck on the limb here and say that most of us in the know, already know that Google likes to be able to see who is talking about what, when and how. This is already pretty well known.

What isn’t that well known is that the cpu cycles that it takes for Google to collate all this information may be amongst the heaviest cpu work that it devotes to any site. It may be heavy enough that in many cases, unless google runs across the “social link type” information in a very obvious way, it may budget x amount of cpu cycles for your site and when the x amount is exhausted, onwards it goes.  Sheer conjecture from the author of HTML Design Tips but I will stand by that one as a programmer.

No search spider thread is going to be allowed to take 8-15 seconds to spider an individual page when the average page should take less than 2 seconds to spider and 2 more seconds to collate related backlinks, conversations blah blah blah. Remember there are billions of pages that need attention and this is why even though your site may have 400 pages, sometimes our search spiders outright tell you, yeah, they have seen them in the xml file but they have only completely spidered 30 of them.


The “social link type” information is for example 22 people over at Linkedin, 140 people on Facebook and 500 in Instagram talking about having a party hosted by X DJ in Boston. Never once did any of the people directly tell Google where the primary site for this was, but there is a site somewhere, cause it was indirectly mentioned 3 dozen times in a dozen different ways.

The Case of DJ X

Well, Google is curious and really wants to know, since it’s already pretty sure that there are 20 times as many users searching for that site today and there will be 600 times as many search queries in the next 2 weeks as a run up to the event, than there were users who went out of their way to comment about it.

Boston, is after all, a university town, so events are big and wherever DJ X is hiding out, a whole ton of people ( including law enforcement) really want to know.

So, I know of a DJ X who used to hold parties up in the hinterlands of Northern Ontario, approximately 2+ hours north of Toronto. And guess what? The location was secret. It was a need to know basis only and all those who needed to know were told several hours after the equipment and stalls were installed and ready for them.

The party would last about 4-6 hours and people would scatter with code words for where they would meet next. Why the secrecy? I dunno, I never went up there. Yep, Google would have needed to track cell phones to figure that one out and Giggles wouldn’t do that, would they?


Yeah, Google wants to know

… and sometimes this works in your favor.

Apart from sharing, you really, really want FB users to comment about your work of art and “in your work of art“. These comments alone can take a page that is slightly above mediocre in a lot of aspects, to the top of the Google search listings.

I won’t explain the full mechanics of this because Giggles will deny if asked, but it has to do with social media engagement which is so obvious in this case.


Instead of the google algorithm having to do a stupendous amount of work to backtrack and figure out who is talking about what out on the worldwide web, the fb comment plugins tell Google rather directly and with a very minimum of cpu time exactly who said what, where, when and most importantly where the web page is concerning the topic in question.

Designated Image for the post

Most WordPress templates have a section while editing the page to insert an image for this purpose. This section is officially called “Set featured Image“.

set featured image

It’s tempting to not put an image there because this image won’t show up for the user who is scrolling the finished page. However, it will most definitely get used as the preferred image that hangs out with the excerpted text.


Mobile Device Priority Warning

In the third quarter of 2019, Google sent messages to a few millions of webmasters listed as being in charge of their search consoles, counselling them that Google was going to switch to spidering in mobile first priority. 

What this cryptic message really meant, probably went over the heads of webmasters using WISYWIG tools but for those who were using css style sheets based on known css products like BootStrap, this made perfect sense.

HTML Design Tips - Mobile Design sizes and how Bootstrap incorporates them into the style classes applied to elements

There is a media query for small, medium, large and extra large sized screen widths.However there is no medium query for screen sizes smaller than 576 pixels because by default the entire css styling operation assumes that when no specific directions are given that’s the default that should be used — yeah, I have paraphrased a bit but thats the idea.


The bootstrap style sheet and a few others cater to the style of putting multiple classes in a single style=” class1 class2 class3 class4″ in order to cater to what classes the author thinks should take precedence for this particular element when a user is on a device of this size or that size.

There is a whole class of advanced designers who believe that this is kludgy and plain wrong for a number of fine reasons but Bootstrap appears to be the number 1 css library in use and they aren’t the only ones who use this kludge so, one has to respect it when working on a number of sites some of which are going to use this nomenclature.

More HTML Design Tips – Use external Tools

The long and short of this is that those working on websites need to be aware of the differences in scrolling efficiency ( read annoyance ) and sticky menu values, font management etc when a user is on a small device or even an small device with a tremendous amount of pixels ( looking like a desktop ) but with a small 3 inch width screen.


Using tools to see whether buttons are too close and therefore prone to fat finger mistakes can help to solve a few problems and annoyances that users may have with your interface.

Using the title tag generously, particularly on links so that both seeing impaired users and users with perfectly good eyes but not wanting to click before understanding where the click will take them – can see that easily with a hover.

There is much more that can be said about html design tips and over time, we will get to it. Don’t worry. Enjoy.

Top