SlideShare ist ein Scribd-Unternehmen logo
1 von 23
1 TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen DivingintotheSEO-Jungle
A History-Lesson 2 TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen
Im Kern: Kill Flash Aktualisierung der Tags Vereinheitlichung HTML, DOM, XML Accessibility Offline-Integration Mehr Semantik Erweitert: JS APIs CSS3 Was ist HTML5 TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 3
Canvas Localstorage draggable="true“ Native Drag and Drop Shop-Sites, Downloads… Video & Audio-API Geolocation http://studio.html5rocks.com/ http://html5demos.com/contenteditable http://craftymind.com/factory/html5video/CanvasVideo.html Whooooa! TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 4
Aber SEO? TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 5
6 TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen Seitenaufbau <body> <div> <div id=„navi“></div> <div id=„headline“><h1>Artikel</h1></div> <div><span id=„teaser“></span></div> <div><h2></h2></div> <div id=„Sidebar“></div> <div id=“…“></div> <div id=„Footer“></div> </div> </body> <body>  <header>...</header>  <nav>...</nav> <Section> <article> <h1>Artikel</h1> </article> <section> <h1>Kommentare</h1>  <article> <h1>Kommentar 1</h1>  </article> </section>  </article> <aside>...</aside> <footer>...</footer> </body>
Link Relations TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 7 Alternate Alternative Darstellung des gleichen Inhalts Archives  Links zu Archiven Author Link zum Autorenprofil Bookmark   External Linkziel auf anderer Domain First, Next, prev, Last  Link zum ersten/nächsten/vorherigen/letzten Artikel einer Serie Help  Link zu kontext-sensitiver Hilfe Index  Link zu einer Inhaltsübersicht License Link zur Spezifikation der Lizenz, unter der der Hauptinhalt der Seite steht Nofollow Google schwingt an der Liane nicht weiter Noreferrer Anweisung an den Browser keinen Referer mit zu senden Prefetch Seite schon mal vorladen Search  Link zur internen Suche Sidebar  Linkziel in iFrame darstellen Tag  Link zu Tag-Seiten Up Nächste übergeordnete Ebene
Strukturierte Daten für Events Organisationen Personen Produkte Ratings Reviews Rezepte Diskussionen Breadcrumb Zeit Microdata / Itemproperties I TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 8
Microdata / Itemproperties II TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 9
Formulare | damals™ TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 10
Stärkere Strukturierung von Formularen Automatische Browser-Validierung (trotzdem Serverseitig checken, wenn 100% Sicherheit notwendig) Überprüfung auf Reguläre Ausdrücke Prüfung valide Mail-Adresse Prüfung valide URL Prüfung Date-Range Prüfung Zahlenraum (nicht nur MAX und MIN, sondern auch Intervallschritte) Insbesonderespannendfür mobiles (Anpassung der Tastatur auf nurNummern…) Formulare TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 11
<inputid="q" autofocus>  Autofocus bei Seitenaufruf <inputid="q" required>  Ausfüllpflicht <inputid="q" autocomplete>  autocomplete Anpassung der Eingabemethode auf mobilen Endgeräten, wenn  Zahlen Oder Mailadressen gefordert sind Search-Boxen semantisch auszeichnen Input Type=color mit automatischer Farbauswahl RGB-Style Date-Picker mit automatisch eingeblendetem Kalenderauswahlfeld Formulare | Das alles, und noch viel mehr… TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 12
type="date" type="month" type="week" type="time" type="datetime" type="datetime-local" Formulare | Datumsauswahl TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 13
valid invalid required optional in-range out-of-range read-only read-write Formulare | CSS3-Pseudo-Klassen TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 14
Neues Element <audio> Attribute zur Steuerung Unterstützung verschiedener Dateiformate Audio TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 15
Neues Element <video> Attribute zur Steuerung Unterstützung verschiedener Dateiformate Video TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 16
Canvas TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 17 <!DOCTYPE HTML> <html> <body> <canvasid="myCanvas">yourbrowserdoesnotsupportthecanvas tag </canvas> <scripttype="text/javascript"> varcanvas=document.getElementById('myCanvas'); var ctx=canvas.getContext('2d'); ctx.fillStyle='#FF0000'; ctx.fillRect(0,0,80,100); </script> </body> </html>
Video + Canvas TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 18
SVGs TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 19 <html>   <svg>     <circleid="myCircle" class="important" cx="50%" cy="50%" r="100"  fill="url(#myGradient)" onmousedown="alert('hello');"/>   </svg> </html>
Pseudoklassen für Formulare und jede zweite Tabellenzeile Verneinungen :not(span) {Anweisung} Erste h2 anders h2:first-child { ... } WebFonts TollereTextumbrüche (Ellipsen…) div {text-overflow: ellipsis;} Flexible Spaltendesigns Mehr Transparenz + Sättigung + Farbverläufe + Schatten (Auto-Web2.0-Button) Runde Ecken Dynamisches und animiertes CSS (Warum denn JS?) CSS3 | Für einen bunteren Dschungel TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 20
Aber Holla! Unbedingt ansehen http://html5boilerplate.com/ HTML/CSS/JS Template (inkl. ie6) http://initializr.com/ schneller Template-Generator Welcher Browser unterstützt was genau? http://www.findmebyip.com/litmus Safari und Chrome liegen vorn Mobile Browser sind nicht wirklich schlechter(http://rakaz.nl/2010/03/the-html5-test.html) Und meiner? http://html5test.com/ Nutzbar? TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 21
Noch Fragen? Jemand Erfahrungen? Meinungen? Ausblick TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 22
Die in dieser Präsentation dargestellten Daten und Grafiken sind geistiges Eigentumder TRG – The Reach Group GmbH.  Die Vervielfältigung, Weitergabe und Veränderung – auch in Teilen –istohneVertragsgrundlagenichtgestattet. Impressum TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 23 TRG – The Reach Group GmbH Große Elbstraße 45, 4. OG 22767 Hamburg Telefon 030 . 920 383 3300Telefax 030 . 920 383 3001 E-Mail info@thereachgroup.de Web www.thereachgroup.de

