Facebook på en mobiltelefon bredvid en bärbar dator

För många företag är Facebook det främsta verktyget för att komma i kontakt med sina kunder. För vissa är det det enda verktyget. Så det borde inte komma som någon överraskning att, utseendet på ditt företags Facebook-sida kan ha en stor inverkan på hur seriöst folk tar ditt företag på allvar. Lite ansträngning och omsorg i förväg kan betyda mycket pengar på sikt. I den här artikeln delar vi med oss av några av de knep vi använder för att skapa den perfekta Facebook-omslagsbilden varje gång.

För det första, när du skapar en Facebook-omslagsbild för en företagssida kanske du vill inkludera en logotyp, grafik eller ord för att kommunicera ett budskap. Du kan skapa en omslagsbild med hjälp av Facebooks iOS- eller Android-app, men det är lättare att använda din stationära dator eller bärbara dator.

En viss bakgrund

Plates är en fiktiv restaurang. Som alla lokala företag har de en Facebook-sida. Och precis som alla företag med en Facebook-sida besöker kunderna deras sida med hjälp av stationära datorer, bärbara datorer och mobiltelefoner.

Det här är Plates omslagsbild på Facebook. Den är trasig. Senare kommer du att se hur.

En trasig Facebook-omslagsbild

Riktlinjer för omslagsbilder på Facebook

Facebook tillhandahåller riktlinjer för användare som vill lägga till omslagsbilder på sina sidor. Riktlinjerna är desamma för företags- och personliga sidor.

Din sidas omslagsbild:

Den visas i 820 pixlars bredd och 312 pixlars höjd på din sida på datorer och 640 pixlars bredd och 360 pixlars höjd på smarttelefoner.

Den måste vara minst 400 pixlar bred och 150 pixlar hög.

Laddar snabbast som en sRGB JPG-fil som är 851 pixlar bred, 315 pixlar hög och mindre än 100 kilobyte.

Riktlinjerna kan vara förvirrande. Det finns några saker du behöver veta innan du börjar arbeta med att skapa ditt omslagsfoto eller din grafik på Facebook. Här visas samma riktlinjer på lite olika sätt:

  • 851px bredd x 315px höjd: Rekommenderad storlek för skrivbord
  • 820px bredd x 312px höjd: Visas på skrivbord
  • 640px bredd x 360px höjd:
  • 400px bredd x 150px höjd: minsta storlek för omslagsbild

Förbättring av Facebooks riktlinjer

Du behöver bara två av Facebooks fyra rekommendationer. När du uppfyller de två uppfyller du faktiskt alla fyra villkoren som en biprodukt av ditt arbete. Det här är de två du behåller:

  • 851px bredd x 315px höjd: rekommenderad storlek för skrivbord
  • 640px bredd x 360px höjd: visning på smartphones

När du tittar på omslagsmåtten som du behåller, märker du att det finns en höjd på 315px för skrivbord och en höjd på 360px för mobil. Samma Facebook-omslag måste användas för dator och mobil, vilket innebär att din absoluta minimihöjd måste vara 360px. Därför är den storlek på Facebook-omslaget du behöver nu följande:

  • 851px bredd x 360px höjd: minsta visningsstorlek för skrivbord och mobil

Nu har du en storlek på Facebook-omslaget som är för hög för skrivbord och för bred för mobil. Det borde inte vara vad du vill ha, men det är precis vad du vill ha. Lite senare kommer det att klargöras varför det är sant.

Du bör göra ytterligare en storleksändring av din Facebook-omslagsstorlek. Högupplösta skrivbordsskärmar och bärbara datorer blir alltmer populära. Facebooks rekommendationer för bildstorlek tar redan hänsyn till högupplösta mobilskärmar. Detsamma gäller dock inte för stationära och bärbara skärmar. Om du vill att din Facebook-omslagsbild ska se skarp ut på stora skärmar måste du fördubbla bildstorleken:

  • 1 702px bredd x 720px höjd: perfekt skärmstorlek för datorer och mobiler

