Fügen Sie Ihrer Website soziale Meta-Tags ohne Plug-Ins hinzu

Wenn Sie einen fantastischen neuen Blog-Beitrag verfassen, denken Sie zuerst daran, ein breiteres Publikum zu erreichen, indem Sie ihn in sozialen Medien teilen. Offensichtlich gibt es keine bessere Plattform als soziale Medien, um Ihre Inhalte zu teilen, Ihre lokalen Kunden anzusprechen und massiven Traffic auf Ihre Website zu lenken. Wissen Sie jedoch, wie Sie Ihre Webinhalte für das Teilen in sozialen Netzwerken optimieren können?

Normalerweise sind Social-Networking-Sites sehr klug darin, die richtigen Inhalte für die Veröffentlichung zu finden. Manchmal tritt das Problem jedoch auf, wenn der von Ihren Bewunderern freigegebene Inhalt nicht ordnungsgemäß auf den Seiten ihrer sozialen Konten angezeigt wird. Glücklicherweise gibt es eine Möglichkeit, genau zu definieren, wie Titel, Bilder, Beschreibungen und mehr in sozialen Streams unserer Follower angezeigt werden sollen.

Stichworte

Fast jeder von uns kennt Titel- und Meta-Beschreibungs-Tags, aber viele von uns kennen nicht viele andere Meta-Tags, die auch von Social-Networking-Sites wie Facebook, Twitter, Google+ und Pinterest gelesen werden. Der Grund, warum diese Websites spezielle Metadaten verwenden, besteht darin, dem Publikum eine bessere Sichtbarkeit zu bieten, indem der Prozess der Inhaltsfreigabe fehlerfrei und einfacher gestaltet wird.



Da jede Social-Network-Site über ein eigenes Social-Media-Tag verfügt, erwies es sich als sehr verwirrend, genau zu wissen, welches Tag aufgenommen werden soll. Beispielsweise bevorzugen Google+ und Pinterest die Verwendung von Schema-Tags, erkennen diese jedoch auch Öffnen Sie das Graph-Protokoll Tags, die von Facebook und LinkedIn bevorzugt werden. Auf der anderen Seite hat Twitter eigene Tags definiert, die als Twitter-Karten bezeichnet werden.

Schauen wir uns an, wie Sie all diese sozialen Meta-Tags nutzen können.

Facebook Open Graph

Open Graph wurde 2010 von Facebook eingeführt, um die Integration zwischen Facebook und anderen Websites zu fördern. Es ermöglicht jeder Webseite, ein reichhaltiges 'Grafik' -Objekt zu werden, das die gleiche Funktionalität wie jedes andere Facebook-Objekt hat. Hier ist ein Beispiel:

Mit einfachen Worten, Open Graph ist eine Möglichkeit zu steuern, wie Informationen von einer Webseite zu Facebook übertragen werden. Um Open Graph-Tags nutzen zu können, müssen Sie sie zwischen den Abschnitten Ihrer Webseite platzieren.

Im Folgenden sind die am häufigsten verwendeten Open Graph-Tags aufgeführt:

og: Titel: Dies ist der Titel Ihres Inhalts, den Facebook im Snippet ausfüllt. Es ähnelt dem HTML-Titel-Tag, das Suchmaschinen verwenden. Facebook hat zwar keine Begrenzung für die Anzahl der Zeichen im Titel, aber es ist besser, die Anzahl der Zeichen zwischen 60 und 90 zu halten.

Beispiel:

og: Beschreibung: Hier beschreiben Sie, worum es in Ihren Inhalten geht. Halten Sie es bis zu 300 Zeichen.

Beispiel:

und: url: In diesem Tag wird die URL der freigegebenen Seite platziert. Dieses Tag ist äußerst nützlich, wenn Sie mehrere URLs für denselben Inhalt haben, da es sicherstellt, dass alle Ihre Freigaben auf Ihre definierte Seite gelangen.

Beispiel:

und: Site-Name: Dieser Tag teilt Facebook den Namen Ihrer Website mit. Es ist nicht erforderlich, dieses Tag einzuschließen. Sie können es jedoch verwenden, wenn das Objekt, das Sie freigeben, Teil einer größeren Website ist.

Beispiel:

og: Bild: Mit diesem Tag können Sie den absoluten Pfad des Bildes angeben, das Facebook im Rich Snippet anzeigt. Es hat einige optionale strukturierte Eigenschaften:

  • und: image: url : Wie und: Bild.
  • und: image: secure_url : Ermöglicht die Verwendung eines alternativen Pfads zum Bild, wenn für die Webseite HTTPS erforderlich ist.
  • und: Bild: Höhe : Höhe des Bildes.
  • und: Bild: Breite : Breite des Bildes.
  • und: Bild: Typ : Ein MIME-Typ für das Bild.