Weitere ähnliche Inhalte

Andere mochten auch

Sagittar Antenna Specifications (single and dual polarisation)
Sagittar Antenna Specifications (single and dual polarisation)Sagittar Antenna Specifications (single and dual polarisation)
Sagittar Antenna Specifications (single and dual polarisation)Sagittar
 
[Bib 360 - Francorp] Ciclo de Charlas de Inbound Marketing para Franquicias.
[Bib 360 - Francorp] Ciclo de Charlas de Inbound Marketing para Franquicias.[Bib 360 - Francorp] Ciclo de Charlas de Inbound Marketing para Franquicias.
[Bib 360 - Francorp] Ciclo de Charlas de Inbound Marketing para Franquicias.BIB 360 - Agencia de Inbound Marketing
 
A Marketer's Guide to Social CRM
A Marketer's Guide to Social CRMA Marketer's Guide to Social CRM
A Marketer's Guide to Social CRMStrongView
 
AL-FIN un taller sobre Repositorios Institucionales (parte 3)
AL-FIN un taller sobre Repositorios Institucionales (parte 3)AL-FIN un taller sobre Repositorios Institucionales (parte 3)
AL-FIN un taller sobre Repositorios Institucionales (parte 3)Fernando-Ariel Lopez
 
The Effects of Pipe Material and Age on the Formation of Disinfection By – Pr...
The Effects of Pipe Material and Age on the Formation of Disinfection By – Pr...The Effects of Pipe Material and Age on the Formation of Disinfection By – Pr...
The Effects of Pipe Material and Age on the Formation of Disinfection By – Pr...Marwan Haddad
 
Presentation Convention France 2015
Presentation Convention France 2015 Presentation Convention France 2015
Presentation Convention France 2015 Wildix
 
Día de Andalucía. Juan José
Día de Andalucía. Juan JoséDía de Andalucía. Juan José
Día de Andalucía. Juan Joséacasasgut
 
