Use sliders sensibly
Sliders present several topics in one position
If you have several topics that should all be presented in one position on websites, a slider is the ideal solution. The individual topics can be presented clearly and attractively on the individual slides of the slider. A slider is therefore predestined for the "Above The Fold" area of the homepage.
On this page, I present three different versions of our slider. We use the script slider "Slick Slider" as the basis and combine it with the powerful design tool for the WordPress editor GenerateBlocks. This gives us complete creative freedom and the option to display content dynamically at any slide position in the slider. And without a "large" footprint of the slider for the server load. The result: a fast slider that can be freely customised in terms of design and content. Perfect for all our web projects.
Slide On - Which basic configurations are conceivable?
- Static slider with image and / or text change
- Dynamic slider with image and / or text change: content is loaded dynamically, e.g. from a blog
- Combinations of static and dynamic content with image and/or text changes
Which version you choose depends on the content to be displayed. I will make suggestions in the project and explain the options in detail.
Static slider with Image and text change
Static slider with a animated picture and Text change
If an image applies to all statements, it is sufficient to only slide the text. This means that a new image does not have to be loaded with every slide, the slider appears calmer and the focus is on the changing text.
Dynamic slider with Picture and Text change
With the dynamic slider, we can display and 'slide' specific blog articles. This is practical, for example, if we always want to automatically display the three latest or individually specified articles from the blog or from a blog category. Technically, we connect a GenerateBlocks loop with the slick slider script. This results in unlimited display options for content as a slider.
Important for the loading time
Scaling and compressing images - also for the slider
It is important for the performance and loading time of your website to first scale and compress the images of the slider (preferably in .webp format) and then upload them to the WordPress media centre.
To find out exactly how to do this, see: WordPress: Edit images before uploading
What is important when using sliders with regard to SEO to consider?
When adding an HTML slider to a website, there are a few things you need to consider to ensure it is optimised for search engines (SEO). Here are some tips for effective and SEO-compliant use:
Remember that SEO is an ongoing process, and it's important to keep up to date with industry best practices and search engine algorithms to maintain and improve your website's search results.
Cf. Search engine optimised creation of website content
Crawlability
Make sure that search engine bots can crawl and index the content of your slider. Sometimes sliders implemented with JavaScript are not easily crawlable; search engines may only be able to analyse the first slide, as the other content is only loaded later and is therefore invisible to the "quick glance" of search engine crawlers. If possible, use HTML and CSS for the slider to ensure better accessibility for search engines.
Text content
Make sure that the slider is accompanied by relevant text content. Search engines rely on text to understand the content of a page. If your slider contains only images, captions or textless content, it can be difficult for search engines to understand the context. Include relevant keywords in the text content associated with the slider. This helps search engines recognise the relevance of your content to users' search queries.
Alt text for images
If your slider contains images, use descriptive and relevant alt text for each image. Alt text not only helps search engines understand the content, but also improves accessibility for users with disabilities.
Semantic HTML
Use semantic HTML tags to structure your content. This helps search engines to understand the hierarchy and meaning of the various elements on the page.
Responsive design
Make sure your slider is responsive and works well on different devices and screen sizes. Google considers mobile-friendliness as a ranking factor, so a responsive design is crucial for search engine optimisation.
Page loading speed
Optimise the images and content within the slider to minimise page load times. Search engines, especially Google, consider page load speed as a ranking factor. You can use tools such as Google PageSpeed Insights to check and improve the loading speed of your website.