Når du først lanserer et nytt nettsted eller en blogg, vil du sannsynligvis dele den med venner og familie med en gang. Men hvis du ikke konfigurerte det ordentlig, er alt de ser en kjedelig lenke.
Selv om forhåndsvisningen laster inn et bilde, er det ikke sikkert du vil se det. Men du kan ordne det.
Metakoder er HTML-koder som ikke viser noe innhold på websiden din. De bor inne i i HTML-koden din. Når søkemotorer og andre tjenester, som Facebook, les siden din, de får målrettet informasjon ut av metakoder.
For mange mennesker er Google internett. Det er uten tvil den viktigste oppfinnelsen siden selve Internett. Og mens søkemotorer har endret seg mye siden, er de underliggende prinsippene fortsatt de samme.
Metakoder er det du trenger for å få sosiale medier og tekstmeldinger til å behandle koblingene dine riktig. Når du for eksempel deler en lenke gjennom Facebook, følger Facebook lenken til siden. Den leser siden og prøver å finne ut hva alt er.
Viktigst, det prøver å finne en tittel, beskrivelse og bilde. Hvis den ikke finner dem, vil den bare vise en enkel lenke uten frills. For å få Facebook til å vise en bestemt tittel, beskrivelse og bilde, må du legge til spesifikke metakoder for å fortelle det hva du skal se etter.
Hvis sosiale medier som Facebook og Twitter får den informasjonen de trenger fra nettstedet ditt, lager de et kort. Hvis alt gikk etter planen, burde det se ut som du forventer.
I SLEKT: Hvordan bygge Twitter, Instagram og Reddit Bots ved hjelp av Python
Hvis du bygde nettstedet ditt med vanlig HTML eller et front-end-rammeverk, bør det være enkelt å legge til metatags. De går i samme område som tittel-, stil- og skriptekoder, som i følgende eksempel:
Lee Nathan - Personlig utviklingsforfatter
...
Du kan se at det allerede er noen metakoder på plass. Dette er ikke de du trenger for å få nettstedet ditt til å vises riktig i lenker, de er bare noen standardinnstillinger på lavt nivå.
Endring av metataggene i WordPress er mer involvert. Komplette instruksjoner vil ta en hel guide. Så i stedet, her er et par tips for å hjelpe deg i gang:
- Hvis du er komfortabel med å redigere temaet ditt, bør metataggene være plassert i header.php filen med ditt nåværende tema.
- Hvis du ikke får tilgang til temaet ditt eller ikke vil håndtere det, kan du endre metataggene dine med et plugin som Avansert metatagghåndtering.
Se på de beste WordPress hosting-leverandørene hvis du er interessert i å lansere et nettsted på plattformen.
Hvordan lage et Facebook-kort
Nå som du har funnet ut hvordan du får tilgang til metataggene dine, kan du begynne å redigere dem. Dette er minimumskodene som Facebook ønsker å se:
Tittel- og beskrivelsesegenskapene forteller Facebook hvilken tekst som skal vises. URL-egenskapen kan lenke til en underside for spesielle kampanjer eller A / B-testing.
Bildegenskapen skal være en fullstendig adresse, ikke i forhold til indeksiden som /image.jpg. Den beste bildestørrelsen å bruke er 1200x628, da denne størrelsen vil være den mest kompatible på tvers av sosiale medier og enheter.
Hvordan lage et Twitter-kort
Twitter-kortet er nesten det samme som Facebook-kortet, men med forskjellige metakoder. Slik ser Twitter-metataggene ut:
Tittelen og beskrivelsesegenskapene er de samme som Facebook; bildeegenskapen følger også de samme reglene. Og 1200x628 er en god størrelse til å begynne med.
Hovedforskjellen er kortegenskapen. Dette eksemplet bruker "summary_large_image" for å lage et kort som ser omtrent ut som Facebook-kortet. Twitter har imidlertid andre alternativer.
Hvordan sørge for at forhåndsvisningen din ser riktig ut
Du kan legge ut en tweet og raskt slette den et halvt dusin ganger til du får riktig kort. Du kan også sende en Facebook-melding til deg selv. Men disse metodene er litt klumpete. Heldigvis gir begge tjenestene et praktisk verktøy for å gjøre det lettere å sjekke kortene dine.
Facebook har en delingsfeilsøking. Og Twitter har en kortvaliderer. Begge verktøyene gjør den samme oppgaven for å la deg se hvordan koblinger fungerer; de bruker bare forskjellige navn.
Andre aspekter du bør teste
Nå har du fått nettstedskoblingen din til å se bra ut på de to store sosiale nettverkene. Sjansen er at det vil se bra ut overalt, men du bør dobbeltsjekke at det gjør det. For eksempel, hvis du har informasjon på bunnen eller toppen av et bilde, kan det bli klippet på mobilen.
Mobil
Før du går videre, er det lurt å sørge for at lenken din fremdeles ser bra ut på mobilen. Som nevnt kan bildet ditt bli klippet på den mindre skjermen. Eksemplet vist tidligere hadde bildet for lavt, så du kunne bare se den øverste halvdelen av hodet.
SMS og budbringere
Dette er et enkelt spørsmål om å sende deg en tekst (eller en melding gjennom en tjeneste som WhatsApp) med lenken. Du trenger ikke å bekymre deg for et valideringsverktøy. Sjansene er at hvis det ser bra ut i sosiale medier-apper, vil det se bra ut her.
Hvis du jobber med ditt personlige nettsted, vil du absolutt at det skal se bra ut på LinkedIn. Heldigvis, LinkedIn gir også et valideringsverktøy ringte postinspektøren. Du trenger ikke å bekymre deg for flere metatagger fordi LinkedIn bruker Facebooks tagger.
Hva du skal jobbe med neste
Informasjonen vi dekket skal være nok til å komme i gang. Men hvis du vil lære mer, sjekk ut Facebooks guide til koder eller Twitters side på koder.
Nettet er full av verktøy for å hjelpe alle med å lage sine egne, profesjonelle, delbare bilder. Her er favorittene våre.
- Programmering
- HTML
- Hjemmeside
- Verktøy for nettredaktører
Lee er en heltids nomad og en polymat med mange lidenskaper og interesser. Noen av disse lidenskapene dreier seg om produktivitet, personlig utvikling og skriving.
Abonner på vårt nyhetsbrev
Bli med på nyhetsbrevet vårt for tekniske tips, anmeldelser, gratis e-bøker og eksklusive tilbud!
Ett steg til…!
Bekreft e-postadressen din i e-posten vi nettopp sendte deg.