Becas Adim Santa Clara Chajul
Becas Adim Santa Clara ChajulBecas Adim Santa Clara Chajul
Becas Adim Santa Clara ChajulRenata Avila
 
Presentaci n sistemas_de_gesti_n_-_inalcec
Presentaci n sistemas_de_gesti_n_-_inalcecPresentaci n sistemas_de_gesti_n_-_inalcec
Presentaci n sistemas_de_gesti_n_-_inalcecJose William Peña
 
Servicios Asociados enerTIC 2016
Servicios Asociados enerTIC 2016Servicios Asociados enerTIC 2016
Servicios Asociados enerTIC 2016enerTIC Plataforma
 
Internet y las redes sociales virtuales. 4º eso. 8. canales distribución cont...
Internet y las redes sociales virtuales. 4º eso. 8. canales distribución cont...Internet y las redes sociales virtuales. 4º eso. 8. canales distribución cont...
Internet y las redes sociales virtuales. 4º eso. 8. canales distribución cont...Tu Instituto Online
 
01 AREA-Región CARIBE en Relaciones Internacionales (2014)
01  AREA-Región CARIBE en Relaciones Internacionales (2014)01  AREA-Región CARIBE en Relaciones Internacionales (2014)
01 AREA-Región CARIBE en Relaciones Internacionales (2014)Mirna Yonis / UCV
 
Vito Gamberale - Il fotovoltaico come il computer e il telefono cellulare?
Vito Gamberale - Il fotovoltaico come il computer e il telefono cellulare?Vito Gamberale - Il fotovoltaico come il computer e il telefono cellulare?
Vito Gamberale - Il fotovoltaico come il computer e il telefono cellulare?Vito Gamberale
 
Irrigación de las porciones distales de los miembros
Irrigación de las porciones distales de los miembrosIrrigación de las porciones distales de los miembros
Irrigación de las porciones distales de los miembrosOlgui Villarroel
 

Andere mochten auch (20)

Sagittar Antenna Specifications (single and dual polarisation)
Sagittar Antenna Specifications (single and dual polarisation)Sagittar Antenna Specifications (single and dual polarisation)
Sagittar Antenna Specifications (single and dual polarisation)
 
Publicidad dhtic
Publicidad dhticPublicidad dhtic
Publicidad dhtic
 
[Bib 360 - Francorp] Ciclo de Charlas de Inbound Marketing para Franquicias.
[Bib 360 - Francorp] Ciclo de Charlas de Inbound Marketing para Franquicias.[Bib 360 - Francorp] Ciclo de Charlas de Inbound Marketing para Franquicias.
[Bib 360 - Francorp] Ciclo de Charlas de Inbound Marketing para Franquicias.
 
A Marketer's Guide to Social CRM
A Marketer's Guide to Social CRMA Marketer's Guide to Social CRM
A Marketer's Guide to Social CRM
 
AL-FIN un taller sobre Repositorios Institucionales (parte 3)
AL-FIN un taller sobre Repositorios Institucionales (parte 3)AL-FIN un taller sobre Repositorios Institucionales (parte 3)
AL-FIN un taller sobre Repositorios Institucionales (parte 3)
 
The Effects of Pipe Material and Age on the Formation of Disinfection By – Pr...
The Effects of Pipe Material and Age on the Formation of Disinfection By – Pr...The Effects of Pipe Material and Age on the Formation of Disinfection By – Pr...
The Effects of Pipe Material and Age on the Formation of Disinfection By – Pr...
 
Cv brochure
Cv brochureCv brochure
Cv brochure
 
Presentation Convention France 2015
Presentation Convention France 2015 Presentation Convention France 2015
Presentation Convention France 2015
 
Práctica 1c
Práctica 1cPráctica 1c
Práctica 1c
 
Día de Andalucía. Juan José
Día de Andalucía. Juan JoséDía de Andalucía. Juan José
Día de Andalucía. Juan José
 
