Artikel

Suchmaschinen-Optimierung: die wichtigsten Metadaten die jede Webseite benutzen sollte

Eines sollte jedem Web-Designer und Web-Entwickler klar sein bei der Planung und Entwicklung von Webseiten: neben all den möglichen Nutzergruppen sollten Suchmaschinen als Nutzergruppe nie aus den Augen gelassen werden!

Grundsätzlich gibt es zwei Arten von Metadaten die für Webseiten relevant sind: Metadaten und Microdaten. Dieser Blog Artikel befasst sich mit ersteren, Metadaten im html Header.

Obwohl speziell Google im Trend des Semantic Web Microdaten bevorzugt - mit dem Verweis dass das in-Text markieren von Inhalten doch dem Schreiben von ellenlangen Metadaten zu bevorzugen sei - ist es für die meisten doch eine copy-paste Angelegenheit die ohne spezifische Fachkenntnisse und minimalen Zeitaufwand erledigt werden kann.

Hier also ein Überblick über die wichtigsten Metadaten:

 

Das absolute "Muss" für jede Webseite

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="canonical" href="Die URL der gegebenen Seite inkl. http:// oder https://">
<title>Der Titel Ihrer Seite</title>
<meta name="description" content="Beschreibung">

Ersteres macht die Webseite mobile-friendly - ein absolutes Muss in heutiger Zeit. Zweiteres ist ein eindeutiger Link zur gegebenen Seite um Duplikate und damit sinkendes Google Page Ranking zu verhindern. Der Title wird sowohl in den Browser Tabs als auch als Titel von Suchergebnissen angezeigt. Eine jede Seite sollte eine einzigartige Beschreibung haben. Generell wird empfohlen die Beschreibung zwischen 150 und 160 Zeichen Länge zu halten, Experimente von Kollengen (siehe hier) haben ergeben dass wesentlich längere Beschreibungen bis zu 265 Zeichen noch von Google indiziert werden.

 

Icons

Traditionell hieße die Antwort hier nur wie folgt:

<link rel="shortcut icon" href="Link zum Icon im .ico Format">

Die Anzahl an Geräten, Browservorschau (e.g. Firefox, Opera), mobile Browsers (Google Chrome, Opera Coast), App Icons und Windows Tiles verlängert die Liste signifikant. Am besten man benutzt einen Generator wie z.B. RealFaviconGenerator die sowohl die Bild Dateien in .ico, .png und .svg Format bereitstellen als auch den HTML Code.

 

Social Media Einbindung

Die optimale Darstellung Ihrer Webseite auf Facebook, Twitter und Google+ verlangt nach einigen relevanten Metadaten:

<link rel="publisher" href="Link zum Google+ Profil">
<link rel="image_src" href="Link zur Bilddatei die als Vorschau dieser Seite dient">

<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Der Titel Ihrer Seite">
<meta name="twitter:description" content="Beschreibung">
<meta name="twitter:site" content="@IhrTwitterUsername">
<meta name="twitter:site:id" content="Ihre Twitter Site ID (siehe hier)">
<meta name="twitter:image:src" content="Link zur Bilddatei die als Vorschau dieser Seite dient">
<meta name="twitter:image:width" content="1200">
<meta name="twitter:image:height" content="630">

<meta name="fb:app_id" content="Ihre Facebook App ID sofern Sie eine erstellt haben">
<meta name="og:site_name" content="Der Name Ihres Unternehmens/Projekts">
<meta name="og:title" content="Der Titel Ihrer Seite">
<meta name="og:type" content="website, article, book oder profile (alternativ music oder video, siehe hier)">
<meta name="og:url" content="Eindeutige URL zu dieser Seite">
<meta name="og:description" content="Beschreibung">
<meta name="og:image " content="Link zur Bilddatei die als Vorschau dieser Seite dient">
<meta name="og:image:type" content="image/png">
<meta name="og:image:width" content="1200">
<meta name="og:image:height" content="630">

Andere Metadaten Typen wie z.B. Dublin Core, Sailthrou, etc. sind kaum von nöten, da die meisten Services (auch Twitter) auf das zunehmend populäre OpenGraph Protokoll zurückgreifen. Die Bildgröße von 1200x630 Pixeln wird als Minimum von Facebook empfohlen (siehe hier).

 

