next seo
v6.6.0
Haben Sie den neuen Next.js-Newsletter gesehen?
Nützliche Tools
Next SEO ist ein Plugin, das die Verwaltung Ihrer SEO in Next.js-Projekten erleichtert.
Pull-Anfragen sind herzlich willkommen. Schauen Sie sich auch unbedingt die Probleme für Funktionsanfragen an, wenn Sie Inspiration für das Hinzufügen suchen.
Haben Sie Lust, dieses kostenlose Plugin zu unterstützen?
Die Pflege eines Open-Source-Projekts nimmt viel Zeit in Anspruch, daher ist jeder kleine Beitrag sehr willkommen.
Codierung der Kaffeebrennstoffe ☕️
next-seo.wallet (ERC20 & SOL)
Hinweis zum App-Verzeichnis
Dieser Hinweis ist nur relevant, wenn das app Verzeichnis verwendet wird.
Für Standard-Metadaten (z. B. <Titel>) wird dringend empfohlen, die integrierte Methode generateMetaData zu verwenden. Sie können die Dokumente hier einsehen
Für JSON-LD besteht die einzige erforderliche Änderung darin, useAppDir={true} zur verwendeten JSON-LD-Komponente hinzuzufügen. Sie sollten diese Komponente in Ihrer page.js und NICHT in Ihrer head.js hinzufügen.
<ArticleJsonLd
useAppDir={true}
url="https://example.com/article"
title="Article headline" <- required for app directory
/>
Wenn Sie pages verwenden, ist NextSeo genau das, was Sie für Ihre SEO-Anforderungen benötigen !
NextSeo funktioniert, indem es es auf Seiten einfügt, auf denen Sie SEO-Attribute hinzufügen möchten. Sobald es in die Seite eingebunden ist, übergeben Sie ihr ein Konfigurationsobjekt mit den SEO-Eigenschaften der Seite. Dies kann dynamisch auf Seitenebene generiert werden, oder in einigen Fällen gibt Ihre API möglicherweise ein SEO-Objekt zurück.
Installieren Sie es zunächst:
npm install next-seooder
yarn add next-seoVerwenden Sie das in Next.js 13 eingeführte Next.js-App-Verzeichnis?
Wenn Sie das Next.js-App-Verzeichnis verwenden, wird dringend empfohlen, die integrierte Methode generateMetaData zu verwenden. Sie können die Dokumente hier einsehen
Wenn Sie das pages verwenden, ist NextSeo genau das Richtige für Ihre SEO-Anforderungen!
Anschließend müssen Sie NextSeo importieren und die gewünschten Eigenschaften hinzufügen. Dadurch werden die Tags im <head> für SEO ausgegeben. Sie sollten mindestens einen Titel und eine Beschreibung hinzufügen.
Beispiel mit nur Titel und Beschreibung:
import { NextSeo } from 'next-seo' ;
const Page = ( ) => (
< >
< NextSeo
title = "Simple Usage Example"
description = "A short description goes here."
/ >
< p > Simple Usage < / p >
< / >
) ;
export default Page ; Aber NextSeo bietet Ihnen noch viele weitere Optionen, die Sie hinzufügen können. Unten finden Sie ein typisches Beispiel einer Seite.
Typisches Seitenbeispiel:
import { NextSeo } from 'next-seo' ;
const Page = ( ) => (
< >
< NextSeo
title = "Using More of Config"
description = "This example uses more of the available config options."
canonical = "https://www.canonical.ie/"
openGraph = { {
url : 'https://www.url.ie/a' ,
title : 'Open Graph Title' ,
description : 'Open Graph Description' ,
images : [
{
url : 'https://www.example.ie/og-image-01.jpg' ,
width : 800 ,
height : 600 ,
alt : 'Og Image Alt' ,
type : 'image/jpeg' ,
} ,
{
url : 'https://www.example.ie/og-image-02.jpg' ,
width : 900 ,
height : 800 ,
alt : 'Og Image Alt Second' ,
type : 'image/jpeg' ,
} ,
{ url : 'https://www.example.ie/og-image-03.jpg' } ,
{ url : 'https://www.example.ie/og-image-04.jpg' } ,
] ,
siteName : 'SiteName' ,
} }
twitter = { {
handle : '@handle' ,
site : '@site' ,
cardType : 'summary_large_image' ,
} }
/ >
< p > SEO Added to Page < / p >
< / >
) ;
export default Page ;Ein Hinweis zu Twitter-Tags
Die Requisiten cardType , site und handle entsprechen twitter:card , twitter:site , twitter:creator . Die Dokumentation finden Sie hier.
Twitter liest die Tags og:title , og:image und og:description für seine Karte. next-seo lässt twitter:title , twitter:image und twitter:description weg, um Duplikate zu vermeiden.
Einige Tools melden dies möglicherweise als Fehler. Siehe Ausgabe Nr. 14
NextSeo können Sie einige Standard-SEO-Eigenschaften festlegen, die auf allen Seiten angezeigt werden, ohne dass darauf etwas eingefügt werden muss. Sie können diese bei Bedarf auch Seite für Seite überschreiben.
Um dies zu erreichen, müssen Sie eine benutzerdefinierte <App> erstellen. Erstellen Sie in Ihrem Seitenverzeichnis eine neue Datei, _app.js . Weitere Informationen zu einer benutzerdefinierten <App> finden Sie in den Next.js-Dokumenten hier.
In dieser Datei müssen Sie DefaultSeo aus next-seo importieren und ihm props übergeben.
Hier ist ein typisches Beispiel:
import App , { Container } from 'next/app' ;
import { DefaultSeo } from 'next-seo' ;
// import your default seo configuration
import SEO from '../next-seo.config' ;
export default class MyApp extends App {
render ( ) {
const { Component , pageProps } = this . props ;
return (
< Container >
< DefaultSeo
openGraph = { {
type : 'website' ,
locale : 'en_IE' ,
url : 'https://www.url.ie/' ,
siteName : 'SiteName' ,
} }
twitter = { {
handle : '@handle' ,
site : '@site' ,
cardType : 'summary_large_image' ,
} }
/ >
< Component { ... pageProps } / >
< / Container >
) ;
}
} Um ordnungsgemäß zu funktionieren, sollte DefaultSeo aufgrund des Verhaltens der Next.js-Interna über (vor) Component platziert werden.
Alternativ können Sie auch eine Konfigurationsdatei erstellen, um Standardwerte wie next-seo.config.js zu speichern
export default {
openGraph : {
type : 'website' ,
locale : 'en_IE' ,
url : 'https://www.url.ie/' ,
siteName : 'SiteName' ,
} ,
twitter : {
handle : '@handle' ,
site : '@site' ,
cardType : 'summary_large_image' ,
} ,
} ; import { DefaultSeoProps } from 'next-seo' ;
const config : DefaultSeoProps = {
openGraph : {
type : 'website' ,
locale : 'en_IE' ,
url : 'https://www.url.ie/' ,
siteName : 'SiteName' ,
} ,
twitter : {
handle : '@handle' ,
site : '@site' ,
cardType : 'summary_large_image' ,
} ,
} ;
export default config ; import oben in _app.js
import SEO from '../next-seo.config' ; und die DefaultSeo -Komponente kann stattdessen so verwendet werden
< DefaultSeo { ... SEO } / >Von nun an werden auf alle Ihre Seiten die oben genannten Standardeinstellungen angewendet.
Beachten Sie, dass Container in Next.js v9.0.4 veraltet ist, daher sollten Sie diese Komponente hier in dieser Version und höher durch React.Fragment ersetzen – siehe hier
| Eigentum | Typ | Beschreibung |
|---|---|---|
titleTemplate | Zeichenfolge | Ermöglicht Ihnen, eine Standardtitelvorlage festzulegen, die Ihrem Titel hinzugefügt wird. Weitere Informationen |
title | Zeichenfolge | Legen Sie den Metatitel der Seite fest |
defaultTitle | Zeichenfolge | Wenn auf einer Seite kein Titel festgelegt ist, wird dieser String anstelle eines leeren titleTemplate More Info verwendet |
noindex | Boolescher Wert (Standard: falsch) | Legt fest, ob die Seite indiziert werden soll oder nicht. Weitere Informationen |
nofollow | Boolescher Wert (Standard: falsch) | Legt fest, ob der Seite gefolgt werden soll oder nicht. Weitere Informationen |
robotsProps | Objekt | Legen Sie die weiteren Metainformationen für den X-Robots-Tag More Info fest |
description | Zeichenfolge | Legen Sie die Meta-Beschreibung der Seite fest |
canonical | Zeichenfolge | Legen Sie die kanonische URL der Seite fest |
mobileAlternate.media | Zeichenfolge | Legen Sie fest, von welcher Bildschirmgröße aus die mobile Website bereitgestellt werden soll |
mobileAlternate.href | Zeichenfolge | Legen Sie die alternative URL der mobilen Seite fest |
languageAlternates | Array | Legen Sie die Sprache der alternativen URLs fest. Erwartet ein Array von Objekten mit der Form: { hrefLang: string, href: string } |
themeColor | Zeichenfolge | Gibt eine empfohlene Farbe an, die Benutzeragenten verwenden sollten, um die Anzeige der Seite oder der umgebenden Benutzeroberfläche anzupassen. Muss eine gültige CSS-Farbe enthalten |
additionalMetaTags | Array | Ermöglicht das Hinzufügen eines Meta-Tags, das hier nicht dokumentiert ist. Weitere Informationen |
additionalLinkTags | Array | Ermöglicht das Hinzufügen eines Link-Tags, das hier nicht dokumentiert ist. Weitere Informationen |
twitter.cardType | Zeichenfolge | Der Kartentyp, der entweder summary , summary_large_image , app oder player sein wird |
twitter.site | Zeichenfolge | @Benutzername für die im Kartenfuß verwendete Website |
twitter.handle | Zeichenfolge | @Benutzername für den Ersteller/Autor des Inhalts (Ausgaben als twitter:creator ) |
facebook.appId | Zeichenfolge | Für Facebook Insights müssen Sie Ihrer Seite eine Facebook-App-ID hinzufügen, um weitere Informationen zu erhalten |
openGraph.url | Zeichenfolge | Die kanonische URL Ihres Objekts, die als permanente ID im Diagramm verwendet wird |
openGraph.type | Zeichenfolge | Der Typ Ihres Objekts. Abhängig vom Typ, den Sie angeben, sind möglicherweise auch andere Eigenschaften erforderlich. Weitere Informationen |
openGraph.title | Zeichenfolge | Der Titel des offenen Diagramms. Dieser kann sich von Ihrem Metatitel unterscheiden. |
openGraph.description | Zeichenfolge | Die Beschreibung des offenen Diagramms. Diese kann sich von Ihrer Meta-Beschreibung unterscheiden. |
openGraph.images | Array | Eine Reihe von Bildern (Objekt), die von Social-Media-Plattformen, Slack usw. als Vorschau verwendet werden sollen. Wenn mehrere bereitgestellt werden, können Sie beim Teilen eines auswählen. Siehe Beispiele |
openGraph.videos | Array | Eine Reihe von Videos (Objekt) |
openGraph.locale | Zeichenfolge | Das Gebietsschema, in dem die geöffneten Graph-Tags markiert sind. Im Format language_TERRITORY. Der Standardwert ist en_US. |
openGraph.siteName | Zeichenfolge | Wenn Ihr Objekt Teil einer größeren Website ist, der Name, der für die gesamte Website angezeigt werden soll. |
openGraph.profile.firstName | Zeichenfolge | Vorname einer Person. |
openGraph.profile.lastName | Zeichenfolge | Nachname der Person. |
openGraph.profile.username | Zeichenfolge | Benutzername der Person. |
openGraph.profile.gender | Zeichenfolge | Geschlecht der Person. |
openGraph.book.authors | string[] | Autoren des Artikels. Siehe Beispiele |
openGraph.book.isbn | Zeichenfolge | Die ISBN |
openGraph.book.releaseDate | Datum/Uhrzeit | Das Datum, an dem das Buch veröffentlicht wurde. |
openGraph.book.tags | string[] | Markieren Sie Wörter, die mit diesem Buch in Zusammenhang stehen. |
openGraph.article.publishedTime | Datum/Uhrzeit | Als der Artikel zum ersten Mal veröffentlicht wurde. Siehe Beispiele |
openGraph.article.modifiedTime | Datum/Uhrzeit | Wann der Artikel zuletzt geändert wurde. |
openGraph.article.expirationTime | Datum/Uhrzeit | Wenn der Artikel danach veraltet ist. |
openGraph.article.authors | string[] | Autoren des Artikels. |
openGraph.article.section | Zeichenfolge | Ein Abschnittsname auf hoher Ebene. ZB Technologie |
openGraph.article.tags | string[] | Markieren Sie Wörter, die mit diesem Artikel verknüpft sind. |
Ersetzt %s durch Ihre Titelzeichenfolge
title = 'This is my title' ;
titleTemplate = 'Next SEO | %s' ;
// outputs: Next SEO | This is my title title = 'This is my title' ;
titleTemplate = '%s | Next SEO' ;
// outputs: This is my title | Next SEO title = undefined ;
titleTemplate = 'Next SEO | %s' ;
defaultTitle = 'Next SEO' ;
// outputs: Next SEO Wenn Sie dies auf true setzen, wird noindex,follow gesetzt (zum Festlegen von nofollow lesen Sie bitte nofollow ). Dies funktioniert Seite für Seite. Diese Eigenschaft arbeitet mit der nofollow Eigenschaft zusammen und zusammen füllen sie das robots Meta-Tag.
Hinweis: Die Eigenschaften noindex und „ nofollow unterscheiden sich ein wenig von allen anderen in dem Sinne, dass ihre Festlegung als Standard nicht wie erwartet funktioniert. Dies liegt daran, dass Next SEO bereits standardmäßig index,follow hat, da next-seo schließlich ein SEO-Plugin ist. Wenn Sie diese Eigenschaften also global verwenden möchten, sehen Sie sich bitte die Abschnitte „DangerouslySetAllPagesToNoIndex“ und „DangerouslySetAllPagesToNoFollow“ an.
Beispiel Kein Index auf einer einzelnen Seite:
Wenn Sie eine einzelne Seite haben, die nicht indiziert werden soll, können Sie dies folgendermaßen erreichen:
import { NextSeo } from 'next-seo' ;
const Page = ( ) => (
< >
< NextSeo noindex = { true } / >
< p > This page is no indexed < / p >
< / >
) ;
export default Page ;
/*
<meta name="robots" content="noindex,follow">
*/ Das Präfix ist dangerously , da alle Seiten noindex werden. Da es sich um ein SEO-Plugin handelt, ist das eine ziemlich gefährliche Aktion. Es ist nicht schlecht, dies zu nutzen. Bitte stellen Sie sicher, dass Sie JEDE Seite noindex möchten. Sie können dies immer noch auf Seitenebene überschreiben, wenn Sie einen Anwendungsfall für index einer Seite haben. Dies kann durch Setzen noindex: false erfolgen.
Die einzige Möglichkeit, dies zu deaktivieren, besteht darin, die Requisite aus DefaultSeo in Ihrer benutzerdefinierten <App> zu entfernen.
Wenn Sie dies auf true setzen, wird index,nofollow gesetzt (um noindex festzulegen, lesen Sie bitte noindex ). Dies funktioniert seitenweise. Diese Eigenschaft arbeitet mit der noindex -Eigenschaft zusammen und zusammen füllen sie das robots Meta-Tag.
Hinweis: Anders als bei den anderen Eigenschaften funktioniert die standardmäßige Einstellung noindex und nofollow nicht wie erwartet. Dies liegt daran, dass Next SEO standardmäßig index,follow hat, da next-seo schließlich ein SEO-Plugin ist. Wenn Sie diese Eigenschaften global zulassen möchten, finden Sie weitere Informationen unter „DangerouslySetAllPagesToNoIndex“ und „DangerouslySetAllPagesToNoFollow“.
Beispiel „No Follow“ auf einer einzelnen Seite:
Wenn Sie eine einzelne Seite haben, die nicht indiziert werden soll, können Sie dies folgendermaßen erreichen:
import { NextSeo } from 'next-seo' ;
const Page = ( ) => (
< >
< NextSeo nofollow = { true } / >
< p > This page is not followed < / p >
< / >
) ;
export default Page ;
/*
<meta name="robots" content="index,nofollow">
*/ Es hat das Präfix „ dangerously “, da es allen Seiten nofollow . Da es sich um ein SEO-Plugin handelt, ist das eine ziemlich gefährliche Aktion. Es ist nicht schlecht, dies zu nutzen. Stellen Sie bitte sicher, dass Sie JEDER Seite nofollow möchten. Sie können dies immer noch auf Seitenebene überschreiben, wenn Sie einen Anwendungsfall zum follow einer Seite haben. Dies kann durch Setzen von nofollow: false erfolgen.
Die einzige Möglichkeit, dies zu deaktivieren, besteht darin, die Requisite aus DefaultSeo in Ihrer benutzerdefinierten <App> zu entfernen.
noindex | nofollow | meta von robots |
|---|---|---|
| -- | -- | index,follow (Standard) |
| FALSCH | FALSCH | index,follow |
| WAHR | -- | noindex,follow |
| WAHR | FALSCH | noindex,follow |
| -- | WAHR | index,nofollow |
| FALSCH | WAHR | index,nofollow |
| WAHR | WAHR | noindex,nofollow |
Zusätzlich zum index, follow the robots Meta-Tag weitere Eigenschaften, um ein genaueres Crawling zu ermöglichen und bessere Snippets für SEO-Bots bereitzustellen, die Ihre Seite crawlen.
Beispiel:
import { NextSeo } from 'next-seo' ;
const Page = ( ) => (
< >
< NextSeo
robotsProps = { {
nosnippet : true ,
notranslate : true ,
noimageindex : true ,
noarchive : true ,
maxSnippet : - 1 ,
maxImagePreview : 'none' ,
maxVideoPreview : - 1 ,
} }
/ >
< p > Additional robots props in Next-SEO!! < / p >
< / >
) ;
export default Page ;
/*
<meta name="robots" content="index,follow,nosnippet,max-snippet:-1,max-image-preview:none,noarchive,noimageindex,max-video-preview:-1,notranslate">
*/Verfügbare Eigenschaften
| Eigentum | Typ | Beschreibung |
|---|---|---|
noarchive | Boolescher Wert | Einen zwischengespeicherten Link nicht in den Suchergebnissen anzeigen. |
nosnippet | Boolescher Wert | In den Suchergebnissen für diese Seite keinen Textausschnitt oder keine Videovorschau anzeigen. |
max-snippet | Nummer | Verwenden Sie maximal [Anzahl] Zeichen als Textausschnitt für dieses Suchergebnis. Mehr lesen |
max-image-preview | „keine“, „Standard“, „groß“ | Legen Sie die maximale Größe einer Bildvorschau für diese Seite in den Suchergebnissen fest. |
max-video-preview | Nummer | Verwenden Sie maximal [Anzahl] Sekunden als Video-Snippet für Videos auf dieser Seite in den Suchergebnissen. Mehr lesen |
notranslate | Boolescher Wert | Bieten Sie keine Übersetzung dieser Seite in den Suchergebnissen an. |
noimageindex | Boolescher Wert | Indexieren Sie keine Bilder auf dieser Seite. |
unavailable_after | Zeichenfolge | Diese Seite nach dem angegebenen Datum/der angegebenen Uhrzeit nicht mehr in den Suchergebnissen anzeigen. Datum/Uhrzeit müssen in einem weit verbreiteten Format angegeben werden, einschließlich, aber nicht beschränkt auf RFC 822, RFC 850 und ISO 8601. |
Weitere Informationen zum X-Robots-Tag finden Sie unter Google Search Central – Crawling und Indexierung steuern
Twitter liest die Tags og:title , og:image und og:description für seine Karte. Deshalb next-seo twitter:title , twitter:image und twitter:description weg, um sie nicht zu duplizieren.
Einige Tools melden dies möglicherweise als Fehler. Siehe Ausgabe Nr. 14
facebook = { {
appId : '1234567890' ,
} }Fügen Sie dies zu Ihrer SEO-Konfiguration hinzu, um das fb:app_id-Meta einzuschließen, wenn Sie Facebook-Insights für Ihre Website aktivieren müssen. Informationen hierzu finden Sie in der Dokumentation von Facebook
Fügen Sie dies Seite für Seite hinzu, wenn Sie doppelte URLs konsolidieren möchten.
canonical = 'https://www.canonical.ie/' ; Diese Linkbeziehung wird verwendet, um Suchmaschinen eine Beziehung zwischen einem Desktop und einer mobilen Website anzuzeigen.
Beispiel:
mobileAlternate = { {
media : 'only screen and (max-width: 640px)' ,
href : 'https://m.canonical.ie' ,
} } languageAlternates = { [ {
hrefLang : 'de-AT' ,
href : 'https://www.canonical.ie/de' ,
} ] } Auf diese Weise können Sie alle anderen Meta-Tags hinzufügen, die nicht in der config abgedeckt sind und anstelle children Requisiten verwendet werden sollten.
content sind erforderlich. Dann entweder name , property oder httpEquiv . (Nur einer auf jedem)
Beispiel:
additionalMetaTags = { [ {
property : 'dc:creator' ,
content : 'Jane Doe'
} , {
name : 'application-name' ,
content : 'NextSeo'
} , {
httpEquiv : 'x-ua-compatible' ,
content : 'IE=edge; chrome=1'
} ] }Ungültige Beispiele:
Diese sind ungültig, da sie mehrere name , property und httpEquiv im selben Eintrag enthalten.
additionalMetaTags = { [ {
property : 'dc:creator' ,
name : 'dc:creator' ,
content : 'Jane Doe'
} , {
property : 'application-name' ,
httpEquiv : 'application-name' ,
content : 'NextSeo'
} ] } Dabei ist zu beachten, dass derzeit nur eindeutige Tags unterstützt werden, es sei denn, Sie verwenden die keyOverride Requisite, um jedem zusätzlichen Meta-Tag einen eindeutigen Schlüssel bereitzustellen.
Das Standardverhalten (ohne eine keyOverride Requisite) besteht darin, ein Tag pro eindeutigem name / property / httpEquiv zu rendern. Der zuletzt definierte wird gerendert.
Wenn Sie beispielsweise zwei Tags mit derselben property übergeben:
additionalMetaTags = { [ {
property : 'dc:creator' ,
content : 'Joe Bloggs'
} , {
property : 'dc:creator' ,
content : 'Jane Doe'
} ] }Dies führt dazu, dass Folgendes gerendert wird:
< meta property =" dc:creator " content =" Jane Doe " /> Bereitstellung einer zusätzlichen keyOverride Eigenschaft wie dieser:
additionalMetaTags = { [ {
property : 'dc:creator' ,
content : 'Joe Bloggs' ,
keyOverride : 'creator1' ,
} , {
property : 'dc:creator' ,
content : 'Jane Doe' ,
keyOverride : 'creator2' ,
} ] }führt dazu, dass der richtige HTML-Code gerendert wird:
< meta property =" dc:creator " content =" Joe Bloggs " />
< meta property =" dc:creator " content =" Jane Doe " /> Auf diese Weise können Sie alle anderen Link-Tags hinzufügen, die nicht in der config enthalten sind.
rel und href sind erforderlich.
Beispiel:
additionalLinkTags = { [
{
rel : 'icon' ,
href : 'https://www.test.ie/favicon.ico' ,
} ,
{
rel : 'apple-touch-icon' ,
href : 'https://www.test.ie/touch-icon-ipad.jpg' ,
sizes : '76x76'
} ,
{
rel : 'manifest' ,
href : '/manifest.json'
} ,
{
rel : 'preload' ,
href : 'https://www.test.ie/font/sample-font.woof2' ,
as : 'font' ,
type : 'font/woff2' ,
crossOrigin : 'anonymous'
}
] }Dies führt dazu, dass Folgendes gerendert wird:
< link rel =" icon " href =" https://www.test.ie/favicon.ico " />
< link
rel =" apple-touch-icon "
href =" https://www.test.ie/touch-icon-ipad.jpg "
sizes =" 76x76 "
/>
< link rel =" manifest " href =" /manifest.json " />
< link
rel =" preload "
href =" https://www.test.ie/font/sample-font.woof2 "
as =" font "
type =" font/woff2 "
crossorigin =" anonymous "
/>Die vollständige Spezifikation finden Sie unter http://ogp.me/.
Next SEO unterstützt derzeit:
import { NextSeo } from 'next-seo' ;
const Page = ( ) => (
< >
< NextSeo
openGraph = { {
type : 'website' ,
url : 'https://www.example.com/page' ,
title : 'Open Graph Title' ,
description : 'Open Graph Description' ,
images : [
{
url : 'https://www.example.ie/og-image.jpg' ,
width : 800 ,
height : 600 ,
alt : 'Og Image Alt' ,
} ,
{
url : 'https://www.example.ie/og-image-2.jpg' ,
width : 800 ,
height : 600 ,
alt : 'Og Image Alt 2' ,
} ,
] ,
} }
/ >
< p > Basic < / p >
