Sisältö
- Tunnisteet
- Facebookin avoin kaavio
- Twitter-kortit
- Sosiaaliset sisällönkuvauskentät Google+: lle ja Pinterestille
- Sosiaaliset sisällönkuvauskentät WordPressissä
- Työkalujen virheenkorjaus ja vahvistus
Kun keksit mahtavan uuden blogikirjoituksen, ensimmäinen, joka tulee mieleesi tavoittaa laajempi yleisö, on jakaminen sosiaalisessa mediassa. Ilmeisesti ei ole parempaa alustaa kuin sosiaalinen media jakamaan sisältöäsi, kohdistamaan paikalliset asiakkaasi ja ohjaamaan valtavaa liikennettä verkkosivustoosi, mutta tiedätkö, miten voit optimoida verkkosisältösi sosiaalista jakamista varten?
Yleensä sosiaalisen verkostoitumisen sivustot ovat todella älykkäitä hakemaan oikeaa sisältöä lähettämistä varten. Mutta joskus ongelma ilmenee, kun ihailijoiden jakama sisältö ei näy kunnolla heidän sosiaalisen tilinsivuillaan. Onneksi on olemassa tapa, jonka avulla voimme määritellä tarkalleen, kuinka otsikoiden, kuvien, kuvausten ja muiden pitäisi näkyä seuraajiemme sosiaalisissa virroissa.
Tunnisteet
Lähes jokainen meistä tietää otsikkotunnisteista ja sisällönkuvauskentistä, mutta monet meistä eivät tiedä monista muista sisällönkuvauskentistä, joita myös sosiaaliset verkostosivustot, kuten Facebook, Twitter, Google+ ja Pinterest lukevat. Syy miksi nämä sivustot ovat alkaneet käyttää erityisiä metatietoja, on antaa yleisölle parempi näkyvyys tekemällä sisällön jakamisprosessista virheetön ja helpompaa.
Koska jokaisella sosiaalisen verkoston sivustolla on oma sosiaalisen median tunnisteensa, tiedetään tarkalleen, mikä niistä sisällytetään, osoittautunut erittäin sekavaksi tehtäväksi. Esimerkiksi Google+ ja Pinterest käyttävät mieluummin Schema-tunnisteita, mutta tunnistavat myös Open Graph Protocol -tunnisteet, joita Facebook ja LinkedIn suosivat. Toisaalta Twitter on määritellyt omat tunnisteet, joita kutsutaan Twitter-korteiksi.
Katsotaanpa, miten voit hyödyntää kaikkia näitä sosiaalisia sisällönkuvauskenttiä.
Facebookin avoin kaavio
Facebook esitteli Open Graphin vuonna 2010 edistääkseen integraatiota Facebookin ja muiden verkkosivustojen välillä. Sen avulla mistä tahansa verkkosivusta voi tulla rikas kuvaajaobjekti, jolla on samat toiminnot kuin muillakin Facebook-objekteilla. Tässä on esimerkki:
Yksinkertaisesti sanottuna Open Graph on tapa hallita, miten tieto kulkee verkkosivulta Facebookiin. Avoimen kaavion tunnisteiden hyödyntämiseksi sinun on sijoitettava ne verkkosivusi head> / head> -osion väliin.
Alla ovat yleisimmin käytetyt Open Graph -tagit:
og: otsikko: Tämä on sisältösi otsikko, jonka Facebook täyttää katkelmassa. Se on samanlainen kuin html-otsikkotunniste, jota hakukoneet käyttävät. Vaikka Facebookissa ei ole rajoitusta merkkien määrään otsikossa, on parempi pitää merkkimäärä 60-90.
Esimerkki:
meta property = "og: title" content = "Sosiaaliset sisällönkuvauskentät" />
og: kuvaus: Tässä kuvailet sisältöäsi. Säilytä enintään 300 merkkiä.
Esimerkki:
meta property = "og: description" content = "Kuvaus tässä" />
og: url: Tähän tagiin sijoitetaan jaetun sivun URL-osoite. Tämä tagi on erittäin hyödyllinen, jos sinulla on useita URL-osoitteita samalle sisällölle, koska se varmistaa, että kaikki jakamasi tiedot menevät määritetylle sivullesi.
Esimerkki:
metaominaisuus = "og: url" content = "http://www.example.com" />
og:sivuston nimi: Tämä tagi kertoo Facebookille verkkosivustosi nimen. Tätä tunnistetta ei tarvitse sisällyttää, mutta voit käyttää sitä, jos jakamasi objekti on osa suurempaa verkkosivustoa.
Esimerkki:
meta property = "og: site_name" content = "Sivustosi nimi" />
og: kuva: Tämän tagin avulla voit määrittää kuvan absoluuttisen polun, jonka Facebook näyttää rich-koodinpätkässä. Sillä on joitain valinnaisia jäsenneltyjä ominaisuuksia:
- og: image: url: Sama kuin og: kuva.
- og: kuva: suojattu_url: Voit käyttää vaihtoehtoista polkua kuvaan, jos verkkosivusto vaatii HTTPS: n.
- og: kuva: korkeus: Kuvan korkeus.
- og: kuva: leveys: Kuvan leveys.
- og: image: tyyppi: Kuvan MIME-tyyppi.
Esimerkki:
metaominaisuus = "og: image" content = "http://example.com/ogp.webp" /> meta property = "og: image: secure_url" content = "https://secure.example.com/ogp. jpg "/> meta property =" og: image: type "content =" image / jpeg "/> meta property =" og: image: width "content =" 500 "/> meta property =" og: image: height " sisältö = "400" />
og: tyyppi: Tämän ominaisuuden avulla voit määrittää jakamasi sisällön tyypin. Onko se blogikirjoitus, kuva, video?
Esimerkki:
meta property = "og: type" content = "article" />
Facebookin lopullinen koodi näyttää tältä:
meta property = "og: title" content = "Sosiaaliset sisällönkuvauskentät" /> meta property = "og: description" content = "Description here" /> meta property = "og: url" content = "http: // www. esimerkki.com "/> meta property =" og: site_name "content =" Sivustosi nimi "/> meta property =" og: image "content =" http://example.com/ogp.webp "/> meta-ominaisuus = "og: image: secure_url" content = "https://secure.example.com/ogp.webp" /> meta property = "og: image: type" content = "image / jpeg" /> meta property = " og: image: width "content =" 500 "/> meta property =" og: image: height "content =" 400 "/> meta property =" og: type "content =" article "/>
Kuten aiemmin mainitsimme, LinkedIn tukee myös Open Graph -tunnisteita hallitsemaan, kuinka verkkosivusi tulisi näyttää, kun se jaetaan. Joten kun olet ottanut Open Graph -tagit käyttöön sivustollasi, se toimii myös LinkedInissä.
Twitter-kortit
Samoin kuin Facebookin Open Graph -tagit, Twitter-kortit antavat sinulle mahdollisuuden liittää mediakokemuksia twiitteihin, jotka linkittävät sisältösi. Tällä hetkellä Twitter tarjoaa yhdeksän erilaista korttityyppiä, jotka voidaan liittää twiitteihin.
- Yhteenvetokortti: Oletuskortti, joka sisältää otsikon, kuvauksen, pikkukuvan ja Twitter-tilin attribuution.
- Yhteenvetokortti suurella kuvalla: Se on samanlainen kuin oletusyhteenvetokortti, paitsi että sen avulla voit näyttää kuvan, jossa on lisätietoja ja attribuutiota.
- Galleriakortti: Kortti, jossa on neljä valokuvaa sisältävä albumi.
- Valokuvakortti: Kortti, jossa on Tweet-kokoinen kuva.
- Pelaajakortti: Kortti äänen, videon tai muun tyyppisen median tuottamiseen.
- Sovelluskortti: Kortti, joka sisältää mobiilisovelluksen ja suoran latausmahdollisuuden.
- Tuotekortti: Kortti tuotteen esittelemiseksi.
- Liidien luontikortti: Kortti tuotteesi / palvelusi johtojen ajamiseksi.
- Verkkosivustokortti: Kortti, joka sisältää verkkosivustosi liikenteen ohjaamiseksi napsautusten avulla.
Kaikkia näitä kortteja voidaan laajentaa sovelluksen asennuksilla ja syvälinkittämisellä.
merkintä: Sekä liidien luonti että verkkosivustokortti ovat saatavilla Twitter Ads Dashboardin kautta.
Tässä on esimerkki:
Kuten Open Graph -tagit, Twitter-korttitunnisteet tapahtuvat myös verkkosivustosi koodin head> / head> -osassa. Yleisimmin käytetyt Twitter-korttitagit ovat:
twitter: kortti: Tämän tagin, joka on hyvin samanlainen kuin og: type, avulla voit kuvata jaettavan sisällön tyyppiä. Voit valita yhdeksästä yllä kuvatusta korttityypistä, ja oletuskorttityyppi on "Yhteenveto".
Esimerkki:
meta name = "twitter: card" content = "Yhteenveto">
twitter: sivusto: Sivuston Twitter-käyttäjänimi, mukaan lukien ”@”.
meta name = "twitter: site" content = "@ SiteName">
twitter: luoja: Sisällöntuottajan Twitter-käyttäjänimi '@': lla.
Esimerkki:
meta name = "twitter: creator" content = "@ AuthorHandle">
twitter: otsikko: Tämä tagi tekee saman asian kuin og: title. Sinun on määritettävä kortillasi näytettävän sisällön otsikko. Otsikon on oltava alle 70 merkkiä pitkä.
Esimerkki:
meta name = "twitter: title" content = "Artikkelin otsikko">
twitter: kuvaus: Tässä artikkelisi kuvaus menee. Se saa olla enintään 200 merkkiä pitkä.
Esimerkki:
meta name = "twitter: description" content = "Sivun kuvaus">
twitter: kuva: src: Tämän tagin avulla voit määrittää kuvan URL-osoitteen edustamaan paremmin sisältöäsi. Kuvan koko ei saa olla suurempi kuin 1 Mt.
Esimerkki:
meta name = "twitter: image: src" content = "Kuvan URL">
Tässä on viimeinen Twitter-koodi:
meta name = "twitter: card" content = "Yhteenveto"> meta name = "twitter: site" content = "@ SiteName"> meta name = "twitter: creator" content = "@ AuthorHandle"> meta name = "twitter: title "content =" Article Title "> meta name =" twitter: description "content =" Page Description "> meta name =" twitter: image: src "content =" Image URL ">
Sosiaaliset sisällönkuvauskentät Google+: lle ja Pinterestille
Vaikka sekä Google+ että Pinterest tarjoavat tukea Open Graph Protocol -tunnisteiden tunnistamiseen, mutta ne haluavat mieluummin käyttää Schema.org-mikrotietomerkintää rikkaiden katkelmien luomiseen. Mikrotietomerkintöjen käyttäminen ei auta hakukoneita esittelemään sisältöäsi hyödyllisellä ja merkityksellisellä tavalla, vaan myös parantamaan sivustosi hakukoneoptimointia.
Tässä on esimerkki Google+ -palvelusta:
Jos haluat käyttää mikrotietoja artikkelin kanssa, sinun on käytettävä alla olevaa ilmoitusta HTML-tagissasi.
html itemscope itemtype = "http://schema.org/Article">
Toinen merkintä sijaitsee verkkosivusi runko-osassa. Jos et pääse kyseiseen koodiin CMS: ssäsi, voit lisätä sen yhdessä muiden sisällönkuvauskenttien kanssa.
h1 itemprop = "name"> Otsikkosi alle 200 merkkiä / h1> img itemprop = "image" src = "Featured image URL" /> p itemprop = "description"> Kuvaus alle 156 merkkiä / p>
Kun olet merkinnyt verkkosivun Schema.org-mikrotiedoilla, Google + / Pinterest näyttää ominaisuudet: nimi, kuva ja kuvaus, joka löytyy mistä tahansa schema.org-tyypistä sosiaalisista katkelmista.
Sosiaaliset sisällönkuvauskentät WordPressissä
WordPressissä on kaksi tapaa lisätä sosiaaliset sisällönkuvauskentät sivustoosi. Yksi on käyttämällä laajennusta - kuten Yoastin SEO, SEO Ultimate jne. - ja toinen on header.php: n kautta.
Suurin osa ihmisistä käyttää laajennuksia sosiaalisten sisällönkuvauskenttien toteuttamiseen WordPress-sivustollaan, mutta harvat osaavat käyttää näitä tunnisteita header.php: n kautta. Tässä näytän sinulle, kuinka voit integroida Facebook Open Graph-, Twitter-kortit ja Google+ -tunnisteen header.php-tiedostoon.
Tätä varten sinun on lisättävä koodi header.php-tiedostoon. Avaa header.php-tiedosto ja liitä seuraava koodi ennen / head> -tagia.
Facebook Open Graph:
metaominaisuus = "og: title" content = "? php the_title ();?>" /> meta property = "og: description" content = "? php the_excerpt ();?>" /> meta property = "og: url "content ="? php the_permalink ();?> "/> meta property =" og: site_name "content ="? php bloginfo ('name');?> "/>? php if (has_post_thumbnail ()) { $ post_thumbnail = wp_get_attachment_image_src (get_post_thumbnail_id ($ post-> ID), 'suuri'); $ post_thumbnail_image = $ post_thumbnail [0]; ?> var13 -> meta property = "og: image" content = "? php echo $ post_thumbnail_image;?> var13 ->" />? php}?> var13 ->
Huomaa: Kuten olen jo edellä maininnut, Google+, Pinterest ja LinkedIn tukevat myös Open Graph -tunnisteita, niille ei tarvita muuta koodia.
Twitter-kortit:
? php #twitter-kortit hakata, jos (is_single () || is_page ()) {$ twitter_url = get_permalink (); $ twitter_title = get_the_title (); $ twitter_desc = get_the_excerpt (); $ twitter_thumbs = wp_get_attachment_image_src (get_post_thumbnail_id ($ post-> ID), täysi); $ 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’)); ?> var13 -> meta name = "twitter: card" value = "summary_large_image" /> meta name = "twitter: url" value = "? php echo $ twitter_url;?> var13 ->" /> meta name = "twitter: title" value = "? php echo $ twitter_title;?> var13 ->" /> meta name = "twitter: description" value = "? php echo $ twitter_desc;?> var13 ->" /> meta name = "twitter: image" value = "? php echo $ twitter_thumb;?> var13 ->" /> meta name = "twitter: site" value = "@ Twitter-käyttäjätunnuksesi" />? if ($ twitter_name) {?> var13 -> meta name = "twitter: creator" value = "@? php echo $ twitter_name;?> var13 ->" />? }}?> var13 ->
merkintä: Älä unohda vaihtaa arvon twitter: sivusto merkitse Twitter-käyttäjänimellesi. Esimerkiksi, jos twitter-käyttäjänimesi on Wordpress_INT, niin twitter: sivusto tunniste näyttää tältä:
meta name = "twitter: site" value = "@ Wordpress_INT" />
Lisäksi voit muuttaa kortin tyyppiä korvaamalla twitter: card -arvo suosikkikortillesi. Jos esimerkiksi haluat käyttää Galleriakorttia, korvaa ”yhteenveto_suuri_kuva” sanalla ”galleria”.
meta name = "twitter: card" value = "gallery" />
Se, että olet lisännyt Twitter-korttitunnisteet sivustoosi, ei tarkoita, että Twitter-kortti toimii. Saadaksesi Twitter-kortin aktivoitua sivustollesi, sinun on vahvistettava se Twitter-kortin validatorilla ja haettava hyväksyntää. Kun korttisi on hyväksytty, se alkaa toimia.
Työkalujen virheenkorjaus ja vahvistus
Kaikilla tärkeimmillä sosiaalisen verkostoitumisen sivustoilla on oma Validator tai Debugger, jonka avulla voit testata, kuinka linkit näytetään, kun ne jaetaan sosiaalisessa mediassa. Seuraavat ovat nämä työkalut:
- Googlen jäsenneltyjen tietojen testaustyökalu: Vaikka tämä työkalu ei näytä, miten jaettu viesti näyttäisi Google+: ssa, mutta näyttää esitetyn merkinnän tietyllä verkkosivulla.
- Facebook-virheenkorjaus: Kun olet ottanut käyttöön Open Graph -tagit, voit käyttää tätä työkalua saadaksesi palautetta sivumerkinnöistä kirjoittamalla vain sivustosi URL-osoitteen.
- Twitter-vahvistustyökalu: Kuten edellä mainitsin, tämä on Twitter-työkalu, joka vahvistaa Twitter-korttisi. Voit käyttää tätä työkalua myös Twitter-korttien esikatseluun.
- Pinterest Rich Pins Validator: Tämän työkalun avulla voit esikatsella ja vahvistaa Rich Pins -tagisi varmistaaksesi, että ne ovat täydellisiä.
Sanat: Ajeet Yadav
Ajeet Yadav on ammattimainen web-kehittäjä, joka liittyy Wordpressintegration.com -yhtiöön, maineikkaaseen web-kehitysyritykseen, joka tarjoaa korkealaatuisen Photoshop-WordPress-teeman / mallin muuntopalvelun. Seuraa @Wordpress_INT Twitterissä.