Metadaten für Apps

<meta property="al:ios:app_store_id" content="Die ID Ihrer App">
<meta name="google-play-app" content="app-id=Die ID Ihrer App nach dem Format com.package.android">

Auf iOS wird damit ein sogenanntes Smart Banner angezeigt mit dem Hinweis zum Download der App. Android hat keinen nativen Support für diese Funktion, jedoch gibt es ein jQuery plugin dafür (siehe diesen Blog).

 

Metadaten für lokale Geschäfte/Unternehmen

<meta property="og:latitude" content="z.B. 46.755504">
<meta property="og:longitude" content="z.B. 11.68014">
<meta property="og:street_address" content="Straßenname & Nr.">
<meta property="og:locality" content="Stadt">
<meta property="og:region" content="Provinz">
<meta property="og:postal_code" content="PLZ">
<meta property="og:phone_number" content="Tel. Nummer inkl. +XXX">
<meta property="og:fax_number" content="Fax Nummer inkl. +XXX">

 

Metadaten für multilinguale Webseiten

<meta property="og:locale" content="de_DE">
<meta property="og:locale:alternate" content="it_IT">
<meta property="og:locale:alternate" content="en_GB">
<meta property="og:locale:alternate" content="fr_FR">
<meta property="og:locale:alternate" content="cz_CZ">

Die Liste an alternativen Sprachen in der die gegebene Seite existiert kann beliebig erweitert werden.

 

Metadaten werden auch in absehbarer Zukunft noch essentiell für Suchmaschinen-Optimierung und der korrekten Darstellung von Snippets Ihrer Webseite (z.B. auf Facebook) bleiben. Das Erstellen von Metadaten für Webseiten ist vielfach eine copy-paste Aufgabe, jedoch sollte deren Einfluss nicht unterschätzt werden! Letztendlich sind Suchmaschinen und Soziale Netzwerke eine Schlüssel-Zielgruppe einer fast jeden Webseite.

Natznerhof Website
"Was"

Unsere Produkte + Services

Webseiten

Icon Websites

Maßgeschneiderte Webseiten von A-Z fachmännisch und handwerklich gestaltet

Wir entdecken Menschen, Marken und Unternehmen durch eine immer größere Anzahl an Geräten und neuen Technologien. Unsere Expertise im Bereich der Webentwicklung beinhaltet Responsive Design, Lean Entwicklung, Textgestaltung und Übersetzung sowie Suchmaschinenoptimierung.

Mehr.

Online Marketing

Icon Online Marketing

Erhöhen Sie die Reichweite Ihrer Produkte, Services oder Ihrer Marke im World Wide Web. Unsere Expertise im Bereich Online Marketing beinhaltet Google AdWords, Facebook / Instagram Adverts und E-Mail Marketing.

Mehr.

Design + Branding

Icon Design Services

Von Print bis Digital - Design ist überall. Sein Zweck ist dabei nicht nur Ästhetik, indem es Ihr Produkt, Service oder Marke in eine Harmonie bringt. Design und Nutzerfreundlichkeit (UX) ist unser Hauptaugenmark, egal ob Print Design für Broschüren, Visitenkarten oder Flyer; Corporate Design für Logo, Slogan und Schriftbild oder UI/UX Design für Software und Web.

Mehr.

Technische Services

Icon Technical Services

Wir bieten Ihnen maßgeschneiderte Services im Bereich der Beratung, Planung und Durchführung digitaler Lösungen. Mit uns als verlässlichen Partner können Sie sich den Herrausforderungen der Digitalisierung stellen!

Mehr.

Apps und Innovative Produkte

Icon App Development

Der Trend zu Web und Mobilen Apps ist allgegenwärtig. Wir bieten Ihnen die Entwicklung von maßgeschneiderten Softwarelösungen für Desktop und Mobile Geräte. Web und Mobile Apps sind ein innovativer Ansatz in Ihren Kundenbeziehungen. Unsere Expertise liegt in der Planung, Entwicklung und Projektmanagement von iOS und Web Applikationen.

Mehr.