Quellcode der mobilen Version

    Joomla Version
    4.4.2
    PHP Version
    PHP 8.1.x
    Hoster
    Artfiles

    Hallo,

    ich benutze auf einer Startseite eine Slideshow, für die ich ein Modul als Desktopversion und ein Modul als Mobilversion anlegt habe, um Bild und Textgröße an die Mobilverson anzupassen.

    Nun gibt das Modul auch eine h3 aus.

    Google ließt nun die h3 als doppelte Überschrift aus, da sie einmal im Desktopmodul und einmal im Mobilmodul verwendet ist.

    Daher empfiehlt das SEO-Unternehmen meines Kunden, dass die h3 nicht nur visuell ausgeblendet werden soll, sondern komplett aus dem jeweiligen Quellcode entfernt werden muß.


    Habt Ihr dafür eine Lösung?

    Warum nimmst Du nicht eine Slideshow für Desktop und Mobil-Ansicht? Die sollten heutzutage responsiv sein. Damit wäre das Problem mit der doppelten Überschrift hinfällig.

    Wenn man die Lösung hat, dann muss man nur noch das passende Problem finden.

    Ist es denn die Überschrift vom Modul selbst - also der Titel?

    Den kannst Du ja im Modul (im Normalfall) abschalten oder in den erweiterten Einstellungen (Header Tag) das Attribut ändern.

    Wenn man die Lösung hat, dann muss man nur noch das passende Problem finden.

    Zitat von oakmountain

    Google ließt nun die h3 als doppelte Überschrift aus, da sie einmal im Desktopmodul und einmal im Mobilmodul verwendet ist.

    Ist das sicher, dass die doppelte Überschrift H3 wirklich daher rührt?

    Sollte es nicht so sein, dass lediglich immer nur 1 Modul angezeigt wird, je nach Auflösung?

    Gibt es einen Link zur Seite?

    Um welche Slideshow handelt es sich denn überhaupt?

    Ahso - diese "Überschriften" sind gemeint.


    Ich wäre immer noch dabei, nur ein Modul zu verwenden, solange nicht unterschiedliche Bilder angezeigt werden sollen. Die Anzeige der Größen (Text und Bilder) kann man ja mittels CSS entsprechend anpassen. Dann gibt es auch keine doppelten Inhalte und Pflegeaufwand ist ebenfalls geringer.


    Für Texte und Überschriften, war das vor kurzem in anderem Zusammenhang ein Thema - siehe clamp().

    Responsive Typo: Stufenlos skalierende Texte und Schriftgrößen mit CSS
    Mit CSS-Techniken wie clamp() und calc() können Texte so gestaltet werden, dass die Schriftgröße zwischen verschiedenen Viewport-Größen stufenlos skaliert.
    kulturbanause.de


    Alles andere sehe ich eher schwierig umzusetzen. Zu erkennen, ob es sich um eine Mobile- oder Desktop-Ansicht handelt, erkennt man erst, wenn das HTML gerendert ist, damit ist es aber im Quellcode schon vorhanden. Man könnte es ggf. hinbekommen, wenn das Modul so gebaut ist, dass es die Inhalte mittels Ajax nachlädt. Wobei das auch nur beim ersten Laden des Moduls funktioniert und nicht zwischendurch.

    Wenn man die Lösung hat, dann muss man nur noch das passende Problem finden.

    Zitat von JoomlaWunder

    Ist das sicher, dass die doppelte Überschrift H3 wirklich daher rührt?

    Sollte es nicht so sein, dass lediglich immer nur 1 Modul angezeigt wird, je nach Auflösung?

    Gibt es einen Link zur Seite?

    Um welche Slideshow handelt es sich denn überhaupt?

    Das Modul wir auch ausgeblendet, der Bereich im Quelltext ist nicht aktiv, aber wohl auslesbar. Somit habe ich diese doppelte Überschrift.
    Die Slideshow ist ein Particle, und das von mir verwendete Template basiert auf Gantry 5

    Finanzberatung für Akademiker aus Hamburg

    Ich benutze für die Mobilversion eine andere Bildversion, damit der Text nicht wichtige Bildteile überlagert.

    OK - ich sehe, was Du meinst.

    Habe dazu gerade das JS gefunden - und damit könnte es möglich sein:


    JavaScript
    document.querySelectorAll('.hidden-phone').forEach(function(a){
a.remove()
})


    oder zumindest in der Art.

    Wenn man die Lösung hat, dann muss man nur noch das passende Problem finden.

    Zitat von Dautrich

    Joomla 4 nutzt Bootstrap 5, nicht mehr. Deshalb funktionieren die alten CSS-Klassen hidden-* und visible-* nicht mehr. Ersatz sind die Display-Klassen; näheres unter diesem Link. Möglicherweise funktioniert das JavaScript von LukasHH deshalb nicht.

    Das hatte ich auch schon ausprobiert, aber ohne Erfolg