Localhost OG-taggar kontroll

Nästa

Under utveckling på localhost syns ännu inga riktiga delningskort, eftersom Facebook och andra plattformar inte kan nå en adress på din dator. Du kan ändå kontrollera og-taggarna nu. Klistra in HTML:en från din lokala sida så visar verktyget vilka taggar som finns och vilka värden de har.

Så testar du og-taggar från localhost

  1. 1

    Öppna källkoden lokalt

    Öppna sidan på localhost i webbläsaren och använd view-source för att kopiera head-delen.

  2. 2

    Klistra in HTML:en

    Lägg in den i rutan Sidhuvud i HTML och klicka på Nästa och sedan Resultat.

  3. 3

    Kontrollera de röda posterna

    Varje röd post bland de sex kontrollerna är en tagg som verktyget inte kunde läsa från din markup.

  4. 4

    Rätta mallen och testa igen

    Ändra mallen i ditt projekt, ladda om sidan, kopiera källkoden på nytt och klistra in den igen.

Varför lokala sidor behöver en annan kontroll

Sociala plattformar hämtar sidan från sin egen server. En adress som localhost:3000 eller 192.168.1.20 går inte att nå från Facebook, X eller en chattapp, så den förhandsvisning du ser där är aldrig en exakt bild av det lokala resultatet. Det som går att kontrollera lokalt är själva markupen: finns taggarna, har de rätt attribut och innehåller de värden?

Vad du bör kontrollera lokalt

  • Att varje tagg använder property för Open Graph, till exempel <meta property="og:title" ...>.
  • Att og:url har den fullständiga adressen för den publika sidan, inte localhost. En lokal adress i og:url ger fel mål när sidan senare publiceras.
  • Att og:image är en absolut https-adress. En relativ sökväg som /img/card.jpg fungerar i webbläsaren men inte i ett delningskort.
  • Att värdena är ifyllda och inte använder platshållartext från mallen.

Testa mot den publika adressen

När sidan finns på en riktig domän kan du kontrollera den på nytt med samma verktyg, genom att kopiera källkoden från den publika adressen. Använd sedan Sharing Debugger på den publika URL:en för att se det färdiga kortet. Skrapa inte en lokal adress där, eftersom plattformen inte kan nå den.

Typiska fel i utvecklingsmiljöer

Symptom Trolig orsak Åtgärd
og:url visar localhost Värdet är hårdkodat i mallen Bygg adressen från din publika domän eller konfiguration
Bilden visar en lokal sökväg Relativ adress Använd en full https-adress till filen
Taggarna syns bara i utvecklarverktygen JavaScript lägger till dem efter sidladdningen Skriv ut taggarna i serverns HTML
Gamla taggar finns kvar efter ändring En cachad version av sidan Töm cachen i utvecklingsmiljön och ladda om

Efter publicering

Ett grönt resultat här betyder att markupen är komplett, men inte att den publika sidan fungerar. Kontrollera att sidan svarar utan inloggning, att den inte omdirigerar till en annan adress och att bilden går att öppna i en webbläsare. Först då är lokaltestet verkligen klart.

Vanliga frågor

Nej. Facebook når inte adresser på din dator eller ditt lokala nätverk, så ingen förhandsvisning kan skrapas därifrån. Testa markupen här och skrapa sedan den publika adressen.

Og:url anger den kanoniska adress som kortet och delningarna pekar på. Om den pekar på localhost blir delningarna spridda över adresser som ingen kan nå.

Ja, om staging har en publik adress. Kontrollera markupen där på samma sätt som på produktionen, eftersom mallarna kan skilja sig åt mellan miljöerna.

Verktyget läser den HTML du klistrar in för att visa resultatet. Det hämtar inte din lokala sida och kontaktar inte någon plattform.

Relaterade verktyg

Verktyget finns på andra språk

Guider och användningsområden