Formato estilo apa
Formato estilo apaFormato estilo apa
Formato estilo apa
 
Glosario
GlosarioGlosario
Glosario
 
Becas Adim Santa Clara Chajul
Becas Adim Santa Clara ChajulBecas Adim Santa Clara Chajul
Becas Adim Santa Clara Chajul
 
Presentaci n sistemas_de_gesti_n_-_inalcec
Presentaci n sistemas_de_gesti_n_-_inalcecPresentaci n sistemas_de_gesti_n_-_inalcec
Presentaci n sistemas_de_gesti_n_-_inalcec
 
Servicios Asociados enerTIC 2016
Servicios Asociados enerTIC 2016Servicios Asociados enerTIC 2016
Servicios Asociados enerTIC 2016
 
Internet y las redes sociales virtuales. 4º eso. 8. canales distribución cont...
Internet y las redes sociales virtuales. 4º eso. 8. canales distribución cont...Internet y las redes sociales virtuales. 4º eso. 8. canales distribución cont...
Internet y las redes sociales virtuales. 4º eso. 8. canales distribución cont...
 
01 AREA-Región CARIBE en Relaciones Internacionales (2014)
01  AREA-Región CARIBE en Relaciones Internacionales (2014)01  AREA-Región CARIBE en Relaciones Internacionales (2014)
01 AREA-Región CARIBE en Relaciones Internacionales (2014)
 
Vito Gamberale - Il fotovoltaico come il computer e il telefono cellulare?
Vito Gamberale - Il fotovoltaico come il computer e il telefono cellulare?Vito Gamberale - Il fotovoltaico come il computer e il telefono cellulare?
Vito Gamberale - Il fotovoltaico come il computer e il telefono cellulare?
 
Irrigación de las porciones distales de los miembros
Irrigación de las porciones distales de los miembrosIrrigación de las porciones distales de los miembros
Irrigación de las porciones distales de los miembros
 
Dinámicas de relajación
Dinámicas de relajaciónDinámicas de relajación
Dinámicas de relajación
 

Ähnlich wie SEO-Campixx HTML5

PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021SEARCH ONE
 
HTML/CSS-Validierung in Zeiten von HTML5
HTML/CSS-Validierung in Zeiten von HTML5HTML/CSS-Validierung in Zeiten von HTML5
HTML/CSS-Validierung in Zeiten von HTML5Torsten Landsiedel
 
Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone
Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhoneWebapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone
Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhonedie.agilen GmbH
 
HTTPs Migration How To - SMX München 2017
HTTPs Migration How To - SMX München 2017HTTPs Migration How To - SMX München 2017
HTTPs Migration How To - SMX München 2017Bastian Grimm
 
Offline Strategien für HTML5 Web Applikationen - dwx13
Offline Strategien für HTML5 Web Applikationen - dwx13 Offline Strategien für HTML5 Web Applikationen - dwx13
Offline Strategien für HTML5 Web Applikationen - dwx13 Stephan Hochdörfer
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009Felix Sasaki
 
Offline-Strategien für HTML5 Web Applikationen - bedcon13
Offline-Strategien für HTML5 Web Applikationen - bedcon13Offline-Strategien für HTML5 Web Applikationen - bedcon13
Offline-Strategien für HTML5 Web Applikationen - bedcon13Stephan Hochdörfer
 
campixx 2018 - Tipps und Tools für KMU
campixx 2018 - Tipps und Tools für KMUcampixx 2018 - Tipps und Tools für KMU
campixx 2018 - Tipps und Tools für KMUHeiko Hoehn
 
SeoCampixx 2019 - Content Veredelung Nils Römeling
SeoCampixx 2019 - Content Veredelung Nils RömelingSeoCampixx 2019 - Content Veredelung Nils Römeling
SeoCampixx 2019 - Content Veredelung Nils RömelingGnomad Nils
 
Architecture challenges of search
Architecture challenges of searchArchitecture challenges of search
Architecture challenges of searchTorsten Köster
 