Beispiel:

und: Typ: Mit dieser Eigenschaft können Sie den Inhaltstyp angeben, den Sie freigeben. Ist es ein Blog-Beitrag, ein Bild, ein Video?

Beispiel:

Der endgültige Code für Facebook sieht folgendermaßen aus:

Wie bereits erwähnt, unterstützt LinkedIn auch Open Graph-Tags, um zu steuern, wie Ihre Webseite angezeigt werden soll, wenn sie freigegeben wird. Sobald Sie Open Graph-Tags auf Ihrer Website implementiert haben, funktioniert dies auch für LinkedIn.

Twitter-Karten

Ähnlich wie bei den Open Graph-Tags von Facebook können Sie mit Twitter Cards Medienerlebnisse an Tweets anhängen, die auf Ihre Inhalte verweisen. Derzeit bietet Twitter neun verschiedene Kartentypen an, die an Tweets angehängt werden können.

  • Übersichtskarte: Standardkarte mit Titel, Beschreibung, Miniaturansicht und Zuordnung des Twitter-Kontos.
  • Übersichtskarte mit großem Bild: Es ähnelt der Standard-Zusammenfassungskarte, ermöglicht es Ihnen jedoch, ein Bild mit zusätzlichen Details und Attributen zu versehen.
  • Galeriekarte: Eine Karte mit einem Album mit vier Fotos.
  • Fotokarte: Eine Karte mit Foto in Tweet-Größe.
  • Spielerkarte: Eine Karte zur Bereitstellung von Audio-, Video- oder anderen Medientypen.
  • App-Karte: Eine Karte mit einer mobilen App mit direkter Downloadfunktion.
  • Produktkarte: Eine Karte zum Vorführen des Produkts.
  • Lead-Generierungskarte: Eine Karte zum Führen von Leads für Ihr Produkt / Ihre Dienstleistung.
  • Website-Karte: Eine Karte mit Ihrer Website, um den Verkehr per Klick zu steigern.

Alle diese Karten können mit erweitert werden App-Installationen und Deep-Linking .

Hinweis: Sowohl die Lead-Generierung als auch die Website-Karte sind über die erhältlich Twitter Ads Dashboard .

Hier ist das Beispiel:

Wie Open Graph-Tags finden auch die Twitter-Karten-Tags im Abschnitt Ihres Website-Codes statt. Die am häufigsten verwendeten Twitter-Karten-Tags sind:

Twitter: Karte: Mit diesem Tag, das og: type sehr ähnlich ist, können Sie den Typ des Inhalts beschreiben, der freigegeben werden soll. Sie können aus den neun oben beschriebenen Kartentypen auswählen. Der Standardkartentyp ist 'Zusammenfassung' .

Beispiel:

twitter: site: Der Twitter-Benutzername der Website einschließlich des '@'.

Twitter: Schöpfer: Der Twitter-Benutzername des Inhaltserstellers mit '@'.

Beispiel:

Twitter: Titel: Dieses Tag macht dasselbe wie og: title. Sie müssen den Titel für Ihren Inhalt angeben, der auf der Karte angezeigt wird. Der Titel muss weniger als 70 Zeichen enthalten.

Beispiel:

Twitter: Beschreibung: Hier geht die Beschreibung Ihres Artikels. Es darf 200 Zeichen nicht überschreiten.

Beispiel:

twitter: image: src: Mit diesem Tag können Sie die URL des Bildes angeben, um Ihren Inhalt besser darzustellen. Das Bild darf nicht größer als 1 MB sein.

Beispiel:

Hier ist der endgültige Code für Twitter:

Soziale Meta-Tags Für Google+ und Pinterest

Sowohl Google+ als auch Pinterest bieten zwar Unterstützung für die Erkennung von Open Graph Protocol-Tags, bevorzugen jedoch die Verwendung Schema.org Mikrodaten-Markup Rich Snippets zu generieren. Die Verwendung von Mikrodaten-Markups hilft Suchmaschinen nicht nur dabei, Ihre Inhalte auf nützliche und relevante Weise zu präsentieren, sondern verbessert auch die SEO Ihrer Website.

Hier ist das Beispiel für Google+:

Um Mikrodaten mit einem Artikel zu verwenden, müssen Sie die unten angegebene Deklaration in Ihrem HTML-Tag verwenden.

Das andere Markup befindet sich im Hauptteil Ihrer Webseite. Falls Sie in Ihrem CMS nicht auf diesen Code zugreifen können, können Sie ihn zusammen mit anderen Meta-Tags hinzufügen.

