Skip to main content

SEO modules

Ability to measure

Eight SEO modules to improve the visibility of your website

When writing content, it is all too easy to forget all the SEO activities you need to perform to stay on top the SEO race to the top of Google search listings.

With SEO checklist, this will make sure you have everything to hand, all pages are setup and optimised correctly.

Here's a few things you be checking on your website:

SEO checklist

SEO checklist

Drupal SEO checklist uses best practices to check your website for proper search engine optimisation.

It creates a functional to-do list of modules and tasks that remain to be performed, making regular SEO maintenance hassle-free.

Using hero sections

Aspirational

Using hero sections

A hero section is a responsive snippet of Bootstrap 5.

Is has a headline, a sub-heading, a representative, conception or aspirational image, and call-to-action buttons.

The purpose of the hero section is to highlight your brand or message, get your message across and make the call-to-action as clear as possible.

Here are some examples:

Aspirational

This is a typical hero snippet

It contains a background aspirational image, headline text, subheading text, a link button and a call-to-action button.

Features and benefits

This is another example of a hero
section with centred text

It contains a background conceptual image,
headline text, subheading text,
a link button and a call-to-action button.

Example styling and typography

Bootstrap logo

Example styling and typography

Bootstrap 5 comes with lots of built in styling and javascript functionality that only requires the appropriate class to be added to the html.

Typography

Use these styles within the text editor when adding content.

Header 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel euismod mauris. Bold Text - Vestibulum rutrum augue mauris, eu lacinia libero volutpat ac. Vivamus maximus quam et libero accumsan ultricies. Sed eget ipsum mauris. Integer id hendrerit tellus, quis venenatis lacus. Fusce vel turpis sit amet quam malesuada consectetur. Nulla maximus porta bibendum. Mauris ut imperdiet ex, vitae aliquam mi. Proin vitae dignissim quam. Italic text - Ut vitae urna egestas, laoreet libero sed, consequat mi. Nunc tincidunt elit elit, eu sodales sapien hendrerit quis. Bold Italic Text - Aenean ut euismod felis, quis placerat arcu. Praesent viverra imperdiet nulla, eu tempor orci malesuada quis. Cras porttitor ante enim, vel ornare neque imperdiet a.

Header 2

Nulla facilisi. Underlined fragment - Nunc aliquam elementum nisl, vel venenatis ante ornare eget. Vivamus pulvinar, ante ut posuere hendrerit, arcu magna maximus leo, vitae blandit nisi tellus ut justo. Ut sit amet ornare tortor, a vestibulum neque. Fusce varius elementum dolor, vitae sagittis neque. In finibus arcu ac justo cursus commodo. Vestibulum est magna, condimentum sit amet purus et, pretium pellentesque elit. Nulla hendrerit enim ut risus euismod aliquam ultricies nec tellus. Morbi non leo id ante viverra eleifend eu non purus. Curabitur hendrerit tortor nec rutrum semper. Striked out fragment - Sed cursus enim eget massa mollis euismod sit amet quis risus. Fusce scelerisque ultricies sapien, vitae laoreet enim egestas eu. Horizontal line:


Nulla facilisi. Underlined fragment - Nunc aliquam elementum nisl, vel venenatis ante ornare eget. Vivamus pulvinar, ante ut posuere hendrerit, arcu magna maximus leo, vitae blandit nisi tellus ut justo.

Header 3

Donec commodo felis lorem, in hendrerit orci superscript ahead - scelerisquesuperscript eget. Sed mattis elit nibh, et posuere mi aliquam nec. Vivamus pellentesque dictum ligula, at imperdiet augue dapibus id. Etiam ligula quam, semper nec turpis eget, tristique imperdiet sapien. Subscript ahead -  pellentesquesubscript porttitor nulla quis felis eleifend, non venenatis erat faucibus. Sed aliquet vitae enim quis aliquet. Suspendisse potenti. Nam justo mi, scelerisque eleifend volutpat quis, fringilla vitae velit. Nulla interdum ornare est, fringilla dapibus lacus sollicitudin vulputate.

Header 4

Align left - Nam nec nunc eu lacus ultricies aliquet ac et dui. Proin ultricies metus ac consectetur faucibus. Phasellus non dictum turpis. Praesent lobortis mattis mauris, eu condimentum ex fermentum vestibulum. Ut a lobortis sem. Aenean vel elementum nibh. Vestibulum et lacus convallis, semper eros eu, eleifend risus. Cras tincidunt vehicula scelerisque.

