| Both sides previous revisionPrevious revisionNext revision | Previous revision |
| computer:web [2019-02-08 18:25] – [Cache] skrupellos | computer:web [2019-02-09 08:58] (current) – removed skrupellos |
|---|
| ====== Modern Web ====== | |
| ===== Pre* ===== | |
| ^ Doc ^ Type ^ Example ^ Comment ^ | |
| | [[https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-DNS-Prefetch-Control#Forcing_lookup_of_specific_hostnames|1]] | DNS Record | ''%%<link rel="dns-prefetch" href="//example.com">%%'' | | | |
| | [[https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types|1]] | TCP Connection | ''%%<link rel="preconnect" href="//example.com">%%'' | | | |
| | [[https://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQ|1]] | Resource | ''%%<link rel="prefetch" href="//example.com/resource.png">%%'' | Nidrigere Prio als ''preload'' -> \\ Nur für Resourcen auf der "nächsten" Seite | | |
| | [[https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content|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 | | |
| | [[https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types|1]] | 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 [[http://ogp.me/|ogp.me]], [[https://developers.facebook.com/docs/sharing/webmasters|Facebook]] (und [[http://developer.mixi.co.jp/en/connect/mixi_plugin/mixi_check/spec_mixi_check/|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 ==== | |
| * [[https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/markup|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 %%[%%[[https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/troubleshooting-cards|Q]]%%]%% | |
| |
| |
| === Standard tags === | |
| <WRAP center round important 60%> | |
| Twitters doku ist stark out-dated. | |
| |
| Vmtl. gild: Alle Angaben der //summary// Card gelten für alle Cards (bist auf //twitter:image// bei //summary_large_image// Cards) | |
| </WRAP> | |
| |
| ^ 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 144x144 | 2:1; Min 300x157 | Min 68.600 Pixel \\ (Seitenverhältnis wie player, Bild nur fallback) | //(Nicht vorhanden)// | | |
| ^ twitter:image:alt | Max 420 Zeichen ||| | | |
| |
| Für alle Bilder gild: 4096x4096; <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**: %%[%%[[https://twittercommunity.com/t/what-does-twitter-site-and-twitter-creator-tags-do/52696|Q]]%%]%% | |
| * **twitter:site:id**: %%[%%[[https://twittercommunity.com/t/what-does-twitter-site-and-twitter-creator-tags-do/52696|Q]]%%]%% | |
| * **twitter:creator**: %%[%%[[https://twittercommunity.com/t/what-does-twitter-site-and-twitter-creator-tags-do/52696|Q]]%%]%% | |
| * **twitter:creator:id**: %%[%%[[https://twittercommunity.com/t/what-does-twitter-site-and-twitter-creator-tags-do/52696|Q]]%%]%% | |
| * **twitter:domain**: %%[%%[[https://stackoverflow.com/a/32586464|Q]]%%]%% | |
| |
| === Weiteres === | |
| * **twitter:dnt**: "Do Not Track" Anweisung für Widgets. Hat nichts mit Cards zu tun %%[%%[[https://developer.twitter.com/en/docs/twitter-for-websites/webpage-properties/overview.html|Q]]%%]%% | |
| |
| |
| ==== Analyse ==== | |
| * Das Analysescript: [[https://gist.github.com/Skrupellos/878a01242e985b965ec66927aba74608|metana.py]] | |
| * Wenn eine Description vorhanden war, war es immer die selbe. | |
| * Die YouTube Daten aus der Analyse könnten falsch sein. | |
| |
| <code> | |
| ### 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 | |
| </code> | |
| ===== Cache ===== | |
| <WRAP center round important 60%> | |
| Dieser Abschnitt ist noch hochgradig Falsch! | |
| </WRAP> | |
| |
| * 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%%'' | | | Cachability | | |
| | ''%%private%%'' | Public | | Cachability | | |
| | ''%%max-age=<seconds>%%'' | Private / Public | Relative Cache Zeit | Expiration | | |
| | ''%%s-maxage=<seconds>%%'' | Public | Relative Cache Zeit (vorrang vor ''Expires'' und ''s-maxage'') | Expiration | | |
| | ''%%must-revalidate%%'' | Private / Public | Abgelaufen -> validieren | Re{validate,loading} | | |
| | ''%%proxy-revalidate%%'' | Public | Abgelaufen -> validieren | Re{validate,loading} | | |
| | ''%%immutable%%'' | | Nicht abgelaufen -> verwenden (auch bei F5, aber nicht bei Shift+F5) / Abgelaufen ->Nicht verwenden [[http://bitsup.blogspot.com/2016/05/cache-control-immutable.html|1]] | Re{validate,loading} | | |
| | ''%%no-store%%'' | | Gar nie nicht speichern | Other | | |
| | ''%%no-transform%%'' | | Gecachten content nicht verändern (z.B. Optimieren) | Other | | |
| |
| |
| * https://tools.ietf.org/html/rfc7234 | |
| * https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching | |
| * Schöner Entscheidungsbaum: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching?hl=de | |
| * https://www.slideshare.net/martinmartin7777/http-caching-basics-66553113 | |
| * https://www.keycdn.com/blog/http-cache-headers | |
| * https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control | |
| * https://www.fastly.com/blog/understanding-vary-header-browser | |
| * https://www.digitalocean.com/community/tutorials/web-caching-basics-terminology-http-headers-and-caching-strategies | |
| * https://redbot.org/ | |
| * Preload ggf. auch bei Edge caches | |