Your Headline under 200 Characters

Description under 156 Characters

Sobald Sie eine Webseite mit Schema.org-Mikrodaten kommentiert haben, zeigt Google + / Pinterest die Eigenschaften an: Name, Bild und Beschreibung, die auf einer beliebigen Seite zu finden sind schema.org Typ in sozialen Schnipsel.

Soziale Meta-Tags in WordPress

In WordPress gibt es zwei Möglichkeiten, Ihrer Site Social Meta Tags hinzuzufügen. Eine davon ist die Verwendung eines Plug-Ins SEO von Yoast , SEO Ultimate , etc - und eine andere ist durch header.php.

Die meisten Leute verwenden Plug-Ins, um Social Meta Tags auf ihrer WordPress-Site zu implementieren, aber es gibt nur wenige, die wissen, wie man diese Tags über header.php verwendet. Hier zeige ich Ihnen, wie Sie Facebook Open Graph, Twitter Cards und Google+ Tag in Ihre header.php-Datei integrieren können.

Dazu müssen Sie Ihrer Datei header.php Code hinzufügen. Öffnen Sie Ihre Datei header.php und fügen Sie den folgenden Code ein Etikett.

Für Facebook Open Graph:

ID),'large'); $post_thumbnail_image=$post_thumbnail[0]; ?>

Hinweis: Wie oben bereits erwähnt, unterstützen Google+, Pinterest und LinkedIn auch Open Graph-Tags. Für sie ist kein weiterer Code erforderlich.

Für Twitter-Karten:

ID), full ); $twitter_thumb = $twitter_thumbs[0]; if(!$twitter_thumb) { $twitter_thumb = 'http://www.gravatar.com/avatar/8eb9ee80d39f13cbbad56da88ef3a6ee?rating=PG&size=75'; } $twitter_name = str_replace('@', '', get_the_author_meta('twitter')); ?>

Hinweis: Vergessen Sie nicht, den Wert von zu ersetzen Twitter: Website Tag mit Ihrem Twitter-Benutzernamen. Wenn Ihr Twitter-Benutzername beispielsweise Wordpress_INT lautet, dann Twitter: Website Das Tag sieht folgendermaßen aus:

Darüber hinaus können Sie den Kartentyp ändern, indem Sie den Wert von twitter: card durch Ihre Lieblingskarte ersetzen. Wenn Sie beispielsweise die Galeriekarte verwenden möchten, ersetzen Sie 'summary_large_image' durch 'gallery'.

Nur weil Sie Ihrer Website Twitter Card-Tags hinzugefügt haben, bedeutet dies nicht, dass die Twitter Card funktioniert. Um eine Twitter-Karte für Ihre Website zu aktivieren, müssen Sie sie mit validieren Twitter Card Validator und beantragen die Genehmigung. Sobald Ihre Karte genehmigt wurde, funktioniert sie.

beste Zeichnung der Welt von einem Kind

Tools debuggen und validieren

Alle wichtigen Websites für soziale Netzwerke verfügen über einen eigenen Validator oder Debugger, mit dem Sie testen können, wie Links angezeigt werden, wenn sie in sozialen Streams geteilt werden. Im Folgenden sind diese Tools aufgeführt:

  • Google Tool zum Testen strukturierter Daten :: Dieses Tool zeigt zwar nicht an, wie der freigegebene Beitrag auf Google+ angezeigt wird, zeigt jedoch das präsentierte Markup auf einer bestimmten Webseite.
  • Facebook Debug :: Sobald Sie Open Graph-Tags implementiert haben, können Sie mit diesem Tool Feedback zu Ihrem Seiten-Markup erhalten, indem Sie einfach die URL Ihrer Site eingeben.
  • Twitter Validation Tool : Wie ich oben erwähnt habe, ist dies ein Twitter-Tool, das Ihre Twitter-Karte validiert. Sie können dieses Tool auch verwenden, um eine Vorschau Ihrer Twitter-Karten anzuzeigen.
  • Pinterest Rich Pins Validator : Mit diesem Tool können Sie eine Vorschau Ihrer Rich Pins anzeigen und validieren, um sicherzustellen, dass sie perfekt sind.

Wörter: Ajeet yadav

Ajeet Yadav ist ein professioneller Webentwickler, der mit wordpressintegration.com , ein renommiertes Webentwicklungsunternehmen, das einen hochwertigen Konvertierungsservice für Photoshop-zu-WordPress-Themes / -Vorlagen anbietet. Folgen @Wordpress_INT auf Twitter.