Visually Hidden - Have you ever struggled with fitting H1 tags into your design without disrupting its aesthetics? With VH Helper, you can place these important elements where they should be in the structure of your page, then hide them so they don’t affect your design. The best part? Even though they’re hidden from visitors, you can still see and edit them when you’re working in Blocs. This way, your website maintains its visual appeal while being optimised for search engines like Google.
Skip to Content - VH Helper also helps you make your website more friendly for everyone. You can add a “Skip to Content” button that helps people using special tools to navigate your site more easily.
Harness the power of Bootstrap helper classes with VH Helper. It’s the secret ingredient to supercharge your Blocs projects, making them more SEO-friendly and accessible. Ready to take your web design to the next level? Try VH Helper today!
NOTE: Google can read CSS and JavaScript, be aware that this technique of hiding headlines and other keywords for the purpose of increasing SEO is considered part of the old Black Hat SEO toolbox. This can cost you credibility, not help.
However, Skip to Content, is encouraged, especially when used around menus and other forms of navigation, it is a great boost to accessibility standards.
The concepts of ‘Black Hat Tricks’ and ‘Accessibility’ are distinct. Your reference is an article written in 2016. However, the introduction of visually hidden content, a feature associated with ‘Accessibility’, only came into play with the launch of Bootstrap 5 in 2022. This new feature allows certain content to be hidden visually, but still accessible to screen readers, enhancing the overall user experience for those with visual impairments.
‘Black Hat Tricks’ refer to unethical practices used to increase a site or page’s rank in search engines. These methods are generally frowned upon and can lead to penalties from search engines.
On the other hand, ‘Accessibility’ involves making a website or application accessible to all users, including those with disabilities. This includes strategies like providing alternative text for images, ensuring sufficient color contrast, and making all functionality available from a keyboard.
In summary, while ‘Black Hat Tricks’ are manipulative tactics aimed at deceiving search engines, ‘Accessibility’ is a noble pursuit to ensure that digital content is inclusive and accessible to all users. The introduction of visually hidden content in Bootstrap 5 is an example of an ‘Accessibility’ feature, not a ‘Black Hat Trick’.
I suggest designing around these possible issues. If a headline tag makes sense to the visitor, then it makes sense to the search engines, otherwise what’s the point?
As far as 2016 is concerned. That’s how long this technique has been looked down on, nothing has changed in regards to manipulating SEO.
HOWEVER, hiding links and descriptors from the average reader but making them accessible to machines and readers with disabilities is encouraged, in 2016 and even more so now.
Of course you are right @Monark if you are trying to manipulate SEO, and like anything, you can be a bad agent with these things.
.visually-hidden and it’s ancestor .sr-only (pre BS5) are legitimate ways of doing this. They are screen reader classes and recognised as such. Saying that, they should be used properly. This is not the same as using display:none or changing the colour to match the background.
Actually Google’s modern day indexing is rather smart, for example, you and I would believe and practise one h1 tag per page, I still do that, yet, Google’s John Mueller has said that you are not penalised for multiple h1 tags and he’s the guru of Google’s algorithms. He stresses headings are important not the tag. Why? Because the way google works has developed over time and it understands the content differently.
Visually Hidden is used by many websites, including Apple.
and he’s the guru of Google’s algorithms. He stresses headings are important not the tag. Why? Because the way google works has developed over time and it understands the content differently.