Wiki

A universe of ideas

User Tools

Site Tools

You are here: A universe of ideas » Computer » web
Trace:
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 (V) (V) (V) (X) (V) Suchmaschinen
Open Graph (V) (V) (V) ((V)) (X) (V) (X) Sozial Media Platformen
Twitter Cards (V) (V) (V) (X) (X) (V) (X) Sozial Media Platformen
oEmbed (V) (X) (V) (V) (V) (V) (X) 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

  • Doku by ogp.me, Facebook (und mixi.jp)
  • <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:url ist die Kanonische URL

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)
  • 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

  • twitter:site: [6]
  • twitter:site:id: [6]
  • twitter:creator: [6]
  • twitter:creator:id: [6]
  • twitter:domain: [7]

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.

Ergebnis der Auswertung anzeigen (langer Text)

Ergebnis der Auswertung anzeigen (langer Text) 

### https://www.youtube.com/user/RSFinternet
<title>                      1) Reporters sans frontières - YouTube
meta - title                 1) Reporters sans frontières
meta - og:tite               1) Reporters sans frontières
meta - twitter:title         1) Reporters sans frontières
<h1>                         1) Reporters sans frontières

### https://www.youtube.com/watch?v=5OOslRIRZ2k
<title>                      1) Press conference - 2016 World Press Freedom Index - Washington - YouTube
meta - title                 1) Press conference - 2016 World Press Freedom Index - Washington
meta - og:tite               1) Press conference - 2016 World Press Freedom Index - Washington
meta - twitter:title         1) Press conference - 2016 World Press Freedom Index - Washington
<h1>                         1) Press conference - 2016 World Press Freedom Index - Washington

### https://de.wikipedia.org/wiki/Reporter_ohne_Grenzen
  <title>                    1) Reporter ohne Grenzen – Wikipedia
  <h1>                       1) Reporter ohne Grenzen

### https://ebay.us/wWgf3M
  <title>                    1) Fotos für die Pressefreiheit 2018 Reporter ohne Grenzen e V 9783937683713  | eBay
  meta - og:tite             1) Fotos für die Pressefreiheit 2018 Reporter ohne Grenzen e V 9783937683713  | eBay
  meta - twitter:title       1) Fotos für die Pressefreiheit 2018 Reporter ohne Grenzen e V 9783937683713
  <h1>                       1) <span class="g-hdn">Details zu</span> Fotos für die Pressefreiheit 2018 Reporter ohne Grenzen e V 9783937683713

### https://stackoverflow.com/q/1740341
  <title>                    1) semantic web - What is the difference between RDF and OWL? - Stack Overflow
  meta - og:tite             1) What is the difference between RDF and OWL?
  meta - twitter:title       1) What is the difference between RDF and OWL?
  <h1>                       1) What is the difference between RDF and OWL?

### https://www.amazon.com/dp/1539836835
  <title>                    1) SAFETY GUIDE FOR JOURNALISTS A handbook for reporters in high-risk environments: United Nations Educational Scientific and Cultural Organization, Reporters Without Borders: 9781539836834: Amazon.com: Books
  meta - title               1) SAFETY GUIDE FOR JOURNALISTS A handbook for reporters in high-risk environments: United Nations Educational Scientific and Cultural Organization, Reporters Without Borders: 9781539836834: Amazon.com: Books

### https://www.imdb.com/title/tt1323594
  <title>                    1) Despicable Me (2010) - IMDb
  meta - title               1) Despicable Me (2010) - IMDb
  meta - og:tite             1) Despicable Me (2010)
  <h1>                       1) Despicable Me <span id="titleYear">(2010)</span>

### https://twitter.com/skruppy_/status/1091814026416398337
  <title>                    1) Skruppy on Twitter: "1) https://t.co/CVOCYgV57g hatte Git repo mit ihrem code und Passwörtern im web root 😯2) Bounty = Gemeinnützige Spende (50% von Devs, Dankbarkeit und so) https://t.co/XaNeTHPkcF"
  meta - og:tite             1) Skruppy on Twitter
  <h1>                       1) Skruppy