Meet Magento DE 2017 - E-Commerce mit Google – SEO für Onlineshops
Meet Magento DE 2017 - E-Commerce mit Google – SEO für OnlineshopsMeet Magento DE 2017 - E-Commerce mit Google – SEO für Onlineshops
Meet Magento DE 2017 - E-Commerce mit Google – SEO für OnlineshopsSEARCH ONE
 
Christian heilmann html 5 - das web und der browser als platform
Christian heilmann   html 5 - das web und der browser als platformChristian heilmann   html 5 - das web und der browser als platform
Christian heilmann html 5 - das web und der browser als platformChristian Heilmann
 
CAMPIXX 2016 Internationales SEO mit seinen Höhen und Tiefen
CAMPIXX 2016 Internationales SEO mit seinen Höhen und TiefenCAMPIXX 2016 Internationales SEO mit seinen Höhen und Tiefen
CAMPIXX 2016 Internationales SEO mit seinen Höhen und TiefenAlona Demchyk (Hakel)
 
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeNico Steiner
 
Smartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John Muñoz
Smartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John MuñozSmartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John Muñoz
Smartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John MuñozJohn Muñoz
 
Vortrag E-Commerce unterrichten
Vortrag E-Commerce unterrichtenVortrag E-Commerce unterrichten
Vortrag E-Commerce unterrichtenMartinKolb5
 
Campixx 2017 SEO für KMU
Campixx 2017 SEO für KMUCampixx 2017 SEO für KMU
Campixx 2017 SEO für KMUHeiko Hoehn
 
1&1 Frontend Workshop
1&1 Frontend Workshop1&1 Frontend Workshop
1&1 Frontend WorkshopNico Steiner
 
Technische SEO Probleme finden mit Tools
Technische SEO Probleme finden mit ToolsTechnische SEO Probleme finden mit Tools
Technische SEO Probleme finden mit ToolsTimon Hartung
 
SEO on TYPO3 homepage
SEO on TYPO3 homepageSEO on TYPO3 homepage
SEO on TYPO3 homepageAlex Kellner
 

Ähnlich wie SEO-Campixx HTML5 (20)

PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021
 
HTML/CSS-Validierung in Zeiten von HTML5
HTML/CSS-Validierung in Zeiten von HTML5HTML/CSS-Validierung in Zeiten von HTML5
HTML/CSS-Validierung in Zeiten von HTML5
 
Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone
Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhoneWebapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone
Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone
 
HTTPs Migration How To - SMX München 2017
HTTPs Migration How To - SMX München 2017HTTPs Migration How To - SMX München 2017
HTTPs Migration How To - SMX München 2017
 
Offline Strategien für HTML5 Web Applikationen - dwx13
Offline Strategien für HTML5 Web Applikationen - dwx13 Offline Strategien für HTML5 Web Applikationen - dwx13
Offline Strategien für HTML5 Web Applikationen - dwx13
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
 
Offline-Strategien für HTML5 Web Applikationen - bedcon13
Offline-Strategien für HTML5 Web Applikationen - bedcon13Offline-Strategien für HTML5 Web Applikationen - bedcon13
Offline-Strategien für HTML5 Web Applikationen - bedcon13
 
campixx 2018 - Tipps und Tools für KMU
campixx 2018 - Tipps und Tools für KMUcampixx 2018 - Tipps und Tools für KMU
campixx 2018 - Tipps und Tools für KMU
 
SeoCampixx 2019 - Content Veredelung Nils Römeling
SeoCampixx 2019 - Content Veredelung Nils RömelingSeoCampixx 2019 - Content Veredelung Nils Römeling
SeoCampixx 2019 - Content Veredelung Nils Römeling
 
Architecture challenges of search
Architecture challenges of searchArchitecture challenges of search
Architecture challenges of search
 
Meet Magento DE 2017 - E-Commerce mit Google – SEO für Onlineshops
Meet Magento DE 2017 - E-Commerce mit Google – SEO für OnlineshopsMeet Magento DE 2017 - E-Commerce mit Google – SEO für Onlineshops
Meet Magento DE 2017 - E-Commerce mit Google – SEO für Onlineshops
 