Align center - Nam nec nunc eu lacus ultricies aliquet ac et dui. Proin ultricies metus ac consectetur faucibus. Phasellus non dictum turpis. Praesent lobortis mattis mauris, eu condimentum ex fermentum vestibulum. Ut a lobortis sem. Aenean vel elementum nibh. Vestibulum et lacus convallis, semper eros eu, eleifend risus. Cras tincidunt vehicula scelerisque.

Align right - Nam nec nunc eu lacus ultricies aliquet ac et dui. Proin ultricies metus ac consectetur faucibus. Phasellus non dictum turpis. Praesent lobortis mattis mauris, eu condimentum ex fermentum vestibulum. Ut a lobortis sem. Aenean vel elementum nibh. Vestibulum et lacus convallis, semper eros eu, eleifend risus. Cras tincidunt vehicula scelerisque.

Justify - Nam nec nunc eu lacus ultricies aliquet ac et dui. Proin ultricies metus ac consectetur faucibus. Phasellus non dictum turpis. Praesent lobortis mattis mauris, eu condimentum ex fermentum vestibulum. Ut a lobortis sem. Aenean vel elementum nibh. Vestibulum et lacus convallis, semper eros eu, eleifend risus. Cras tincidunt vehicula scelerisque.

Header 5 (Hyperlinks and Tables)

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum id tempor lorem. Proin finibus ut urna sed congue. Sed sagittis dolor ac justo aliquam tempus. Proin interdum dignissim posuere. Nullam nisl felis, volutpat in faucibus congue, viverra egestas justo. Morbi non suscipit elit, at vulputate magna. Nunc pharetra metus mauris, ac semper nunc volutpat nec. Sed accumsan sapien dignissim felis fringilla condimentum.

Example table
NameSurnameAge
JohnDoe21
JosephNowak45
Pure Bootstrap table
#Column 1Column 2
1JohnDoe
2JackSmith
3JosephNovak
Header 6 (Lists)

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ipsum sem, vestibulum vel pretium ut, fringilla eget sapien. Cras eu nulla in eros scelerisque pretium sagittis a ex. Duis rhoncus sollicitudin orci et tempus. Aliquam erat volutpat. Etiam maximus odio id odio gravida maximus:

  • Aenean gravida vestibulum condimentum.
  • Quisque eget eros ut arcu tincidunt pharetra.
  • Nulla laoreet, nulla vel convallis commodo, massa mi cursus ipsum, et consectetur odio risus non magna. Morbi sit amet augue a nisl hendrerit rhoncus. Praesent sagittis erat et tristique iaculis.
  • Sed viverra pulvinar justo, eget ullamcorper elit scelerisque quis. Pellentesque id lectus sollicitudin, interdum augue nec, ullamcorper enim. Quisque et laoreet lorem, vitae tristique leo.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ipsum sem, vestibulum vel pretium ut, fringilla eget sapien. Cras eu nulla in eros scelerisque pretium sagittis a ex. Duis rhoncus sollicitudin orci et tempus. Aliquam erat volutpat. Etiam maximus odio id odio gravida maximus:

  1. Aenean gravida vestibulum condimentum. Quisque eget eros ut arcu tincidunt pharetra.
  2. Nulla laoreet, nulla vel convallis commodo, massa mi cursus ipsum, et consectetur odio risus non magna.
  3. Morbi sit amet augue a nisl hendrerit rhoncus.
  4. Praesent sagittis erat et tristique iaculis. Sed viverra pulvinar justo, eget ullamcorper elit scelerisque quis. Pellentesque id lectus sollicitudin, interdum augue nec, ullamcorper enim. Quisque et laoreet lorem, vitae tristique leo.

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

Normal text. Sed suscipit tellus leo. Maecenas facilisis erat non ex rhoncus, eget suscipit est suscipit. Aliquam lobortis, eros vel tristique malesuada, felis lorem lacinia nisl, et laoreet nunc magna eget eros. Nam non tellus eu odio facilisis semper a vitae elit.

Preformatted Text - Nunc sed orci justo. Duis posuere faucibus ipsum, et semper eros pharetra nec. Aenean ac scelerisque orci, ac lobortis orci. Suspendisse facilisis dui ut lectus faucibus, at vestibulum ligula viverra. In pharetra in mauris sit amet suscipit. Nam consequat nunc sed lacus cursus tincidunt. Nullam velit est, laoreet sed turpis vestibulum, rhoncus porta dui. Morbi vel lorem vitae enim blandit fringilla.

Normal text. Nam maximus hendrerit accumsan. Maecenas accumsan maximus condimentum. Suspendisse sit amet mauris massa. Curabitur vehicula dictum tincidunt. Duis sed tellus ac ipsum placerat vestibulum quis vel nunc.