### https://twitter.com/skruppy_
  <title>                    1) Skruppy (@skruppy_) | Twitter
  <h1>                       1) Skruppy

### https://www.instagram.com/reporterohnegrenzen
  <title>                    1) Reporter ohne Grenzen (@reporterohnegrenzen) • Instagram photos and videos
  meta - og:tite             1) Reporter ohne Grenzen (@reporterohnegrenzen) • Instagram photos and videos

### https://www.instagram.com/p/BtV8o9fjkR8/
  <title>                    1) Reporter ohne Grenzen on Instagram: “Bundeswirtschaftsminister Peter #Altmaier reist am Wochenende nach #Ägypten. Er muss die #Freilassung aller wegen ihrer Arbeit inhaftierten…”
  meta - og:tite             1) Reporter ohne Grenzen on Instagram: “Bundeswirtschaftsminister Peter #Altmaier reist am Wochenende nach #Ägypten. Er muss die #Freilassung aller wegen ihrer Arbeit inhaftierten…”

### https://en.zalando.de/zalando-happy-birthday-gift-card-box-light-blue-zzgz000bs-k11.html
  <title>                    1) Zalando HAPPY BIRTHDAY - Gift card box - light blue - Zalando.de
  meta - og:tite             1) HAPPY BIRTHDAY - Gift card box - light blue @ Zalando.de 🛒
  meta - twitter:title       1) HAPPY BIRTHDAY - Gift card box - light blue - Zalando.de
  <h1>                       1) HAPPY BIRTHDAY - Gift card box

### https://www.etsy.com/listing/645132564/monty-python-collage-t-shirt
  <title>                    1) Monty Python Collage T Shirt | Etsy
  meta - og:tite             1) Monty Python Collage T Shirt
  <h1>                       1) Welcome to Etsy!
  <h1>                       2) Monty Python Collage T Shirt

### http://www.spiegel.de/kultur/gesellschaft/a-1244288.html
  <title>                    1) Reporter ohne Grenzen: Mindestens 80 Journalisten 2018 getötet - SPIEGEL ONLINE
  meta - og:tite             1) Reporter ohne Grenzen: Weltweit mindestens 80 Journalisten getötet - SPIEGEL ONLINE - Kultur
  <h1>                       1) Reporter ohne Grenzen: Mindestens 80 Journalisten 2018 getötet

### https://github.com/Skrupellos
  <title>                    1) Skrupellos (Skruppy) · GitHub
  meta - og:tite             1) Skrupellos - Overview
  <h1>                       1) Skruppy Skrupellos

### https://github.com/Skrupellos/sir
  <title>                    1) GitHub - Skrupellos/sir: Sir Tificate will help you to do automated TLS certificate rollovers, including TLSA updates.
  meta - og:tite             1) Skrupellos/sir
  <h1>                       1) Skrupellos / sir

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
no-cache Immer → validieren Cachability
public (default cachability) Private (V) / Shared (V) Cachability
private Shared Private (V) / Shared (X) 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 [9] Re{validate,loading}
no-store Cachability: Private (X) / Shared (X) Other
no-transform Gecachten content nicht verändern (z.B. Optimieren) Other
[1] ↑ https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-DNS-Prefetch-Control#Forcing_lookup_of_specific_hostnames
[2] ↑ ↑ https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types
[3] ↑ https://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQ
[4] ↑ https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
[5] ↑ https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/troubleshooting-cards
[6] ↑ ↑ ↑ ↑ https://twittercommunity.com/t/what-does-twitter-site-and-twitter-creator-tags-do/52696
[7] ↑ https://stackoverflow.com/a/32586464
[8] ↑ https://developer.twitter.com/en/docs/twitter-for-websites/webpage-properties/overview.html
[9] ↑ http://bitsup.blogspot.com/2016/05/cache-control-immutable.html
[10] ↑ https://www.mnot.net/blog/2006/02/18/invalidation
computer/web.1549682572.txt.gz · Last modified: (external edit)