Jak korzystać z tagów Open Graph

Jak korzystać z tagów Open Graph

Czy używasz tagów title i meta description? Oczywiście, że tak, bo już wiesz, że meta tagi mogą pomóc zwiększyć swoje rankingi w wyszukiwarkach.

Ale czy wiesz, że meta tagi faktycznie wpływają na Twój ruch w mediach społecznościowych? Jasne, jest Google’s authorship tagów, ale co z Facebook i Twitter? W rzeczywistości, oba mają swoje własne meta tagi mediów społecznych, które mogą pomóc zwiększyć ilość ruchu społecznego jesteś getting.

Ever zobaczyć te posty w mediach społecznościowych, które mają fajne wyglądające zdjęcia i filmy? Możesz nie wiedzieć, że nie trzeba żadnego oprogramowania lub konta premium, aby zrobić to samo dla swoich postów społecznych.

Nazywają się one Facebook Open Graph i Twitter Cards. Oto jak można wykorzystać oba z nich:

Facebook Open Graph

Gdy udostępniasz obraz na Facebooku, jak to wygląda?

Cóż, nie zawsze tak to wygląda. Facebook próbuje odczytać kod na Twojej stronie, ale nie zawsze jest w stanie wyciągnąć Twoje obrazy. Jeśli nie używasz znaczników Open Graph, kiedy udostępniasz URL ze swojej strony na Facebooku, tak to może wyglądać:

Tak to wyglądało z Quick Sprout, zanim wdrożyłem znaczniki Open Graph na mojej stronie. Po wdrożeniu znaczników Open Graph, byłem w stanie zwiększyć ruch na Facebooku o 174%, po prostu dlatego, że teraz obok moich aktualizacji statusu Quick Sprout znajdował się obraz.

Teraz, gdy jesteś przekonany, że powinieneś używać Open Graph, oto jak go skonfigurować na swojej stronie.

og:title

Tutaj umieszczasz tytuł swojej treści. Pomyśl o tym, że jest to podobne do normalnego znacznika tytułu html, którego używałaby wyszukiwarka. Kiedy tworzysz swój og:title, utrzymuj liczbę znaków mniejszą niż 95 znaków.

Przykład: <meta property=”og:title” content=”11 Creative Ways to Build Links”/>

og:type

To tutaj opisujesz, jakiego typu treścią się dzielisz. Czy jest to wideo, zdjęcie, wpis na blogu, itp. Oto pełna lista, z której możesz wybrać podczas definiowania typu zawartości:

Aktualności

• aktywność
• sport

Biznesy

• bar

.

• firma
• kawiarnia
• hotel
• restauracja

Grupy

• przyczyna
• liga_sportowa
• drużyna_sportowa

Organizacje

• band
• rząd
• non_profit
• school
• university

People

• actor
• athlete
• author
• dyrektor
• muzyk
• polityk
• public_figure

Miejsca

• miasto
• kraj
• landmark
• state_province

Produkty i rozrywka

• album
• książka
• drink
• food
• gra
• produkt
• piosenka
• film
• tv_show

Websites

• blog
• website
• article

Przykład: <meta property=”og:type” content=”article”/>

og:description

To jest również podobne do twojego znacznika meta description html, ponieważ służy do opisania twojej treści. Nie powinieneś dbać o to, czy jest on bogaty w słowa kluczowe, ale zamiast tego powinieneś wymyślić przekonujący opis, który spowoduje więcej kliknięć. Masz do 297 znaków dla tego tagu.

Przykład: <meta property=”og:description” content=”Czy jesteś zmęczony budowaniem linków w stary, szkolny sposób? Wiesz, metody, które wymagają wysyłania maili do tysięcy webmasterów błagających o linki. ” />

og:image

Pamiętasz jak wspomniałem, że byłem w stanie zwiększyć mój ruch na Facebooku o 174%? To dlatego, że użyłem Open Graph, aby zapewnić, że Facebook pokazał obraz za każdym razem, gdy ktoś udostępnił adres URL z Quick Sprout.

Używając tagu og:image, zapewnisz, że obraz będzie obok treści, którą udostępniasz. W ten sposób wyróżnia się na tle wszystkich innych aktualizacji statusu opartych na tekście ludzie widzą w ich timelines.

Przed dostaniem się do tego, jak można korzystać z tego tagu, poprowadzę cię przez wymagania Facebooka. Obraz musi być co najmniej 50px na 50px, ale najlepiej większy niż 200px na 200px. Plus, obraz nie może być większy niż 5 MB w rozmiarze.

Przykład: <meta property=”og:image” content=”https://www.quicksprout.com/wp-content/uploads/2013/03/linkbuilding.jpg”/>

og:url

