När du först startar en ny webbplats eller blogg, vill du antagligen dela den med dina vänner och familj direkt. Men om du inte ställde in det ordentligt är allt de ser en tråkig länk.
Även om förhandsgranskningen laddar en bild kanske det inte är den du vill se. Men du kan fixa det.
Metataggar är HTML-taggar som inte visar något innehåll på din webbsida. De bor inne i taggar i din HTML. När sökmotorer och andra tjänster, som Facebook, läs din sida, de får riktad information från metataggarna.
För många människor är Google internet. Det är utan tvekan den viktigaste uppfinningen sedan själva Internet. Och medan sökmotorer har förändrats mycket sedan dess är de underliggande principerna fortfarande desamma.
Metataggar är vad du behöver för att få sociala medier och textmeddelanden att bearbeta dina länkar ordentligt. När du till exempel delar en länk via Facebook följer Facebook länken till sidan. Den läser sedan sidan och försöker lista ut vad allt är.
Viktigast, det försöker hitta en titel, beskrivning och bild. Om den inte hittar dem kommer den bara att visa en enkel länk utan krusiduller. För att få Facebook att visa en specifik titel, beskrivning och bild måste du lägga till specifika metataggar för att berätta vad den ska leta efter.
Om sociala mediasidor som Facebook och Twitter får den information de behöver från din webbplats skapar de ett kort. Om allt gick enligt planen borde det se ut som du förväntar dig.
RELATERAD: Hur man bygger Twitter, Instagram och Reddit Bots med Python
Om du byggde din webbplats med vanlig HTML eller ett front-end-ramverk bör det vara enkelt att lägga till metataggar. De går i samma område som dina titel-, stil- och skripttaggar, som i följande exempel:
Lee Nathan - Personlig utvecklingsförfattare
...
Du kan se att det redan finns några metataggar på plats. Det här är inte de du behöver för att din webbplats ska visas korrekt i länk, de är bara några standardinställningar på låg nivå.
Att ändra metataggar i WordPress är mer involverat. Kompletta instruktioner skulle ta en hel guide. Så istället är här några tips som hjälper dig att komma igång:
- Om du är bekväm med att redigera ditt tema bör metataggarna finnas i header.php fil med ditt nuvarande tema.
- Om du inte kan komma åt ditt tema eller inte vill hantera det kan du ändra dina metataggar med ett plugin-liknande Avancerad hantering av metataggar.
Ta en titt på de bästa WordPress-leverantörerna om du är intresserad av att starta en webbplats på plattformen.
Hur man skapar ett Facebook-kort
Nu när du har räknat ut hur du kommer åt dina metataggar kan du börja redigera dem. Det här är de minsta taggar som Facebook vill se:
Titel- och beskrivningsegenskaperna berättar för Facebook vilken text som ska visas. URL-egenskapen kan länka till en undersida för speciella kampanjer eller A / B-test.
Bildegenskapen ska vara en fullständig adress, inte i förhållande till din indexsida som /image.jpg. Den bästa bildstorleken att använda är 1200x628, eftersom den här storleken är den mest kompatibla över sociala mediasidor och enheter.
Hur man skapar ett Twitter-kort
Twitter-kortet är nästan detsamma som Facebook-kortet, men med olika metataggar. Så här ser metataggar på Twitter ut:
Titel och beskrivningsegenskaper är desamma som Facebook; Bildegenskapen följer också samma regler. Och 1200x628 är en bra storlek till att börja med.
Den största skillnaden är kortegenskapen. I det här exemplet används "summary_large_image" för att skapa ett kort som ser ungefär ut som Facebook-kortet. Twitter har dock andra alternativ.
Hur man ser till att din förhandsgranskning ser rätt ut
Du kan skicka en tweet och snabbt ta bort den ett halvt dussin gånger tills du får rätt på ditt kort. Du kan också skicka ett Facebook-meddelande till dig själv. Men dessa metoder är typ av klumpiga. Lyckligtvis erbjuder båda tjänsterna ett praktiskt verktyg för att göra det lättare att kontrollera dina kort.
Facebook har en delningsfelsökare. Och Twitter har en kortvaliderare. Båda verktygen gör samma uppgift att låta dig se hur länkar fungerar; de använder bara olika namn.
Andra aspekter du bör testa
Nu har du fått din webbplatslänk för att se bra ut på de två stora sociala nätverken. Chansen är stor att det kommer att se bra ut överallt, men du bör dubbelkolla om det gör det. Till exempel, om du har information längst ner eller överst på en bild, kan den klippas på mobil.
Mobil
Innan du går längre är det en bra idé att se till att din länk fortfarande ser bra ut på mobilen. Som nämnts kan din bild klippas på den mindre skärmen. Exemplet som visades tidigare hade bilden för låg, så du kunde bara se den övre halvan av huvudet.
SMS och budbärare
Det här är en enkel fråga om att skicka dig en text (eller ett meddelande via en tjänst som WhatsApp) med länken. Du behöver inte oroa dig för ett valideringsverktyg. Chansen är att om det ser bra ut i apparna för sociala medier kommer det att se bra ut här.
Om du arbetar på din personliga webbplats vill du definitivt att den ska se bra ut på LinkedIn. Som tur är, LinkedIn tillhandahåller också ett valideringsverktyg ringde postinspektören. Du behöver inte oroa dig för fler metataggar eftersom LinkedIn använder Facebooks taggar.
Vad du ska arbeta med nästa
Informationen vi täckte borde vara tillräcklig för att komma igång. Men om du vill lära dig mer, kolla in Facebooks guide till taggar eller Twitters sida om taggar.
Nätet är överflödigt med verktyg som hjälper alla att skapa sina egna professionellt utseende, delbara bilder. Här är våra favoriter.
- Programmering
- HTML
- Hemsida
- Verktyg för webbansvariga
Lee är en heltid nomad och en polymat med många passioner och intressen. Några av dessa passioner kretsar kring produktivitet, personlig utveckling och skrivning.
Prenumerera på vårt nyhetsbrev
Gå med i vårt nyhetsbrev för tekniska tips, recensioner, gratis e-böcker och exklusiva erbjudanden!
Ett steg till…!
Bekräfta din e-postadress i e-postmeddelandet som vi just skickade till dig.