Christian heilmann html 5 - das web und der browser als platform
Christian heilmann   html 5 - das web und der browser als platformChristian heilmann   html 5 - das web und der browser als platform
Christian heilmann html 5 - das web und der browser als platform
 
CAMPIXX 2016 Internationales SEO mit seinen Höhen und Tiefen
CAMPIXX 2016 Internationales SEO mit seinen Höhen und TiefenCAMPIXX 2016 Internationales SEO mit seinen Höhen und Tiefen
CAMPIXX 2016 Internationales SEO mit seinen Höhen und Tiefen
 
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 Bestellsysteme
 
Smartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John Muñoz
Smartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John MuñozSmartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John Muñoz
Smartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John Muñoz
 
Vortrag E-Commerce unterrichten
Vortrag E-Commerce unterrichtenVortrag E-Commerce unterrichten
Vortrag E-Commerce unterrichten
 
Campixx 2017 SEO für KMU
Campixx 2017 SEO für KMUCampixx 2017 SEO für KMU
Campixx 2017 SEO für KMU
 
1&1 Frontend Workshop
1&1 Frontend Workshop1&1 Frontend Workshop
1&1 Frontend Workshop
 
Technische SEO Probleme finden mit Tools
Technische SEO Probleme finden mit ToolsTechnische SEO Probleme finden mit Tools
Technische SEO Probleme finden mit Tools
 
SEO on TYPO3 homepage
SEO on TYPO3 homepageSEO on TYPO3 homepage
SEO on TYPO3 homepage
 

