Open Graph Meta Tag lisääminen Blogger julkaisujärjestelmään

5.1.23
Miltä blogisi, verkkokauppasi tai nettisivusi näyttää jaettuna eri somekanavissa?

Oletko törmännyt Google Blogger -blogialustan käytössä ongelmaan, jossa blogin pääsivua jakaessasi saat somessa jakokuvauksi uusimman postauksesi kuvan?

Uusin kesällä blogini ulkoasun ilmaisella custom-templatella nimelta Kate, lataa ulkoasu tästä. Kate templaten ehdoton vahvuus on erillinen monitasoisen navigaation teko. Itse totesin tämän tarpeelliseksi sivuston käytettävyyden parantamiseksi ja mm. kalastusvinkkien helpommin löytymiseksi. 

Olen pitkään yrittänyt kiertää tätä oletusasetusta ja etsinyt ratkaisua, jolla saisin bloginosoitetta jakaessani itse määrittämän kuvan ja nyt vihdoin onnistuin yhdistelemällä muutaman ulkomaalaisen apusivuston ohjeita.

Lue tästä ohjeet, kuinka sinäkin saat tehtyä blogisi pääosoitteelle itse määritetyn some-jakokuvan.

MUISTA OTTAA VARMUUSKOPIO ENNEN HTML-KOODIN MUOKKAAMISTA!


Näin lisää Bloggeriin OpenGraft tagit

  1.  Kirjaudu bloggeriin ja mene kohtaan TEEMA
  2. Paina MUKAUTA-napin vieressä olevaa alaspäin olevaa kolmiota
  3. LATAA BLOGISI ULKOASUSTA VARMUUSKOPIO, tämä kannattaa tehdä muutenkin säännöllisesti blogia muokatessa
  4. Lisää tämä koodi <head> ja </head> koodien väliin, kohdalla ei ole väliä. Oranssilla on haluamasi esimääritetyn jakokuvan url-osoite. Minulla on käytössä etusivulla oleva otsikkokuva, ja osoitteen siihen olen kaivanut lähdekoodista.

<!-- Open Graph Meta Tags BEGIN -->
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/a/AVvXsEjSSnjp2ES3-RrhIzNkSrGOfGDR9pLjFgrmymE0ZiZtbVNUTuhretJlWnafT0jKW-vbxVFBaHNFoJGJFmhdXkbgc4lKt-U1CvhuPFgB-r55WzEasPMpr4ip59HJJ1XfYMTRvBWHRV1rxvqbx_qv7_A2cQvj6bKxhrcBHrAaT9z8N9X_sNErVEM=s1200' property='og:image'/>
</b:if>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<!-- Open Graph Meta Tags END -->


Miten tarkistan mitä Blogger somekanaviin jakaa?

Netistä löytyy muutama hyvä palvelu, jonka avulla näet helposti ja nopeasti mitä metatietoja esimerkiksi Facebook jakaa blogistasi. Tässä kaksi, joita itse käytän.

Facebook -välimuistin päivitystyökalu



Tällä Facebook -kehittäjät sivun työkalulla voi ”päivittää” tiedot, joita Facebook lukee blogista. Tämä on hyvä tietää, jos esimerkiksi blogitekstin kuvaa, otsikkoa tai kuvaustekstiä päivittää ja someen tulee edelleen vanha teksti.

https://developers.facebook.com/tools/debug/

"Voit käyttää Sharing Debuggeria nähdäksesi tiedot, joita käytetään, kun verkkosivustosi sisältöä jaetaan Facebookissa, Messengerissä ja muissa paikoissa. Eräinvalidaattorin avulla voit päivittää nämä tiedot useille URL-osoitteille samanaikaisesti. Open Graph -merkintöjen avulla voit hallita sitä, miten verkkosivustosi sisältö näkyy muille. Lisätietoja"


Squarespace's Preview and Generate Open Graph Meta Tags



Tämä palvelu näyttää mitä tietoja jaetaan mihinkin palveluun. Palveluiden listalta löytyy Facebook, Twitter, LinkedIn ja Discord.


Taimenmies

Lähettänyt Taimenmies

Lähetä kommentti

0 Kommentit

Lähetä kommentti