Webbläsaren som du använder stöds inte av denna webbplats. Alla versioner av Internet Explorer stöds inte längre, av oss eller Microsoft (läs mer här: * https://www.microsoft.com/en-us/microsoft-365/windows/end-of-ie-support).

Var god och använd en modern webbläsare för att ta del av denna webbplats, som t.ex. nyaste versioner av Edge, Chrome, Firefox eller Safari osv.

Dela ditt innehåll i sociala medier

Då du delar innehåll från Drupal i sociala medier så kan du göra vissa ändringar för att anpassa delningen efter dina önskemål.

Så får du rätt text då du delar

Den text som visas för en viss sida vid delning generellt i sociala medier eller i Googles sökresultat avgörs av vad som står i Open Graph-fältet “description”. Är du inte nöjd med det som Drupal lägger in där automatiskt, kan du ändra manuellt. För Twitter finns särskilda möjligheter att ändra i Twitter Cards-taggarna.

Gå in i Edit-läget på din sida. I högra menyn, gå till Meta tags > Open Graph. I fältet “Description” anger du den text du vill ska visas tillsammans med din sida i exempelvis sociala medier. Tryck på Save.

Förinställt är “Lunds universitet.” (detta finns med då vissa sidor kan sakna textinnehåll), som följs av det kryptiska “[node:summary]” som tar innehållet från den inledande brödtexten. Texterna kan tas bort om du vill använda en annan text.  

Så ändrar du bild

Logotypen för Lunds universitet visas som standard i delningen på sociala medier, men det är möjligt att ändra så att en annan bild hämtas in.

De flesta sociala medier använder sig av så kallade open graph-taggar för att avgöra hur de ska visa innehåll som delas på deras plattformar. För att det ska fungera behöver du gå igenom följande steg:

  1. Ladda upp den bild du vill använda i Drupal
  2. Ta reda på adressen till själva bilden (url:en)
  3. Lägg in denna url i open graph-taggen "Image URL" hörande till din artikel, undersida etcetera
  4. Försäkra dig om att ändringen slagit igenom med hjälp av tjänsten Open Graph
  5. Dela artikeln på valfria sociala medier – Nu ska bilden komma med
  6. Om du delat artikeln sedan tidigare och vill uppdatera bilden i delningen kan du använda exempelvis Facebook Sharing Debugger eller Twitter Card Vaildator

Ladda upp bilden till Drupal

Bilden måste först laddas upp i Drupal. Om du redan försökt att dela en färdig artikel eller bild och upptäckt att bara universitetets logotyp kommer med i delningen, så finns ju redan bilden på plats.

I annat fall går du till Content > Files and Media > Add files and media och klickar därefter på Image.

Följ därefter de vanliga stegen som du använder för att ladda upp bilder i Drupal.

Det här kan också vara ett alternativ om du har en särskild bild som du vill använda just för delningen i sociala medier, men som inte finns med i själva artikeln.

Tänk på att bilden måste vara i korrekt storlek för det sociala medium som du vill dela till. För Facebook gäller minst 1200x727 px.

Kolla bildens adress

Skärmklipp som visar hur användaren högerklickar på en bild och väljer Copy Image Location
Högerklicka på bilden och välj "Copy Image Location" (eller motsvarande).

Url:en till en enskild bild på din webbplats hittar du genom att högerklicka på bilden i din webbläsare och därefter välja "Copy Image Location" (eller motsvarande beroende på webbläsare).

Om bilden inte finns publicerad så hämtar du rätt url för bilden genom att gå till Content > Files and media > List all media. Klicka på filnamnet så att du får upp bilden. Därefter högerklickar du på bilden i din webbläsare och väljer "Copy Image Location" (eller motsvarande beroende på webbläsare).

Det ska bli en länk i stil med: https://www.lu.se/drimage/1920/0/24852/33597363-people-are-sick-ami-acu…

Testa gärna att ange bildens url i din webbläsare för att försäkra dig om att den verkligen leder till den bild du tänkt.

Uppdatera open graph-taggar

Inställningarna för open graph-taggarna hittar du i administrationsgränssnittet under fliken "Meta tags" i spalten till höger i redigeringsläget för exempelvis en artikel eller sida.

Skärmklipp som visar inställningarna för Open Graph-taggar
Inställningarna för Open Graph-taggarna hittar du i högerspalten i redigeringsläget.

 

Metataggarna är uppdelade i tre flikar: Basic tags, Advanced tags och Open graph. Öpnna Open graph.

Det är fältet benämnt "Image URL" som avgör vilka bilder som visas på plattformarna. Försäkra dig om att du verkligen är under Open graph.

Skärmklipp som visar fältet Image URL
Det är innehållet i fältet Image URL som avgörs vad som delas i sociala medier.

Då du skapar till exempel en ny sida eller artikel så läggs url:en http://www.lu.se/sites/www.lu.se/files/lu-logo-280x280px.png in där automatiskt. Du är fri att ändra denna.

Klistra in url:en som du kopierade i förra steget i fältet "Image URL". Spara.

Twitter och Twitter Cards

För att påverka hur Twitter ska visa upp ditt innehåll då du delar det där finns en rad inställningsmöjligheter med hjälp av så kallade Twitter Cards som är Twitters egen variant av Open Graph-taggar. De finns i en egen flik under Open Graph-taggarna i högerspalten.

Under Twitter Card-type kan du välja mellan ett antal olika mer övergripande inställningar för hur delningen ska visas i Twitter-flödet, varav de vanligaste torde vara de två översta i rullistan, Summary Card och Summary Card with large image. Längre ner under Twitter Cards fyllar du också i Image URL (se ovan) samt Image alternative text (av tillgänglighetsskäl).

Använd med fördel Twitter Card Validator för att kontrollera hur din tweet kommer att ta sig innan du lägger ut den skarpt.

Det finns också en mängd andra olika fält att fylla i och experimentera med.

Granska open graph-taggar

Efter att du sparat kan det som vanligt ta en stund innan ändringen slår igenom. Med hjälp av tjänsten Open Graph kan du skriva in url:en till webbsidan som du planerar att dela i sociala medier, och där se vilka open graph-taggar som är aktuella.

Använd den för att se att http://www.lu.se/sites/www.lu.se/files/lu-logo-280x280px.png bytts ut till bilden du angett.

Skärmklipp från opengraph.xyz som används för att kolla Open Graph-taggarna
Försäkra dig om att dina ändringar slagit igenom i Open Graph-taggarna.

Open Graph är ett smidigare alternativ till att manuellt gå in och granska sidans källkod. Du som är van vid detta förfaringssätt kan förstås göra det, men tänk på att det är hur koden ser ut för en extern besökare som avgör vad till exempel Facebook och Twitter "ser", så du måste vara utloggad ur Drupal (eller smidigare genom att öppna sidan/artikeln i ett privat webbläsarfönster).

Se vidare under Uppdatera delning om det dröjer oskäligt lång tid innan og:imageurl uppdateras.

Dela artikeln med bild

Dela artikeln på exempelvis Facebook eller Twitter på vanligt sätt.

Nu ska uppdateringarna från Open graph-taggarna hänga med enligt vad du kunde se i Open Graph Check.

Uppdatera delning

Facebook och Twitter har också egna verktyg där du kan kontrollera hur deras plattformar tolkar informationen som du har skrivit in:

Facebook Sharing Debugger

Twitter Card Validator

Du kan använda dessa för att se till att respektive tjänst läser om informationen från din artikel och tar med den nya bild-url:en som du angett i Open graph-taggarna.

 

Låt Facebook ta del av dina nya open graph-taggar genom att klicka på Scrape again i Facebook sharing debugger
Låt Facebook ta del av dina nya open graph-taggar genom att klicka på Scrape again i Facebook sharing debugger

I Facebook Sharing Debugger skriver du in adressen till artikeln du planerar att dela och klickar på Debug. Du kan därefter få Facebook att uppdatera delningen genom att klicka på Scrape again. Där visas också när den senaste uppdateringen gjordes.

 

Med Twitter Card Validator kan du se hur Twitter uppfattar dina open graph-taggar.
Med Twitter Card Validator kan du se hur Twitter uppfattar dina open graph-taggar.

I Twitter Card Validator skriver du in adressen till artikeln och klickar på Preview card för att se hur Twitter uppfattar din delning.

Vill du gå tillbaka till webbsidan och ändra igen i open graph-taggarna så kan det ta längre tid för cachen och ändringarna att slå igenom.

Support

Vid frågor vänligen kontakta Servicedesk.

E-post: servicedesk [at] lu [dot] se (servicedesk[at]lu[dot]se)

Ange alltid webbplatsens eller sidans URL för vilken ärendet gäller.