Support » Themes » GeneratePress Überschriften

  • clemens

    (@drclemenskappes)


    Hallo,

    ich mache gerade einen Neuaufguss meines alten Themes über GENERATEPRESS. Dort gibt es nicht nur die Überschriftebenen H1-H6, sondern die GenerateBlocks-Überschriften auch H+“p“ und H+“div“. Finde im Handbuch keine Erklärung dazu, wann man die einsetzt.

    Außerdem werden mir auf fast allen Seiten fehler in der Überschriften-Reihenfolge angezeigt, die ich nicht finden kann.

    Wer kann mir das bitte erklären? Vielen Dank im Voraus.

    • Dieses Thema wurde geändert vor 8 Monaten, 1 Woche von clemens.

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 15 Antworten - 1 bis 15 (von insgesamt 16)
  • Hast du schon mal den Begriff „Semantisches HTML“ gehört?

    Bevor Cascading Style Sheets eingeführt wurden, haben Web-Entwickler keine andere Chance gehabt, Inhalte auf einem Bildschirm gezielt zu platzieren, als eine HTML-Tabelle (<table>) zu nutzen. Dafür war das Tag aber eigentlich nicht gemacht und z.B. für den Nutzer eines Screenreaders ist eine unerwartet auftauchende HTML-Tabelle, in der dann auch noch Bilder ohne alt-Texte platziert wurden wenig hilfreich. Da inzwischen mit CSS selbst gewagte Layouts möglich sind, hat man sich daran zurückerinnert, HTML-Tags so einzusetzen, wie sie auch gedacht waren. Das HTML-Tag soll eine Bedeutung haben und nicht willkürlich eingesetzt werden. (Und Semantik ist dann eine Bedeutunglehre – so bekommt der Begriff Semantisches HTML einen Sinn: „HTML dient als Auszeichnungssprache dazu, einen Text semantisch zu strukturieren, nicht aber zu formatieren.“ – Quelle: Wikipedia)

    Überschriften sollen in semantsichem HTML nicht Text hervorheben und größer ausgeben, sondern das ganze Dokument strukturieren. Eine so gegliederte Webseite lässt sich von Suchmaschinen besser „verstehen“ und erleichert auch Nutzern von Screenreadern den Zugang zu Webseiten, weil der Abschnitt mit interessanten Überschriften leichter anzusteuern ist.

    Damit eine Maschinenlesbarkeit gewährleistet ist, sollen Überschriften hierarchisch ineinander verschachtelt werden:

    <h1>Webseiten-Titel</h1>
    <h2>Kapitelüberschrift</h2>
    <h3>Zwischenüberschrift des Kapitels<h3>
    <h4>Eingeschobener Abschnitt des Kapitels</h4>
    …

    Laien neigen dazu, Überschriften als Formatierungselement zu nutzen und die Hierarchien der Überschriften poltern wahllos durcheinander:

    <h1>Webseiten-Titel</h1>
    <h3>Urlaub ist toll. Wisst ihr, wo ich dieses Jahr war?</h3>
    <h1>In Spanien!!1!</h1>
    <h2>Olé</h2>

    Das sieht dann lustig aus, ist aber für Suchmaschinen unbrauchbar und dürfte jemand mir Screenreader eher in eine Sinnkrise stürzen. Deshalb erscheinen dann Hinweise auf Fehler in der Reihenfolge!

    Und wofür ist nun der H(eadline)-Block mit <p>– und <div>– Tag gut? Da der Block-Editor ein visuelles Tool zur Erstellung von pfiffigen Layouts ist, kommt der eine oder andere Anwender doch wieder auf die Idee, einen Headline-Block alleine für die Gestaltung zu verwenden. Schließlich kennt nicht jeder den Begriff Semantisches HTML.
    Im Customizer kann ich über „Zusätzliches CSS“ dem Tag <p> mit der CSS-Klasse gb-headline Headline-Block eine Schrift und Formatierung zuweisen – fett, rot, Comic Sans, … wie du möchtest. Komme ich nun auf die Idee, den Satz „Urlaub ist toll. Wisst ihr, wo ich dieses Jahr war?“ in dieser Formatierung auszugeben, reicht es, den Headline-Block „p“ dafür zu verwenden.
    Da durch die Verwendung des <p>-Tag die Hierarchie der Webseite nicht durcheinander gewirbelt wird, entspricht das Lyout den Anforderungen für SEO und Barrierefreiheit.
    Das <div>-Tag ist (wie das <p>-Tag) ein Blockelement, dass mit Innen- und Außenständen formatiert wird. Durch die Verwendung von zwei (ähnlichen) HTML-Tags ergeben sich aber mehr Gestaltungsmöglichkeiten.

    Also:

    • H1-H6 nur für Überschriften verwenden, mit denen das Dokument gegliedert wird.
    • Bei Verwendung von Überschriften muss die Hierarchien eingehalten werden. (z.B. kann nach <h2> nicht plötzlich <h4> kommen).
    • P und DIV im Headline-Block können für eine Formatierung verwendet werden, obwohl das so eigentlich nicht vorgesehen ist.

    Die Profis bitte ich um Verzeihung, dass ich das Thema etwas laienhaft beschrieben und sicherlich hier und da verkürzt habe. Die Antwort ist ohnehin schon zu lang. 😉

    Nachtrag: interessanterweise werden die mit dem Plugin Generate Blocks erzeugten Headline-Blöcke gar nicht in der Strukturübersicht angezeigt. Wenn du also (semantisch korrekt) mit dem Headline-Block des Plugins eine H2-Überschrift einfügst, gefolgt von einer H3-Überschrift mit dem Standard-Blöcken, wird dir ebenfalls eine falsche Gliederung angezeigt.

    • Diese Antwort wurde geändert vor 8 Monaten, 1 Woche von Bego Mario Garde. Grund: Nachtrag
    Thread-Starter clemens

    (@drclemenskappes)

    Lieber Bego Mario Garde,

    danke für deine ausführliche Antwort, die allerdings so lang war, dass ich Schwierigkeiten hatte, das für mich Relevante herauszufiltern. Da es um das Theme „GeneratePress“ mit GenerateBlocks geht, scheint mir nur dein Nachtrag die Richtung zu weisen, da ich weder mit HTML noch mit CSS arbeite.

    Wenn ich dich richtig verstehe, sind die H+p bzw. H+div- Überschriften gar keine echten Überschriften, sondern Blöcke, mit denen bestimmte Auszeichnungen möglich sind. Verstehe ich deshalb nicht, weil ich doch dann auch einen „normalen“ Absatz mit Variationen in Schrift und Auszeichnung verwenden kann.

    Könntest du eine kurze Erklärung nachschieben?

    Danke. Clemens

    die allerdings so lang war, dass ich Schwierigkeiten hatte, das für mich Relevante herauszufiltern.

    Oh, schade.

    Kurzfassung: ob du einen Absatz-Block verwendest oder den Headline-Block mit „p“, unterscheidet sich im erzeugten HTML-Code nur dadurch, dass der Headline-Block eine weitere CSS-Klasse zugewiesen bekommt.

    Diese CSS-Klasse kannst du nutzen. Oder – wie in deinem Fall – auch nicht. Dann ergibt sich kein Unterschied.

    Und nochwas: HTML-Tags sind eigentlich nicht zur Formatierung gedacht, sondern zur Strukturierung eines HTML-Dokuments.

    Thread-Starter clemens

    (@drclemenskappes)

    Hallo, danke für deine Antwort. Sorry, dass ich mich vielleicht umständlich ausgedrückt habe.

    Darf ich noch etwas nachschieben? Im Bearbeitungsmodus einiger Seiten wird mir unter „Übersicht“ ein Fehler in der H1-H6-Reihenfolge angezeigt. Ich habe die entsprechenden Seiten zig mal durchforstet, ich kann einfach keine Fehler finden. Ich kann das auch nicht bei Google überprüfen, da die Seite noch im Erprobungsstadium und somit noch nicht online ist.

    Und schließlich: Wo muss ich Probleme beim verbinden einer Domain mit der neu erstellten Seite posten?

    Vielen Dank dir!

    Clemens

    Hallo,

    Wo muss ich Probleme beim verbinden einer Domain mit der neu erstellten Seite posten?

    Da wir nicht wissen, welcher Art die Probleme sind, können wir die Frage wohl kaum beantworten. Das müsstest du noch näher erläutern.
    Wenn es um ein WordPress-spezifisches Problem geht, dann bist du hier zwar richtig, solltest aber ein neues Thema beginnen.

    Viele Grüße
    Hans-Gerd

    Thread-Starter clemens

    (@drclemenskappes)

    Hi, Hans-Gerd,

    meine ursprüngliche Website https://fuehrungs-coach.de hat einen Relaunch erhalten. Dazu war eine provisorische url angelegt worden. Diese hat nun mein Provider mit der o.g. url. verbunden. Dabei ist allerdings lt. Aussagen des Providers „mixed content“ entstanden, für dessen Beseitigung sich der Provider als nicht zuständig erklärt. Mir wurde ien Plugin empfohlen, das tief in die Datenbank eingreift, das ich aber als Laie schon im Ansatz nicht verstehe.

    Einen Teil habe ich schon selbst geschafft. Bei den verwendeten Bildern wurde z.T. auf die provisorische url verwiesen. Das habe ich korrigiert. Aber es werden aktuell z.B. über den Headern Tags angezeigt, die da nicht hingehören.

    Ich hoffe, dass das Grundproblem klarer wurde. Danke für deine Mühe,

    Clemens

    • Diese Antwort wurde geändert vor 8 Monaten von clemens.
    • Diese Antwort wurde geändert vor 8 Monaten von clemens.

    Dabei ist allerdings lt. Aussagen des Providers „mixed content“ entstanden, für dessen Beseitigung sich der Provider als nicht zuständig erklärt.

    Damit hat dein Provider auch recht, das ist nicht sein, sodern dein Problem 😉

    Aber es werden aktuell z.B. über den Headern Tags angezeigt, die da nicht hingehören.

    Meinst du oben links z.B. „Coaching“, „Über uns“, etc? Ich tippe mal auf:
    https://rankmath.com/kb/breadcrumbs/

    Hallo,
    über den folgenden Link siehst du, wo noch (zumindest) mixed content ist. Die Fehler sieht man aber auch in der developer console (Aufruf mit F12).

    Diese Fehler lassen sich z. B. über das Plugin „Better Search and Replace“ korrigieren (ersetzen von http://example.com/ durch https://example.com/, etc.).
    Vorher aber bitte auf jeden Fall eine Sicherung der Datenbank erstellen..

    Viele Grüße
    Hans-Gerd

    Thread-Starter clemens

    (@drclemenskappes)

    Hallo, Hans-Gerd,

    danke für deine Links und Tipps. Was merkwürdig ist: Ich habe alle mixed-content dateien in der Mediathek überprüft. Alle haben (mittlerweile – ich habe heute daran gearbeitet) den richtigen Link. Merkwürdig, dass die Datenbank Fehler anzeigt. Kann es denn sein, dass sich da etwas anderes verknotet hat? Ich bin auch „mixed“.

    Was aber vermutlich viel schlimmer ist: RankMath zeigt mir an, dass die Website keinen „canonical tag“ hat und „Your homepage contains noindex meta tag or header.“ Das war vor dem relauch nicht der Fall. Und schließlich: Die Antwortzeit der Seite – „das Aushängeschild“ von GeneratePreis – ist mit 0,39 Sekunden gähnend langsm. Lag vorher immer unter der vorgeschlagenen 0,2 Sekunden. Ich fürchte, irgendwas ist da faul und dass ich das als Laie nicht gebacken bekomme.

    Und schließlich: es gibt einen von RankMath verursachten Fehler – durch Ausschlussverfahren getestet: Bei Artikeln wir gaaanz oben links – also weit oberhalb des Headers und der Menüleiste – der Name der übergeordneten Seite angezeigt.

    LG, Clemens

    • Diese Antwort wurde geändert vor 8 Monaten von clemens.
    Thread-Starter clemens

    (@drclemenskappes)

    @bsu:

    tausend Dank. Das war der Übeltäter! Also weg mit den „breadcrumbs“

    Kannst du das Thema dann bitte als gelöst markieren, wenn das Problem damit für dich behoben ist:
    Gelöst
    Die Option findest du rechts in der Sidebar. Danke.

    Thread-Starter clemens

    (@drclemenskappes)

    Hallo,

    das Problem ist ja leider nicht gelöst. Die Antwort @bsu bezog sich nur auf die merkwürdingen Angaben ganz oben auf der Seite. Wieso mir „mixed content“ angezeigt wird über das von dir gezeigte Tool und wieso die Seite jetzt gähnend langsam ist (Bilder laden spät), bei Klicks „hüpft“ die Seite, sie vorher aber pfeilschnell war, erschließt sich mir nicht. Sorry. Da die Seite noch nicht für Google Search freigeschaltet ist, kann ich auch keinen Speedtest machen.

    • Diese Antwort wurde geändert vor 8 Monaten von clemens.

    Hallo,
    ich hatte allerdings schon auf eine Lösungsmöglichkeit in meiner Antwort hingewiesen.
    Zunächst solltest du diese Fehler korrigieren. Danach wird dann deutlich, ob das Performance-Problem damit zusammenhängt.

    In der developer console (Aufruf mit F12) findest du nach Durchführung von Lighthouse weitere Hinweise, welche Dinge du optimieren solltest.

    Viele Grüße
    Hans-Gerd

    Thread-Starter clemens

    (@drclemenskappes)

    Lieber Hans-Gerd,

    ich weiß nicht, wie ich das besser ausdrücken kann: in dem Programm werden fehlerhafte Bild-Links angezeigt, die aber real im Backend nicht vorhanden sind. Da ist alles korrekt. Ich habe dennoch wie von dir vorgeschlagen mit dem Programm, was du mir genannt hattest, alle Einträge geändert. Wenn ich die url dann nochmal durchlaufen lasse, werden mir keine Veränderungen angezeigt (natürlich habe ich das Häkchen für Testlauf rausgenommmen. Mich überfordert das als Laien maßlos, erst recht kann ich mit den Daten in der Console nichts anfangen. Ist für mich kryptisch. Wie gesagt: Ich habe noch nie eine WP Seite erstellt.

    LG, Clemens

    • Diese Antwort wurde geändert vor 8 Monaten von clemens.

    So wie es jetzt aussieht, wird ja nur noch das Favicon per http geladen.

    ABER: Deine Seite lädt Fonts vom google-Server, keine gute Idee! Das verstößt nämlich gegen die DSGVO und könnte Ärger geben. Man kann google-Fonts auch auf seinem eigenen Webspace ablegen und dann von dort laden. Einfach mal die Suche des Forums benutzen, wurde schon mehrfach besprochen.

Ansicht von 15 Antworten - 1 bis 15 (von insgesamt 16)
  • Das Thema „GeneratePress Überschriften“ ist für neue Antworten geschlossen.