U5: Meta-Elemente

Meta-Elemente im HTML Head Zusammenfassung.

Wir haben diese Woche eine Zusammenfassung der wesentlichen Meta-Elemente gemacht und ein Video dazu erstellt. Wir denken es ist ein guter Einstieg, da die Meta Elemente sonst etwas abstrakt wirken können.

https://www.youtube.com/watch?v=m89yo_LRwyQ&index=6&list=PLPjKx80JC4CBL2dyNaRj1TvQhiDXB-7A_

  1. HTML 5 Standard Attribute
  2. HTTP-Equiv Beispiele wie Weiterleitung
  3. Robots Beispiele für die Suchmaschinen
  4. Meta Viewport Beispiel 
  5. Open Graph Meta für Social Media Dienste.
  6. Beispiel für den Einsatz von Meta Elementen um die Navigation für ein CMS umzusetzen

 

 

Anleitung für das Wiki

In diesem Wiki könnt ihr gemeinsam Lerninhalte erstellen. Jedes Wiki ist direkt und für jeden angemeldeten User editierbar. Wenn bereits bei vorherigen Prüfungen Wikis zum Thema (manchmal auch nur Teilgebiete streifend) erstellt wurden, so werden sie unten verlinkt. Ansonten einfach hier diesen Eintrag überschreiben und mit entsprechenden Inhalten füllen.

