Das Open Graph- Protokoll ist ein ursprünglich von Facebook entwickelter Webstandard, der jede Webseite in ein Grafikobjekt mit Titel, Beschreibung, Bild usw. verwandelt. Obwohl es keine direkte Korrelation zwischen OG-Meta-Tags und verbesserten SEO-Rankings gibt, wird dadurch mehr Verkehr auf Ihre Webseite geleitet, indem sie in sozialen Netzwerken (Facebook, Twitter, Linkedin usw.) „attraktiver“ wird.
Ein Beispiel für einen in Twitter freigegebenen Link mit "og: image" und "og: title".
Hinzufügen von OG (und nicht nur) Meta-Tags zu Ihrer React-App
Lassen Sie uns ohne weiteres in die neu erstellte React-App mit der
/public/index.html React
create-react-app und den OG-Meta-Tags zu
/public/index.html . Es sollte ungefähr so aussehen:
<!DOCTYPE html> <html> <head> <meta charSet="utf-8"/> <meta http-equiv="x-ua-compatible" content="ie=edge"/> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/> <link rel="alternate" type="application/rss+xml" href="/rss.xml"/> <title>Awesome App</title> <meta property="og:title" content="Awesome app - the best app ever" /> <meta property="og:type" content="website" /> <meta property="og:image" content="https://picsum.photos/id/52/1200/600" /> <meta property="og:description" content="Describe stuff here." /> <meta property="og:url" content="yourawesomeapp.com" /> </head> <body> <noscript>This app works best with JavaScript enabled.</noscript> <div id="root"></div> </body> </html>
Dynamische Tags
Was ist nun, wenn ich Tags für jede Seite dynamisch generieren muss? Das ist einfach!
Wir werden
React Helmet verwenden . Erstellen wir also eine separate Komponente für die Verwaltung des Dokumentenkopfs, in der Titel, Beschreibung und Bild für die Seite dynamisch festgelegt werden.
import React from 'react'; import Helmet from 'react-helmet'; function SEO({ pageProps }) { return ( <Helmet> <title>{pageProps.title}</title> <meta property="og:title" content={pageProps.title} /> <meta property="og:image" content={pageProps.thumbnail} /> <meta property="og:url" content={pageProps.url} /> </Helmet> ) } export default SEO;
Wo immer wir unsere Meta-Tags setzen möchten, werden wir die SEO-Komponente einfach an die erforderlichen Argumente anhängen, genau wie
<SEO pageProps={ title: "Yet another page", thumbnail="https://picsum.photos/id/52/1200/600", url="yetanotherawesomeapp.com" } />