This is an old revision of the document!

Modern Web

Pre*

Doc	Type	Example	Comment
1	DNS Record	`<link rel="dns-prefetch" href="//example.com">`
1	TCP Connection	`<link rel="preconnect" href="//example.com">`
1	Resource	`<link rel="prefetch" href="//example.com/resource.png">`	Nidrigere Prio als `preload` → Nur für Resourcen auf der “nächsten” Seite
1	Resource	`<link rel="preload" href="//example.com/resource.png" as="image">`	Höhere Prio als `prefetch` → Auch für Resourcen auf der aktuellen Seite
1	Site	`<link rel="prerender" href="//example.com/site/">`

Metadata

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.

Open Graph

Doku
<html prefix=“og: http://ogp.me/ns#”> nicht vergessen

Twitter

Alle Tags
Twitter verwendet das Open Graph Metadatum, wenn das korrespondierende Twitter Datum fehlt.
Keine namespace definition in <html> (im gegensatz zu Open Graph)

Beispiele

#!/usr/bin/env python3
 
import requests
import requests_cache
from bs4 import BeautifulSoup, Comment
 
sites = [
	'https://de.wikipedia.org/wiki/Reporter_ohne_Grenzen',
	'https://ebay.us/wWgf3M',
	'https://stackoverflow.com/q/1740341',
	'https://www.amazon.com/dp/1539836835',
	'https://www.imdb.com/title/tt1323594',
	'https://twitter.com/skruppy_/status/1091814026416398337',
	'https://twitter.com/skruppy_',
	'https://www.instagram.com/reporterohnegrenzen',
	'https://www.instagram.com/p/BtV8o9fjkR8/',
	'https://en.zalando.de/zalando-happy-birthday-gift-card-box-light-blue-zzgz000bs-k11.html',
	'https://www.etsy.com/listing/645132564/monty-python-collage-t-shirt',
	'https://www.youtube.com/user/RSFinternet',
	'https://www.youtube.com/watch?v=5OOslRIRZ2k',
	'http://www.spiegel.de/kultur/gesellschaft/a-1244288.html',
	'https://github.com/Skrupellos',
	'https://github.com/Skrupellos/sir',
]
 
requests_cache.install_cache('/tmp/requests-cache')
 
def findMeta(soup, attrKey, attrValue):
	return list(map(lambda x: x['content'], soup.find_all('meta', attrs={attrKey: attrValue})))
 
def dump(title, values):
	print('\033[1;36m%s\033[0m' % title)
	for i, val in enumerate(values):
		print('  \033[36m%s)\033[0m %s' % (i+1, val))
 
for url in sites:
	print('\033[1;35;47m %s \033[0m' % url)
	html = requests.get(url, headers={
		'User-Agent': 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36',
		'Accept-language': 'en-US,en;q=0.5',
	}).text
	soup = BeautifulSoup(html, 'html.parser')
	for comment in soup.findAll(text=lambda x: isinstance(x, Comment)):
		comment.extract()
 
	dump('<title>',                    [soup.find('title').string])
	dump('meta - title',               findMeta(soup, 'name', 'title'))
	dump('meta - og:tite',             findMeta(soup, 'property', 'og:title'))
	dump('meta - twitter:title',       findMeta(soup, 'name', 'twitter:title'))
	dump('<h1>',                       list(map(lambda x: x.prettify(), soup.find_all('h1'))))
 
	dump('meta - description',         findMeta(soup, 'name', 'description'))
	dump('meta - og:description',      findMeta(soup, 'property', 'og:description'))
	dump('meta - twitter:description', findMeta(soup, 'name', 'twitter:description'))
	print('')

Cache

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
`must-revalidate`	Private / Public	Abgelaufen → validieren	Re{validate,loading}
`no-cache`		Immer → validieren	Cachability
`no-store`		Gar nie nicht speichern	Other
`no-transform`		Gecachten content nicht verändern (z.B. Optimieren)	Other
`public`			Cachability
`private`	Public		Cachability
`proxy-revalidate`	Public	Abgelaufen → validieren	Re{validate,loading}
`max-age=<seconds>`	Private / Public	Relative Cache Zeit	Expiration
`s-maxage=<seconds>`	Public	Relative Cache Zeit (vorrang vor `Expires` und `s-maxage`)	Expiration
`immutable`		Nicht abgelaufen → verwenden (auch bei F5, aber nicht bei Shift+F5) / Abgelaufen →Nicht verwenden 1	Re{validate,loading}

Wiki

Table of Contents

Modern Web

Pre*

Metadata

Open Graph

Twitter

Beispiele

Cache