Ovanför har du dina slutgiltiga canvastorlekar. Din Facebook-omslagsbild kommer att överensstämma med dessa dimensioner.

Undervika några vanliga fallgropar

När du nu känner till dina Facebook-omslagsdimensioner kan du börja utforma din omslagsbild. En besökare på din sida kommer att se en del av eller hela omslagsbilden, beroende på om de besöker sidan från en stor skärm (stationär eller bärbar dator) eller en mobil enhet.

Facebook-omslagets visningsområde på stationär och mobil

Besökare på stora skärmar kommer att se hela omslagsbilden. Mobila besökare ser endast det ljusblå området. Facebook kommer att hugga av sidorna.

Revisitering av Plates trasiga Facebook-omslagsbild

Tidigare såg du Plates trasiga Facebook-omslagsbild. Den ser bra ut på bärbara datorer och stationära datorer.

En trasig Facebook-omslagsbild

Plates Facebook-sida ser mycket annorlunda ut i mobilen. Nedan är vad kunderna ser på sina mobiltelefoner. En stor del av logotypen saknas och texten är oläslig.

Klippad information saknas på Facebook-sidan

När man placerar Plates’ Facebook-omslagsbild ovanpå de dimensioner som identifierats tidigare är det lätt att se vad som hänt. Facebook visar endast mitten av bilden som omslag på mobilen. Resten beskärs från visning och är förlorad information.

Overlay som visar hur Facebook-omslaget är trasigt

Skapande av din Facebook-omslagsmall

För att utforma din Facebook-omslagsbild använder du de mått som vi angett tidigare.

  1. Rita en ruta som är 1 702 pixlar bred och 720 pixlar hög
  2. Rita en annan ruta som är 1 280 pixlar bred och 720 pixlar hög med en annan färg
  3. Centrera den mindre rutan ovanpå den större

Du bör ha något som ser ut som mallen nedan. Vi har lagt till några horisontella och vertikala linjer som kompositionshjälpmedel för att visa tredjedelsregeln. De vertikala linjerna är inte exakt placerade eftersom Facebooks bilder för stora och små skärmar har olika proportioner. De är dock nära varandra, och sidorna av de fetstilade plus-symbolerna visar skillnaden mellan de två. Organisera ditt innehåll runt plus-symbolerna så bör du få något som är tilltalande för de flesta ögon.

Templar för utformning av Facebook-omslag

Utformning av din Facebook-omslagsbild

Välj nu en bild som du tycker om och placera den ovanpå de två rutorna som du har skapat. Gör bilden mestadels genomskinlig, så att du kan se rutorna under den. Du kommer att rätta till det senare. Du bör se något som liknar detta:

Mall för Facebook-omslag ovanpå omslagsbild

Det ljusblå området kommer att visas på skrivbordet och mobilen. Det mörkblå området kommer endast att synas på stationära och bärbara datorer. När bilden är placerad som du vill kan du lägga till text eller grafik.

Facebook-omslagsmall ovanpå omslagsbild och grafik

Härskaffa transparensen från bilden. Vid det här laget ska du inte se bakgrundsrutorna som du har gjort alls. Faktum är att du bör se din Facebook-omslagsbild exakt så som dina sidbesökare kommer att se den när de besöker sidan från en stationär eller bärbar dator.

Korrigerad Facebook-omslagsbild som den visas på en stationär dator

Du har gjort allt det hårda arbetet. Ladda upp din färdiga bild till Facebook och ange den som din omslagsbild. Besök sedan din Facebook-sida från en mobil enhet. Den ska se ut så här:

Korrigerad Facebook-omslagsbild som den visas på mobilen

Du klarade det!

Vi hoppas att den här guiden var till hjälp. Om den var det, låt oss veta. Vi har gjort vår mall för Facebook-omslagsbilden gratis att ladda ner i ett par format.

  • Ladda ner mallen som en Sketch-fil
  • Ladda ner mallen som en 1 702px x 720px JPG

.