Quote - Maecenas lobortis nulla diam, sed mollis velit maximus eu. Aenean vitae lobortis eros. Donec et convallis magna. Fusce dui sapien, accumsan sit amet lobortis quis, fermentum ut erat. Duis magna orci, convallis sed placerat vitae, efficitur at mi. Morbi venenatis consequat convallis. Phasellus dignissim, elit ac condimentum scelerisque, elit massa efficitur odio, ut congue nisi arcu id ex. Vestibulum id felis tempor, elementum orci sit amet, condimentum leo. Suspendisse sit amet lectus semper.

Normal text. Maecenas lobortis nulla diam, sed mollis velit maximus eu. Aenean vitae lobortis eros. Donec et convallis magna. Fusce dui sapien, accumsan sit amet lobortis quis, fermentum ut erat. Duis magna orci, convallis sed placerat vitae, efficitur at mi.

Bootstrap 5 components

Although most components are built-in, you may need to add the necessary html and css to get it just how you want it.

Alerts

Badges

Heading 1 Primary

Heading 2 Secondary

Heading 3 Success

Heading 4 Danger

Heading 5 Warning
Heading 6 Info

Paragraph Primary Secondary Success Danger Warning Info

Alternate pill-style Primary Secondary Success Danger Warning Info

Breadcrumb

Buttons

Cards

Card Header

Another Title

With supporting text below as a natural lead-in to additional content.

Go somewhere

Accordions

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et nisi massa. Nullam pellentesque, quam non imperdiet lobortis, nunc nunc hendrerit massa, malesuada faucibus dui ipsum feugiat lectus. Suspendisse potenti. Cras cursus eu velit vitae ultrices. Aliquam porttitor erat non quam finibus tempus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et nisi massa. Nullam pellentesque, quam non imperdiet lobortis, nunc nunc hendrerit massa, malesuada faucibus dui ipsum feugiat lectus. Suspendisse potenti. Cras cursus eu velit vitae ultrices. Aliquam porttitor erat non quam finibus tempus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et nisi massa. Nullam pellentesque, quam non imperdiet lobortis, nunc nunc hendrerit massa, malesuada faucibus dui ipsum feugiat lectus. Suspendisse potenti. Cras cursus eu velit vitae ultrices. Aliquam porttitor erat non quam finibus tempus.

Dropdown menu

Jumbotron

Hello, world!

Curabitur eget tellus accumsan, elementum diam non, suscipit nisi. Etiam aliquet mattis facilisis. Donec id turpis neque.


Etiam viverra quam at arcu fermentum, in ultricies leo pulvinar. Phasellus dignissim tortor non leo tempor, id consequat enim consectetur.

List group

  • Cras justo odio 14
  • Dapibus ac facilisis in 2
  • Morbi leo risus 1

Another list group

Modal

Tabs

Pagination

Popover

Progress bars

 
 
 

Tooltips

Spam prevention

anti-spam

Five ways to prevent spam abuse on your website

Fighting spam is a balance between making your online form difficult to complete for the spambots and yet keeping it easy for the human. 

Rather than employ basic captcha style 'I am not a robot' tests, here are a few more subtle approaches to explore.

Anti-spam honeypot

1: Anti-spam honeypot

This anti-spam tactic works by luring the spambot into putting text into a hidden field on the form which a human would ignore. 

When the form is submitted you will know this must have been written by a spambot if the honeypot field has been populated, so the submitted form can be ignored.

Pros:

Once installed, it works quietly in the background and does not affect the user experience when completing the form.

Cons:

Spambots are becoming more sophisticated and are able to detect simple honeypot tactics. To keep one step ahead, you must ensure you have the latest honeypot module updates.

RBL check anti-spam

2: Remote Block Listing (RBL) check

This anti-spam tactic works by checking the IP address of the client attempting to complete the form against a database of IP addresses of known spammers - if found in the list, the form submission will be rejected. 

To use this service, you need to register with an RBL checker. Some offer a low-level free service where you can upgrade if you need a faster or more in-depth service. The RBL checker will be kept up to date by users reporting suspected spam from IP addresses anywhere in the world.  

Every time your form is completed, your server will pass the client IP address to the RBL checker. If the IP address is found, you know that this form submission is very likely to be spam.

Pros:

Once installed, it works quietly in the background and does not affect the user experience when completing the form.

Cons:

The speed performance may be affected as the connection to the RBL checker may take several seconds to return with a response. 

antibot

3: Antibot

Antibot is a lightweight module that waits for the user to move focus to the form (mouse, finger gesture space, return key etc.) before allowing the form to be completed. 