W tym znaczniku powinieneś umieścić adres URL strony, którą udostępniasz. Ten znacznik może wydawać się nieistotny, ale jest ważny, ponieważ czasami będziesz miał więcej niż jeden adres URL dla tej samej treści. Używając tego znacznika, upewnisz się, że wszystkie akcje trafiają na jeden adres URL, a nie na wiele adresów, co powinno pomóc Twojemu Facebook Edgerank.

Przykład: <meta property=”og:url” content=”https://www.quicksprout.com/2013/03/21/11-creative-ways-to-build-links/”/>

og:site_name

Ten tag mówi Facebookowi nazwę twojej strony internetowej. Tak naprawdę nie potrzebujesz tego tagu, ale nie ma nic złego w jego włączeniu.

Przykład: <meta property=”og:site_name” content=”Quick Sprout”/>

fb:admins

Jeśli masz fan page na Facebooku i chcesz uzyskać więcej danych w Facebook Insights, to musisz użyć tego tagu. Mówi on Facebookowi, że jesteś właścicielem strony, i łączy Twoją stronę na Facebooku z Twoją stroną.

Przykład: <meta property=”fb:admins” content=”500013011″/>

Teraz, gdy masz już swoje znaczniki meta Facebook Open Graph na miejscu, przejdźmy do Twitter Cards.

Twitter Cards

Czy kiedykolwiek widziałeś tweeta takiego jak ten?

Cóż, te szczegółowe tweety pokazują się tylko wtedy, gdy używasz Twitter Cards. Czy nie chciałbyś mieć, że dla Twojej witryny? To pomoże to wyróżniać się z tłumu.

Tutaj, jak można wykorzystać Twitter Cards:

Jeśli używasz SEO dla wtyczki WordPress przez Yoast, wystarczy wykonać te kroki. Dla wszystkich innych, wykonaj poniższe kroki.

twitter:card

Ten meta tag opisuje rodzaj treści, które udostępniasz. Masz trzy opcje z Twitter: zdjęcie (dla obrazów), odtwarzacz (dla filmów) i podsumowanie (dla wszystkiego innego). Jeśli nie określisz swoją kartę, Twitter będzie domyślnie do summary.

Przykład: <meta name=”twitter:card” content=”summary”>

twitter:url

To jest strona, którą udostępniasz na Twitterze. Podobnie jak Facebook prosi o adres URL, Twitter robi to również dlatego, że możesz mieć ten sam kawałek treści na swojej stronie wiele razy. To zapewni jeden adres URL dostaje wszystkie tweety. W przeciwnym razie, tweety będą podzielone na wiele urls.

Przykład: <meta name=”twitter:url” content=”https://www.quicksprout.com/2013/03/21/11-creative-ways-to-build-links/”>

twitter:title

Podobnie do Twojego tytułu Facebook Open Graph, ten nie powinien być wypchany słowami kluczowymi. Spraw, aby był przekonywujący, aby ludzie chcieli na niego kliknąć. Ponownie, jak w przypadku Facebooka, będziesz chciał ograniczyć liczbę znaków do 70.

Przykład: <meta name=”twitter:title” content=”11 Creative Ways to Build Links”>

twitter:description

To jest podobne do tagu meta description, którego używałbyś dla Google. Ale nie wypychaj go słowami kluczowymi. Twoim celem powinno być stworzenie przekonywującego zdania, które skłoni ludzi do kliknięcia na Twoją stronę. Twój opis jest ograniczony do 200 znaków.

Przykład: <meta name=”twitter:description” content=” Czy jesteś zmęczony budowaniem linków w stary, szkolny sposób? Wiesz, metody, które wymagają od Ciebie wysyłania maili do tysięcy webmasterów błagających o linki. „>

twitter:image

Aby Twój tweet się wyróżniał, potrzebujesz obrazu. Twoje obrazy muszą mieć rozmiar pliku mniejszy niż 1 MB i nie mogą być mniejsze niż 60px na 60px. Obrazy większe niż 120px na 120px będą zmniejszone.

Przykład: <meta name=”twitter:image” content=” https://www.quicksprout.com/wp-content/uploads/2013/03/linkbuilding.jpg”>

Po zastosowaniu meta tagów Twitter Card do swojej witryny, musisz złożyć wniosek do programu Twitter’s Card. Po uzyskaniu akceptacji, adresy URL z witryny będą wyświetlane w formacie karty.

Koniec

Meta tagi nie są tylko dla wyszukiwarek. Strony mediów społecznościowych również je wykorzystują. Podobnie jak w przypadku optymalizacji meta tagów dla rankingów Google i współczynników klikalności, musisz zrobić to samo dla Facebooka i Twitter.

.