SEO-Campixx HTML5

  • 1. 1 TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen DivingintotheSEO-Jungle
  • 2. A History-Lesson 2 TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen
  • 3. Im Kern: Kill Flash Aktualisierung der Tags Vereinheitlichung HTML, DOM, XML Accessibility Offline-Integration Mehr Semantik Erweitert: JS APIs CSS3 Was ist HTML5 TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 3
  • 4. Canvas Localstorage draggable="true“ Native Drag and Drop Shop-Sites, Downloads… Video & Audio-API Geolocation http://studio.html5rocks.com/ http://html5demos.com/contenteditable http://craftymind.com/factory/html5video/CanvasVideo.html Whooooa! TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 4
  • 5. Aber SEO? TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 5
  • 6. 6 TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen Seitenaufbau <body> <div> <div id=„navi“></div> <div id=„headline“><h1>Artikel</h1></div> <div><span id=„teaser“></span></div> <div><h2></h2></div> <div id=„Sidebar“></div> <div id=“…“></div> <div id=„Footer“></div> </div> </body> <body> <header>...</header> <nav>...</nav> <Section> <article> <h1>Artikel</h1> </article> <section> <h1>Kommentare</h1> <article> <h1>Kommentar 1</h1> </article> </section> </article> <aside>...</aside> <footer>...</footer> </body>
  • 7. Link Relations TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 7 Alternate Alternative Darstellung des gleichen Inhalts Archives  Links zu Archiven Author Link zum Autorenprofil Bookmark  External Linkziel auf anderer Domain First, Next, prev, Last  Link zum ersten/nächsten/vorherigen/letzten Artikel einer Serie Help  Link zu kontext-sensitiver Hilfe Index  Link zu einer Inhaltsübersicht License Link zur Spezifikation der Lizenz, unter der der Hauptinhalt der Seite steht Nofollow Google schwingt an der Liane nicht weiter Noreferrer Anweisung an den Browser keinen Referer mit zu senden Prefetch Seite schon mal vorladen Search  Link zur internen Suche Sidebar  Linkziel in iFrame darstellen Tag  Link zu Tag-Seiten Up Nächste übergeordnete Ebene
  • 8. Strukturierte Daten für Events Organisationen Personen Produkte Ratings Reviews Rezepte Diskussionen Breadcrumb Zeit Microdata / Itemproperties I TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 8
  • 9. Microdata / Itemproperties II TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 9
  • 10. Formulare | damals™ TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 10
  • 11. Stärkere Strukturierung von Formularen Automatische Browser-Validierung (trotzdem Serverseitig checken, wenn 100% Sicherheit notwendig) Überprüfung auf Reguläre Ausdrücke Prüfung valide Mail-Adresse Prüfung valide URL Prüfung Date-Range Prüfung Zahlenraum (nicht nur MAX und MIN, sondern auch Intervallschritte) Insbesonderespannendfür mobiles (Anpassung der Tastatur auf nurNummern…) Formulare TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 11
  • 12. <inputid="q" autofocus>  Autofocus bei Seitenaufruf <inputid="q" required>  Ausfüllpflicht <inputid="q" autocomplete>  autocomplete Anpassung der Eingabemethode auf mobilen Endgeräten, wenn Zahlen Oder Mailadressen gefordert sind Search-Boxen semantisch auszeichnen Input Type=color mit automatischer Farbauswahl RGB-Style Date-Picker mit automatisch eingeblendetem Kalenderauswahlfeld Formulare | Das alles, und noch viel mehr… TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 12
  • 13. type="date" type="month" type="week" type="time" type="datetime" type="datetime-local" Formulare | Datumsauswahl TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 13
  • 14. valid invalid required optional in-range out-of-range read-only read-write Formulare | CSS3-Pseudo-Klassen TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 14
  • 15. Neues Element <audio> Attribute zur Steuerung Unterstützung verschiedener Dateiformate Audio TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 15
  • 16. Neues Element <video> Attribute zur Steuerung Unterstützung verschiedener Dateiformate Video TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 16
  • 17. Canvas TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 17 <!DOCTYPE HTML> <html> <body> <canvasid="myCanvas">yourbrowserdoesnotsupportthecanvas tag </canvas> <scripttype="text/javascript"> varcanvas=document.getElementById('myCanvas'); var ctx=canvas.getContext('2d'); ctx.fillStyle='#FF0000'; ctx.fillRect(0,0,80,100); </script> </body> </html>
  • 18. Video + Canvas TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 18
  • 19. SVGs TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 19 <html> <svg> <circleid="myCircle" class="important" cx="50%" cy="50%" r="100" fill="url(#myGradient)" onmousedown="alert('hello');"/> </svg> </html>
  • 20. Pseudoklassen für Formulare und jede zweite Tabellenzeile Verneinungen :not(span) {Anweisung} Erste h2 anders h2:first-child { ... } WebFonts TollereTextumbrüche (Ellipsen…) div {text-overflow: ellipsis;} Flexible Spaltendesigns Mehr Transparenz + Sättigung + Farbverläufe + Schatten (Auto-Web2.0-Button) Runde Ecken Dynamisches und animiertes CSS (Warum denn JS?) CSS3 | Für einen bunteren Dschungel TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 20
  • 21. Aber Holla! Unbedingt ansehen http://html5boilerplate.com/ HTML/CSS/JS Template (inkl. ie6) http://initializr.com/ schneller Template-Generator Welcher Browser unterstützt was genau? http://www.findmebyip.com/litmus Safari und Chrome liegen vorn Mobile Browser sind nicht wirklich schlechter(http://rakaz.nl/2010/03/the-html5-test.html) Und meiner? http://html5test.com/ Nutzbar? TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 21
  • 22. Noch Fragen? Jemand Erfahrungen? Meinungen? Ausblick TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 22
  • 23. Die in dieser Präsentation dargestellten Daten und Grafiken sind geistiges Eigentumder TRG – The Reach Group GmbH. Die Vervielfältigung, Weitergabe und Veränderung – auch in Teilen –istohneVertragsgrundlagenichtgestattet. Impressum TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 23 TRG – The Reach Group GmbH Große Elbstraße 45, 4. OG 22767 Hamburg Telefon 030 . 920 383 3300Telefax 030 . 920 383 3001 E-Mail info@thereachgroup.de Web www.thereachgroup.de