Aufbau einer React-Komponente
Meine Vorstellung davon, wie jede React-Komponente aussehen sollte
421
8 min.
Der SSM-Standard legt Anforderungen an die Semantik, die Barrierefreiheit und die Funktionslogik von Metadaten fest.
<title>. Er beschreibt den Hauptinhalt knapp und wird nicht durch den Website-Namen oder einen allgemeinen Vorlagentext ersetzt.<title> und Beschreibung gibt es keine allgemeingültige Zeichenbegrenzung. Eine Suchmaschine kann den Titel kürzen oder Titel und Snippet aus anderen Teilen der Seite erzeugen.rel="canonical" oder einem geeigneten Mechanismus in der HTTP-Antwort angegeben.hreflang verknüpft.robots.txt steuert den Zugriff kompatibler Crawler auf URLs und Ressourcen, ist aber allein kein zuverlässiges Mittel, eine URL aus den Suchergebnissen auszuschließen.noindex-Direktive in den Seitenmetadaten oder im HTTP-Header X-Robots-Tag verwendet. Der Crawler muss die Seite abrufen können, um die Direktive zu verarbeiten.robots.txt gesperrte URL kann einer Suchmaschine weiterhin durch externe Links bekannt sein, auch wenn der Crawler ihren Inhalt nicht abrufen kann. robots.txt ist daher kein Vertraulichkeitsschutz.index und follow sind üblicherweise das Standardverhalten und müssen nicht ohne konkreten Grund angegeben werden. Die Direktivenwerte und ihre Unterstützung sind für die jeweiligen Suchmaschinen zu prüfen.Beispiel einer Direktive zum Ausschluss einer Seite aus dem Index:
<meta name="robots" content="noindex">Der Crawler kann diese Direktive nur beim Abruf der Seite lesen. Wird die URL gleichzeitig in robots.txt gesperrt, erhält der Crawler die noindex-Direktive möglicherweise nicht.
rel="alternate" und gültigen hreflang-Werten verknüpft. Jede Version führt sich selbst und die übrigen verfügbaren Versionen auf; die Verweise müssen wechselseitig sein und die Zielseiten müssen crawlbar und indexierbar sein.hreflang werden gültige Sprachcodes und bei Bedarf Regionscodes verwendet. x-default kann für eine Standardseite eingesetzt werden, die für Nutzer ohne passende Sprachversion vorgesehen ist.lang angegeben. Es hilft assistiven Technologien und Benutzeragenten, die Inhaltssprache zu erkennen, ersetzt aber hreflang nicht.og:locale gibt die Open-Graph-Lokalisierung im Format Sprache_REGION an, zum Beispiel de_DE. Wiederholte og:locale:alternate-Eigenschaften listen weitere Sprachen auf, in denen die Seite verfügbar ist.og:locale:alternate verknüpft keine Übersetzungs-URLs und ersetzt hreflang nicht. Die Liste alternativer Lokalisierungen muss den tatsächlich verfügbaren Übersetzungen entsprechen.Beispiel für die Verknüpfung lokalisierter URLs:
<html lang="de">
<head>
<link rel="alternate" hreflang="ru" href="https://example.com/ru/article">
<link rel="alternate" hreflang="en" href="https://example.com/en/article">
<link rel="alternate" hreflang="de" href="https://example.com/de/article">
<link rel="alternate" hreflang="ja" href="https://example.com/ja/article">
<link rel="alternate" hreflang="x-default" href="https://example.com/article">
</head>
</html>Dieselbe vollständige Menge wechselseitiger Verweise wird auf jeder Sprachversion mit dem jeweils passenden lang-Wert verwendet.
og:title, og:type, og:image und og:url angegeben — die grundlegenden Eigenschaften des Protokolls.og:description beschreibt die konkrete Seite knapp. Für ein Bild wird og:image:alt empfohlen; der Wert beschreibt den Bildinhalt und ist keine Bildunterschrift für den Beitrag.og:url müssen absolute, öffentlich erreichbare Adressen sein. Für Bilder ist HTTPS vorzuziehen; die Ressource muss ohne Authentifizierung abrufbar sein und darf nicht für Plattform-Crawler gesperrt werden.og:url muss mit der bevorzugten dauerhaften Adresse der Seite übereinstimmen.og:locale und og:locale:alternate übermitteln Lokalisierungsinformationen zum Objekt, garantieren aber keine lokalisierte Vorschau auf einer sozialen Plattform.twitter:*-Eigenschaften gesetzt werden, darunter twitter:card="summary_large_image", sofern dieses Format für den jeweiligen Beitragstyp unterstützt wird.summary_large_image legt ein Kartenlayout mit großem Bild fest. Es garantiert weder maximale Reichweite oder CTR noch eine bevorzugte Platzierung im Feed.rel="icon" angegeben. Unterstützte Formate und Größen hängen vom Browser und vom jeweiligen Anzeigekontext ab.site.webmanifest wird eingebunden, wenn die Website eine Web-App-Konfiguration benötigt. Das Manifest kann Name, Start-URL, Anzeigemodus, Theme und Icon-Satz festlegen.192×192 und 512×512 wird häufig für die Kompatibilität mit bestimmten Installationsumgebungen verwendet, ist aber keine allgemeine Pflicht für jede Website oder jedes Gerät.theme_color im Manifest oder das entsprechende Metadaten-Element kann die Farben der Browser- oder App-Oberfläche beeinflussen. Unterstützung und visuelle Wirkung unterscheiden sich je nach Plattform.apple-touch-icon und apple-mobile-web-app-capable betreffen das Hinzufügen einer Website zum Home-Bildschirm und ihren Start in einem separaten Fenster auf Apple-Geräten. Diese plattformspezifischen Einstellungen werden nur verwendet, wenn dieses Szenario unterstützt werden soll; für eine gewöhnliche Website sind sie nicht erforderlich.Beispiel für JSON-LD zu Inhalten des Typs Article:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Artikeltitel",
"image": "https://example.com/de/images/article.webp",
"datePublished": "2026-09-26",
"dateModified": "2026-09-26"
}
</script>Die Beispielwerte werden durch die tatsächlichen Seitendaten ersetzt. Für andere Inhalte sind der passende Typ und die passenden Eigenschaften zu verwenden; optionale Felder dürfen nicht mit erfundenen Werten befüllt werden.
<title> und eine Beschreibung geprüft, die dem tatsächlichen Inhalt entsprechen.robots.txt, noindex, Weiterleitungen und Canonical-URLs.og:url übereinstimmt.lang, alle hreflang-Verweise, deren Gegenseitigkeit und die Erreichbarkeit jeder Version geprüft.Dieses Beispiel zeigt einen Ausschnitt des fertigen Dokuments. Metadaten können durch ein CMS, ein Template, serverseitiges Rendering, einen Generator für statische Websites oder ein anderes Werkzeug erzeugt werden. Die Anforderungen beziehen sich auf das resultierende Dokument und die Antwort, nicht auf eine plattformspezifische API.
<html lang="de">
<head>
<title>Seitentitel</title>
<meta name="description" content="Eine kurze Beschreibung des Seiteninhalts.">
<link rel="canonical" href="https://example.com/de/article">
<link rel="alternate" hreflang="ru" href="https://example.com/ru/article">
<link rel="alternate" hreflang="en" href="https://example.com/en/article">
<link rel="alternate" hreflang="de" href="https://example.com/de/article">
<link rel="alternate" hreflang="ja" href="https://example.com/ja/article">
<link rel="alternate" hreflang="x-default" href="https://example.com/article">
<meta property="og:title" content="Seitentitel">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/de/article">
<meta property="og:image" content="https://example.com/de/images/article-share.webp">
<meta property="og:image:alt" content="Illustration zum Artikel">
<meta property="og:locale" content="de_DE">
<meta property="og:locale:alternate" content="ru_RU">
<meta property="og:locale:alternate" content="en_US">
<meta property="og:locale:alternate" content="ja_JP">
<meta name="twitter:card" content="summary_large_image">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">
</head>
</html>Ähnliche Kategorien:
Meine Vorstellung davon, wie jede React-Komponente aussehen sollte
421
8 min.
Der SST-Standard legt Anforderungen an die Semantik, Barrierefreiheit und Funktionslogik von Registerkarten fest
62
6 min.
Der SSF-U-Standard legt Anforderungen an die Semantik, Barrierefreiheit und Funktionslogik von Vollbildmodus fest
248
2 min.
Der SSA-Standard legt Anforderungen an die Semantik, Barrierefreiheit und Funktionslogik von Akkordeons fest
258
2 min.
Analyse kritischer Fehler im Webdesign. Warum Slider, Autoplay und schwerfällige Seiten die Konversionsrate sowie die Platzierungen bei Google verschlechtern
232
2 min.
Der SSP-Standard legt Anforderungen an die Semantik, Barrierefreiheit und Funktionslogik von Paginierung fest
240
1 min.