Utgångspunkten är att jag idag ville dela en länk från InUseful på LinkedIn. Det var ett kort blogginlägg av Sara Lerén med en bild på hur fel det ibland kan bli när man skapar instruktioner för maskiner. Interaktion är ett viktigt och intressant ämne och det är roligt med exempel på när det blivit fel samtidigt som det väcker medvetenhet och intresse för ämnet användbarhet. Här är en skärmdump av blogginlägget:
Det gick inte så bra att dela länken på LinkedIn, så här blev det:
Länken visades bara med InUsefuls grunddomän utan något textutdrag eller bild. De som ser länken kommer inte att få någonting som ger en känsla för vad jag länkar till eller varför det skulle vara intressant att besöka länken. Jag kunde lika gärna posta en generell länk till inuseful.se.
Jag blev förvånad för jag trodde att LinkedIn utvecklats och förbättrat sin förmåga att fånga textutdrag och bilder från webbplatser. Så här ser det ut när jag postar från min egen byrås sajt (www.popolo.se).
Hur hamnar bilden och textutdraget där?
Vad som syns när man postar en länk beror på webbsidans kod. Det som händer när man klistrar in en länk är att LinkedIn skannar av källkoden och plockar automatiskt ut textutdraget och bilden. Ibland ges man möjlighet att välja bland flera bilder om sidan innehåller mer än en bild.Bästa praxis är att använda meta-taggar från OpenGraph-protokollet för att ge tjänster som LinkedIn och Facebook den information som behövs.
För webbutvecklare har LinkedIn alltid varit svårare att vara till lags än t ex Facebook och Google+. Länken från InUseful fungerar utmärkt på Facebook och Google+. Det beror på att programmerarna på Facebook och Google har gått längre i sina bemödanden om att hitta smarta sätt att fånga informationen även utan korrekta meta-taggar.
Det här är de taggar som behövs i sidans källa för att följa Open Graph-protokollet.
<meta property="og:locale" content="sv_SE" />
<meta property="og:type" content="article"/>
<meta property="og:title" content="Var försiktig med vad du ber om"/>
<meta property="og:description" content="Det här med felmeddelanden är ju klurigt. Vi människor tenderar att följa skrivna instruktioner så gott vi kan, så man ska vara försiktig med vad man ber"/>
<meta property="og:url" content="http://inuseful.se/var-forsiktig-med-vad-du-ber-om-2/"/>
<meta property="og:site_name" content="inUseful"/>
<meta property="og:image" content="http://inuseful.se/wp-content/uploads/2014/05/Please-try-again-580x398.jpg"/>
<meta property="og:image" content="http://inuseful.se/wp-content/themes/cleanr/images/inuseful_fb_logo-v2.png"/>
Jag hämtade källkoden och testade den på min egen server och jämförde den med min egen källkod. Det fanns inga skillnader i OG-taggar och både webbplatserna körs på samma CMS – WordPress. För att få ditt dessa taggar på din egen webbplats kan du använda någon av de många SEO-moduler som finns för WordPress. T ex Yoast SEO https://wordpress.org/plugins/wordpress-seo/
Men trots att våra sidor innehöll samma meta-data, så visades alltså en bild på "min" länk och ingen på länken från InUseful. LinkedIn är som sagt harigare än Facebook och Google+ när det gäller att plocka ut data från en sida. Om LinkedIns avläsning inte "gillar" sidans kod visar den ingenting. Koden måste alltså vara helt korrekt formaterad för att det ska fungera.
Det visar sig att källkoden på InUsefuls sida saknar en öppnande <HTML>-tag. Jag lade därför till den här taggen i källkoden:
<html lang="sv-SE" prefix="og: http://ogp.me/ns#">
och då fungerade det fint att dela länken. Så här ser det ut:
Källkod efter att den fixats:
<!DOCTYPE html>
<html lang="sv-SE" prefix="og: http://ogp.me/ns#">
<head>
<meta charset="UTF-8">
<meta property="og:locale" content="sv_SE" />
<meta property="og:type" content="article"/>
<meta property="og:title" content="Var försiktig med vad du ber om"/>
<meta property="og:description" content="Det här med felmeddelanden är ju klurigt. Vi människor tenderar att följa skrivna instruktioner så gott vi kan, så man ska vara försiktig med vad man ber"/>
<meta property="og:url" content="http://inuseful.se/var-forsiktig-med-vad-du-ber-om-2/"/>
<meta property="og:site_name" content="inUseful"/>
<meta property="og:image" content="http://inuseful.se/wp-content/uploads/2014/05/Please-try-again-580x398.jpg"/>
<meta property="og:image" content="http://inuseful.se/wp-content/themes/cleanr/images/inuseful_fb_logo-v2.png"/>
Ursprunglig källkod:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta property="og:locale" content="sv_SE" />
<meta property="og:type" content="article"/>
<meta property="og:title" content="Var försiktig med vad du ber om"/>
<meta property="og:description" content="Det här med felmeddelanden är ju klurigt. Vi människor tenderar att följa skrivna instruktioner så gott vi kan, så man ska vara försiktig med vad man ber"/>
<meta property="og:url" content="http://inuseful.se/var-forsiktig-med-vad-du-ber-om-2/"/>
<meta property="og:site_name" content="inUseful"/>
<meta property="og:image" content="http://inuseful.se/wp-content/uploads/2014/05/Please-try-again-580x398.jpg"/>
<meta property="og:image" content="http://inuseful.se/wp-content/themes/cleanr/images/inuseful_fb_logo-v2.png"/>
Inga kommentarer:
Skicka en kommentar