Wie aktualisieren von meta-tags in React.js?

Arbeitete ich auf einer single-page application in react.js, was ist also der beste Weg, um update-meta-tags auf Seite übergänge oder browser back/forward?

InformationsquelleAutor Harkirat Saluja | 2016-06-09
  1. 10

    Ich verwendet habe, reagieren-Dokument-meta in einem älteren Projekt.

    Einfach definieren Sie Ihre meta-Werte

    const meta = {
    title: 'Some Meta Title',
    description: 'I am a description, and I can create multiple tags',
    canonical: 'http://example.com/path/to/page',
    meta: {
        charset: 'utf-8',
        name: {
            keywords: 'react,meta,document,html,tags'
        }
    }

    Ort und eine

    <DocumentMeta {...meta} />

    in der Rückkehr

    • werden tags ändern mit der Seitenübergänge oder nur für die landing-page?
    • Wie ist die Anwendung aufgebaut? Sie haben mehrere Komponenten oder nur eine, die verändert wird, während Sie den übergang?
    • 2 Komponenten würde sich ändern, rest bleibt gleich.
    • Auch sehe ich dieses Modul nicht mehr aktiv ist github.com/skevy/react-document-meta . Ist das beschriebene im link und einen von dir erwähnten, das gleiche?
    • ich denke, dies kann verwendet werden github.com/nfl/react-helmet
    • ja, du hast Recht. hatte nicht gesehen, dass aber die reagieren-Helm sollte gut funktionieren. Sie würden festgelegt werden, die für alle Ihre übergänge und legen Sie die Attribute entsprechend vor dem Rendern
    • Wenn ich die Freigabe von Inhalten auf sozialen Medien, werden diese wie erwartet funktionieren, wie in Bezug auf die og-url, twitter url etc.. @KRONWALLED

    InformationsquelleAutor KRONWALLED
  2. 13

    Können Sie reagieren-meta-tags. Es ermöglicht Ihnen zu schreiben, Titel und andere meta-tags, die in einer deklarativen Art und Weise und in normalen jsx-format, die verschoben werden, um den Kopf (Check server-Nutzung auf den doc). 

    import React from 'react';
import MetaTags from 'react-meta-tags';

class Component1 extends React.Component {
  render() {
    return (
        <div class="wrapper">
          <MetaTags>
            <title>Page 1</title>
            <meta id="meta-description" name="description" content="Some description." />
            <meta id="og-title" property="og:title" content="MyApp" />
            <meta id="og-image" property="og:image" content="path/to/image.jpg" />
          </MetaTags>
          <div class="content"> Some Content </div>
        </div>
      )
  }
}

    Können Sie auch gerne überprüfen reagieren-Helm wenn Sie eine erweiterte use-case.

    • Ich hatte ein Problem mit doppelten metatags, während Sie versuchen, zu verwenden reagieren-meta-tags. reagieren-Helm konnte nicht doppelte tags auf der Strecke oder Zustand ändern.
    • Dies wurde jetzt behoben.
    • Noch nicht fixiert. Habe gerade versucht og:title und og:image
    • ich weiß eine lange Zeit gewesen, seit diesem post, aber ich bin mit diesem Problem, ich sehe, meta-tags, wenn ich element untersuchen, aber es nicht zeigen, auf der Seite Quelle. Gibt es eine Möglichkeit, Wir können die Generierung von dynamischen tags und zeigen Sie in der Seiten-Quelle.
    • Nicht klar, ob es unterstützt Dinge wie header-tags, das ist wichtig für SEO.
    InformationsquelleAutor Sudhanshu Yadav
  3. 8

    Ihnen cand geben auch den Titel der Seite und meta-tags Beschreibung in der folgenden Weise.

    Ort ein meta-tag der Beschreibung in Ihrem index.html Datei wie diese.

    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<title>Dynamic Page title here</title>

    in Ihr .js-Dateien oder .jsx-Dateien unterhalb der render () - Methode schreiben Sie den Titel der Seite und meta-description für die Seite wie diese .

    render()
{
document.title ="Welcome | here is your page title to display"; 
document.getElementsByTagName("META")[2].content="Your description about the page or site here to set dynamically";

return(
    <div>Page content</div>
);
}
    • Ich kann sehen, dass meine meta-tags aktualisiert, mit diesem Ansatz, aber wenn ich twitter card validator oder facebook teilen, debugger, ist es nicht finden mein meta/opengraph-tags 🙁 Hinweis : ich bin statische hosting
    • Oder Sie können einfach verwenden Sie getElementsByName um genauer zu sein, indem Sie auf, indem Sie den Namen des Elements
    InformationsquelleAutor Venkatesh Somu
  4. 0

    Laut der offiziellen Reagieren Doc - Titel und Meta-Tags, können Sie uns auch Reagieren Helm

    InformationsquelleAutor Laurent Khoudja
  5. 0

    Ist bereits in anderen Antworten und Kommentare, aber es verdient Hervorhebung - Sie fast jeden Fall verwenden wollen:

    Reagieren Helm

    Dies scheint die Lösung zu sein, dass die Gemeinde fast ausschließlich verwendet - die 600.000 wöchentliche downloads vs 6.000 gegeben, die in anderen Lösungen. "Helm nimmt plain-HTML-tags und-Ausgänge einfache HTML-tags. Es ist tot einfach, und Reagieren Anfänger freundlich." - und hat die Unterstützung für server-side-rendering.

    InformationsquelleAutor eedrah
Schreibe einen Kommentar