Um Beispielaufgaben etc. zu bearbeiten haben wir extra eine Lerngruppe (http://www.mediencommunity.de/lerngruppe-mediengestalter-ap-sommer-2016)  eingerichtet, bitte diese für das gemeinsame Lösen von Aufgaben nutzen.

Viel Erfolg beim Lernen.
 
Das Team der mediencommunity
Bewertung: 
5
Durchschnitt: 5 (1 Stimme)

Kommentare

Hallo zusammen,

an sich komme ich ganz gut damit parat. Die HTTP-Äquivalente verwirren mich allerdings ein wenig. Folgendes habe ich im Netz gefunden:

"Das Meta-Element kann das Attribut http-equiv enthalten. Die Absicht dahinter war, dass Webserver den Dokumentinhalt lesen und aus diesen Angaben HTTP-Header erzeugen. In der Praxis ist das jedoch nur selten der Fall. Stattdessen können diese Angaben ersatzweise verwendet werden, wenn der Webserver sich nicht entsprechend konfigurieren lässt. In der Regel hat ein gleichnamiger HTTP-Header Vorrang vor einer Meta-Angabe. Ebenfalls sinnvoll sind diese Angaben, wenn das Dokument lokal – beispielsweise als Datei von Festplatte – gelesen wird, denn in dem Fall stehen keine HTTP-Header zur Verfügung.Im Folgenden werden nur diejenigen Attributwerte für http-equiv besprochen, die in einem HTML-Dokument auch Sinn ergeben können. Theoretisch ist die Liste der erlaubten Attributwerte aber länger." Kann jemand versuchen, das für mich NOCH etwas deutlicher auszudrücken? :D

Hey,

ich bin mir nicht sicher, ob dir das im Verständnis weiterhilft, aber hier mal anhand von Beispielen:

<meta http-equiv="expires" content="0"> erreicht beispielsweise, dass die Seite vom Originalserver geladen wird, nicht aus dem Zwischenspeicher ("wird nach 0 Sekunden fällig")

<meta http-equiv="refresh" content="0; url=http://irgendeineadresse.de"> erreicht, dass nach 0 Sekunden zur aufgeführten Adresse weitergeleitet wird (wenn man z.B. zwei Domains aber nur einen Server mit Inhalt nutzt).

Wenn man das ganze also nicht über einen HTTP-Header konfigurieren kann, kann man es stattdessen über Metaelemente machen.

Ich hoffe, das hat dir ein bisschen weitergeholfen...?

Liebe Grüße

Jede Datei wird mit Header-Daten versehen. Auch Dateien, die über http versendet werden. Die bestehenden Datei-Header können dabei sogar durch http-Header ergänzt werden bzw. ist der Server in der Lage, EIGENE Header-Daten mit einzufügen. Hat den Vorteil, dass er teils individuell auf bestimmte (..Details unerheblich an dieser Stelle..) Voraussetzungen eingehen kann.

ALLES, was Du also unter http-eqiv ("Äquivalent" ==  gleichwertig) findest, lässt sich also auch über http-Header versenden. Nur, in manchen Fällen geht das nicht - wie Dein Zitat auch aufzeigt. Speichere ich eine über den Server ausgelieferte Datei, die ausschließlich mit http-Headern arbeitet, so gehen diese Direktiven schlichtweg verloren. Und kann in manchen Fällen zu unerwünschten Ergebnissen führen. 

Warum haben die http-Header also Vorrang? Weil ich sie dynamisch/programmatisch setzen kann. Die http-equivs dienen somit eher als "Fallback".

Hoffe, das hilft ein wenig fürs Verständnis.

  1. wo stehen meta elemente
  2. was sind das
  3. einfach die wichtigsten im kopf haben (umlaute, author, erstellungsdatum, keywords, korrekte darstellung des zeichensatzes, ...)

Ein Meta für Umlaute gibt es nicht. Es gibt nur eins für die korrekte Zeichenkodierung. Das ist wohl auch das, was Du mit der "Korrekten Darstellung des Zeichensatzes" meinst. ( <meta charset="UTF-8"> )

Das author-Meta spielt heute quasi keine Rolle mehr. Wurde zeitweise durch ein Rich-Snippet ersetzt, das aber bei Google auch keine Verwendung mehr findet.

Meta-Keywords haben schon seit Ewigkeiten keinerlei Relevanz mehr, insofern - überflüssiger Code.

  1. Auch wenn der <title> kein "Meta" im umgangssprachlichen Verständnis (Meta-TAG!) ist, so wird es dennoch unter Meta-"ELEMENTEN" gewertet.
  2. Was ist "die Titelseite des Browsers"?
  3. Es wird noch an anderen Stellen angezeigt als im Video angegeben. Bei den SERPS als klickbarer Titel, als Vorschlag bei Lesezeichen, beim Ausdruck im Footer. Im Content der Seite allerdings nicht, das ist richtig.
  4. "Suchwörter im Rahmen des HTML-Dokuments". Hält sich hartnäckig, aber Meta-Keywords spielen seit JAHREN keine Rolle mehr!
  5. das charset (mit hartem K gesprochen von "Character Set") bezieht sich nicht auf den ZeichenSATZ, sondern die ZeichenKODIERUNG, um genau zu sein. Aber ich gebe zu, das ist Korinthenkackerei ;) Der Vollständigkeit halber aber: http://webkrauts.de/artikel/2006/zeichens%C3%A4tze-und-zeichenkodierungen
  6. "Die Reihenfolger der metas ist beliebig". Bedingt richtig. Gilt im Prinzip für alle außer des charsets - dies sollte UNBEDINGT VOR der Ausgabe jedes möglichen Zeichen angewendet werden - also VOR dem Titel (Wird schließlich hie und da ausgegeben). Für den Rest kann ich das nur unterschreiben, auch wenn es dbzgl. "Best-Practices" gibt...
  7. Das Beispiel für den Meta-Author ist unglücklich gewählt. Der AUTHOR ist IMMER eine PERSON! Es KANN kein Unternehmen sein. Das wäre dann Meta PUBLISHER. Auch das - Korinthenkackerei, da das meta author heutzutage keine Rolle mehr spielt. Bestenfalls eine extremst untergeordnete. Aber es gibt kaum ein Programm/Maschine, die dies noch ausliest/verwendet. (S.o. Rich Snippets)
  8. Meta refresh sollte aus Gründen der Barrierefreiheit niemals nicht verwendet werden. Ob das die IHK in ihren Prüfungsfragen beachtet, sei allerdings mal dahin gestellt.
  9. Angaben für den Internetexplorer, annähernd, aber nicht ganz richtig. Es sagt, in welchem Modus der jeweilige IE arbeiten soll. Ein IE kann nämlich grundsätzlich all seine Vorgängerversionen "simulieren". Weiß er das nicht explizit, fällt er in den sogenannten "Quirks"-Modus zurück ("Hm, schau´n wir mal, was wir damit anfangen können, mit welchem IE auch immer). Best-practice wäre hier, immer "EDGE" anzugeben, also die aktuellste Version.
  10. Richtig gut finde ich den Hinweis auf das viewport Meta. Auch wenn sich aus dem Video kein Unterschied erkennen lässt und Kleinigkeiten fehlen.
    1. Visuell gibt es auffälligerweise keinen Unterschied.
      Fazit: Mit Dreamweaver LÄSST sich das nicht korrekt emulieren. Auch mit keinem mir bekannten anderen Tool.
      Zweites Fazit: Eine mobile Website muss IMMER auf einem Mobilgerät getestet werden! Alles andere ist GROB fahrlässig!
    2. Der Hinweis auf initial-scale ist defacto richtig. Aber auf einen Bug auf machen Geräten zurückzuführen. (iOs). Eigentlich bezeichnet er jedoch, welche Zoomstufe beim ersten Aufruf (also direkt nach dem Laden) gewählt werden soll.
    3. Lässt man es weg, zoomen manche Browser (iOS) tatsächlich. Heraus. Die Seite erscheint dann wie eine Briefmarke auf dem Screen. Hat mit der Umrechnung Gerätepixel (device-width) in CSS-Pixel (width) zu tun. Sprengt aber hier den Rahmen.
    4. Ja, man kann das Zoomen verbieten. Aber auch in Kombo mit initial-scale. Das wäre dann "user-scalable=no". Aber das verbieten im Prinzip alle Gesetze der UX (UsereXperience) sowie Barrierefreiheit.
    5. Vorbildlich: Der Hinweis auf die OpenGraph-Tags! Auch wenn weitaus mehr Dienste als Facebook diese nutzen. Wo Vor-/Nachteile liegen, da mangelt es im Beitrag allerdings an der notwendigen Transparenz. Fakt: Für die Optimierung des SMM (Social Media Marketing) heutzutage UNERLÄSSLICH!
    6. DC-Metas werden durchaus noch unterstützt. Allerdings nicht/kaum ohne Hinweis auf das entsprechende Schema. 
    7. "HTML5 Standards sind aber nur.." - nein. Leider nein. Siehe: https://wiki.whatwg.org/wiki/MetaExtensions . Eine schier ENDLOSE Liste! Und nur ein marginaler Bruchteil davon spielt wirklich eine Rolle, also bitte nicht abschrecken lassen! Dazu später mehr..
    8. Grundsätzlich schön ist das Anwendungsbeispiel. Aber es hat seine Tücken.
      1. Es sind keine Metas angezeigt, sondern (Sorry, falls ich falsch liegen sollte, ist eine etwas ehm.. "veraltete" Technologie) SSI (Serverside Includes). Diese werden bei der Generierung der Seite in "echte" Meta-Tags wie in den Beispielen vorab umgewandelt.
      2. Diese lassen sich - und das ist Gute dran - aber tatsächlich hervorragend durch eine beliebige "Maschine" (oder Programm) auswerten. Auch wenn das - wie im vorliegenden Beispiel  - wohl nur eine tut.
      3. Damit das Ganze valide würde - was im Beispiel wohl vermutlich egal ist, das es sich um eine nicht öffentlich zugängliche Version handelt, wie es scheint - müsste man grundsätzlich auf ein Schema verweisen. Wie man am Beispiel DC:Metas auch ablesen kann.
    9.  

Argh. Sorry. Leider kann man seine eigenen Beiträge hier nicht bearbeiten, deshalb dieser Nachtrag.

9. "W3C"-valid spielt heutzutage eigentlich keine Rolle mehr. Warum? Weil der HTML (HMTL5 gibt es eigentlich nicht einmal, bei HTML [siehe doctype] handelt es sich um einen fortlaufenden Standard) -Standard von der WHATWG "erfunden" wurde (einem Gremium hauptsächlich aus Browser- und Betriebssystemherstellern gegründeten Interessengruppe aufgrund der "Lame-@ssigkeit" des W3c. ;) ) Insofern gelten auch hier die Regeln der WHATWG, NICHT die des W3C. Die Validatoren des W3C könnt ihr also heute auch in der Pfeife rauchen, das W3C hat diesen Standard nur in weiten Teilen übernommen - und halt "HTML5" genannt..