If no movement is detected, then antibot will deduce this is not a human and the spammer will fail to enter any field data.

Pros:

Once installed, it works quietly in the background and does not affect the user experience when completing the form.

Cons: 

The modules requires javascript to be enabled. If javascript is disabled, instead of the form, a message will appear telling the user that the form requires javascript in order to use it.

Form flood control

4: Form flood control

Form flood control works by allowing you to set a maximum number of form submissions over a given time interval. 

This will prevent spam bots submitting thousands of submissions to your site into a spam email relay.

Pros:

Once installed, it works quietly in the background and does not affect the user experience when completing the form.

Cons:

This is not a true anti-spam tactic as it does not provide any protection on the forms.

Google reCaptcha

5: Google reCaptcha

This anti-spam tactic works by displaying a set of images and asking the user to click on each image that matches a certain criteria. 

Pros:

Google reCaptcha is armed with the state of the art anti-spam technology to protect you from the most advanced spambots.

Cons:

Despite its claims to be user friendly, analysis shows that up to 18% of users give up when asked to verify they are not a robot using reCaptcha.

Research

Suggestions for your website

Protecting your online forms against spammers is an essential part of maintaining your website.

The Google reCaptcha is the only anti-spam mechanism that requires human interaction. It is recognised as the most effective captcha-style system, but it has serious drawbacks in terms of putting people off completing the form.

Honeypot, RBL, anitbot and form flood control are all unobtrusive and can be enabled to offer a good level of protection. A pragmatic approach would be to only enable Google reCaptcha if you feel that incoming spam is reaching unacceptable levels.

If you are running marketing campaigns, it may also be worth switching off Google reCaptcha to avoid detering potential enquiries.

 

Website design

Web design

Website design

Your website needs to be useful and serve a purpose, no matter how beautifully crafted and aesthetically pleasing to the eye it may be.

That's why Netflare recommend Bootstrap 5 modern design framework; it creates mobile-first responsive websites that look amazing.

Not only that, Bootstrap 5 provides a natural and familiar user experience, meaning the layout fits user expectations of layout such as calls-to-action buttons, minimising confusion and reducing navigational frustration.

Bootstrap logo

Styling and typography

Bootstrap 5 comes with lots of built in styling and javascript functionality that only requires the appropriate class to be added to the html.

Used in conjunction with Drupal views, you can create great looking and organised pages using galleries, cards, tabbed sections, accordions and list groups with existing content.

Aspirational

A hero section is a responsive snippet of Bootstrap 5, having a headline, sub-heading, images, and call-to-action buttons.

The purpose of the hero section is to highlight your brand or message, get your message across and make the call-to-action as clear as possible.

Branding design

Branding design

Branding design

In the bustling marketplace of today, where attention is a scarce commodity, branding design stands as the beacon that guides consumers to the heart of a brand. 

It encompasses every visual element that represents a brand, captivating the attention of ideal customers and forging lasting connections. From the set of formal brand guidelines to the design of the website, each aspect of branding design plays a pivotal role in shaping the perception of a brand and engaging its audience.

Brand identity

Unveiling Brand Identity

At the core of branding design lies the concept of brand identity—the visual and conceptual essence of a brand. 

It encompasses the tangible elements that consumers interact with, including the name, logo, colors, typography, and shapes associated with a brand. These visual elements serve as the building blocks of brand identity, conveying the personality, values, and promise of the brand to the world.

Brand guideline

Guiding Principles: Formal Brand Guidelines

Formal brand guidelines serve as the roadmap for maintaining consistency and coherence across all branding efforts. 

They outline the rules and specifications for using the brand's visual elements, ensuring that every communication aligns with the brand's identity and message. From logo usage guidelines to color palettes and typography recommendations, formal brand guidelines provide a framework for creating cohesive and compelling brand experiences.

Web design

The Digital Showcase: Website Design as the Hub of Communication

Your website is the primary hub of communication for your branding, inviting visitors to explore further. 

Website design plays a crucial role in shaping the user experience and conveying the brand's identity and message. From the layout and navigation structure to the imagery and content, every aspect of website design should reflect the brand's personality and values, engaging visitors and guiding them on their journey.

Brand development

The Importance of Brand Development

While branding design plays a crucial role in shaping the visual identity of a brand, true success can only be achieved through a thorough brand development process. 

This process involves defining the business identity, conducting market analysis, crafting a messaging strategy, and structuring information architecture, among other steps. Only by understanding who you are as a brand and how you want to be perceived can you make informed branding choices with confidence and certainty.