computer:web
This is an old revision of the document!
Table of Contents
Modern Web
Pre*
| Doc | Type | Example | Comment |
|---|---|---|---|
| [1] | DNS Record | <link rel="dns-prefetch" href="//example.com"> | |
| [2] | TCP Connection | <link rel="preconnect" href="//example.com"> | |
| [3] | Resource | <link rel="prefetch" href="//example.com/resource.png"> | Nidrigere Prio als preload → Nur für Resourcen auf der “nächsten” Seite |
| [4] | Resource | <link rel="preload" href="//example.com/resource.png" as="image"> | Höhere Prio als prefetch → Auch für Resourcen auf der aktuellen Seite |
| [2] | Site | <link rel="prerender" href="//example.com/site/"> |
Metadata
Übersicht
- Google ersetzt bei den Breadcrums das erste Element durch die base URL der Seite (nicht der des ersten Elements) und lässt das letzte weg.
- Firefox, Vivaldi und Chromium hängen ihren Namen mit “-” an
<title>im Fenstertitel → Am besten die Elemente im Title auch mit “-” Trennen. - Immer Canonical URLs setzen, es könnten ja auch andere Webseiten mit Query Parametern auf die Seite Verlinken und damit einen weiteren Eintrag in Suchmaschinen erzeugen.
Protokolle
| Protokoll | Vorschau meiner URL / Webseite mit … | Semantische Auszeichnung vom gesamten Dokument | Nutzer | |||||
|---|---|---|---|---|---|---|---|---|
| Title | Description | Thumbnail | Autor | Meinem HTML | Multimedia anstatt Thumbnail |
|||
| schema.org |  | | |  | | Suchmaschinen | ||
| Open Graph | | | | () | | | | Sozial Media Platformen |
| Twitter Cards | | | | | | | | Sozial Media Platformen |
| oEmbed | | | | | | | | Alles was nicht Groß ist (Private Blogs, News Seiten, …) |
schema.org
- Gesponsort von Google, Bing, Yahoo und Yandex (vmtl. daher auch verwendung?)
- Wird definitiv von Google verwendet
Open Graph
<html prefix=“og: http://ogp.me/ns#”>nicht vergessen- Die Höhe/Breite eines Bildes dient dazu damit es beim ersten Aufruf schon richtig dargestellt wird.
og:urlist die Kanonische URL
- Twitter verwendet das Open Graph Metadatum, wenn das korrespondierende Twitter Datum fehlt.
- Keine namespace definition in
<html>(im gegensatz zu Open Graph) - Für summary Cards, einfach keine twitter Metatags definieren, sondern nur Open Graph
- Cards werden ca. wöchentlich neu gecrawled, Für immage updates muss(?) man die URL ändern [5]
Standard tags
Twitters doku ist stark out-dated.
Vmtl. gild: Alle Angaben der summary Card gelten für alle Cards (bis auf twitter:image bei summary_large_image Cards)
| twitter:card | summary (default) | summary_large_image | player | app |
|---|---|---|---|---|
| twitter:title | 1 Zeile (Web) / 2 Zeilen (Mobile) | (Keine Angabe) | (Nicht vorhanden) | |
| twitter:description | 3 Zeilen (Web) / Nicht Sichtbar (Mobile) | Max 200 Zeichen | ||
| twitter:image | 1:1; Min 144×144 | 2:1; Min 300×157 | Min 68.600 Pixel (Seitenverhältnis wie player, Bild nur fallback) | (Nicht vorhanden) |
| twitter:image:alt | Max 420 Zeichen | |||
Für alle Bilder gild: 4096×4096; <5MB; JPEG, PNG, WEBP und GIF (nicht animiert)
Spezielle Tags
Alle ungetestet
- twitter:player:
- twitter:player:width:
- twitter:player:height:
- twitter:player:stream:
- twitter:app:name:iphone:
- twitter:app:id:iphone:
- twitter:app:url:iphone:
- twitter:app:name:ipad:
- twitter:app:id:ipad:
- twitter:app:url:ipad:
- twitter:app:name:googleplay:
- twitter:app:id:googleplay:
- twitter:app:url:googleplay:
Deprecated
Weiteres
- twitter:dnt: “Do Not Track” Anweisung für Widgets. Hat nichts mit Cards zu tun [8]
Analyse
- Das Analysescript: metana.py
- Wenn eine Description vorhanden war, war es immer die selbe.
- Die YouTube Daten aus der Analyse könnten falsch sein.
Cache
Hier werden nur Caching Headers im Response von GET Request behandelt.
Einträge dem Cache hinzufügen (Cacheability)
Algorithmus zur Bestimmung der Cachebarkeit [9]
if(
Methode speicherbar &&
Statuscode unterstützt &&
!request.no-store &&
!response.no-store &&
(shared => !response.private) &&
( (shared => !request.Authorization) || unless the response explicitly allows it (see Section 3.2) ) &&
(
response.Expires ||
response.max-age ||
(shared && response.s-maxage) ||
(response.Cache-Control Extension (see Section 5.2.3) that allows it to be cached) ||
(response.status.cacheable_by_default) ||
(response.public)
)
) {
Vermutlich Speichern
}
else {
Definitiv nicht speichern
}
Zu den Statuscodes die standardmäßig cachebar sind gehören unter anderem: 200, 203, 204, 206, 300, 301, 404, 405, 410, 414, und 501 [10]
Mit public können auch POST und Auth Resourcen gecached werden [11][12]. Ohne genaue Erklärung äusert sich auch eBay wie es POST requests cached.
Einträge aus dem Cache löschen (Invalidation)
Weiteres
Dieser Abschnitt ist noch hochgradig Falsch!
- public proxy (shared cache) vs private browser cache
- Neu Laden vs validieren
Cache-Control vom Server | Für | Funktion | Typ |
|---|---|---|---|
no-cache | Immer → validieren | Cachability | |
public | Private / Shared | Cachability | |
private | Shared | Private / Shared | Cachability |
max-age=<seconds> | Private / Shared | Relative Cache Zeit | Expiration |
s-maxage=<seconds> | Shared | Relative Cache Zeit (vorrang vor Expires und s-maxage) | Expiration |
must-revalidate | Private / Shared | Abgelaufen → validieren | Re{validate,loading} |
proxy-revalidate | Shared | Abgelaufen → validieren | Re{validate,loading} |
immutable | Nicht abgelaufen → verwenden (auch bei F5, aber nicht bei Shift+F5) / Abgelaufen →Nicht verwenden [13] | Re{validate,loading} | |
no-store | Cachability: Private / Shared | Other | |
no-transform | Gecachten content nicht verändern (z.B. Optimieren) | Other |
- REDbot: Caching Header online analyse tool
- Preload ggf. auch bei Edge caches
- POST, PUT und DELETE invalidieren private und shared cached. [14]
- RFC 7234: Hypertext Transfer Protocol (HTTP/1.1): Caching
- Liste an ''Cache-Control'' direktiven bei der IANA.
computer/web.1549692937.txt.gz · Last modified: (external edit)