Ansonsten: Wirklich guter Videobeitrag, Mit kleinen Tücken.

Leider kann ich nirgendwo Regeln für das Posting von Beiträgen finden. Ob auf Beiträge verlinkt werden darf z.B. Und ich möchte hier auch keine Werbung machen. Aber es fehlen noch Kleinigkeiten und manche Dinge (wie oben kurz angeführt) sind nicht ganz korrekt, nicht ganz vollständig oder schlichtweg Mythen (z.B. die Notwendigkeit/Relevanz von Keywords).

Ich möchte voranstellen, dass auch ich sicherlich niemals unfehlbar bin, aber ich denke, alles PRÜFUNGSRELEVANTEN (und ein wenig mehr, aber darauf wird im Kontext hingewiesen!) findet sich in einem meiner Blogbeiträge für die aktuelle Prüfung.

Siehe: Abschlussprüfung Mediengestalter Sommer 2016, Alle Fachrichtungen: U5: Meta-Elemente

Viel Erfolg bei der Prüfung an alle!

Hallo ThomasR,

vielen Dank für die Nachfrage!

In der Mediencommunity darf grundsätzlich alles verlinkt werden, was mit Fachinhalten in Druck- und Medien oder der Aus- und Weiterbildung generell zu tun hat. Links zu reinen Werbeseiten würden wir aber löschen.

Viele Grüße

Thomas Hagenhofer