Convalida Open Graph per HTML5

C’è un modo per ottenere i meta tag di Open Graph schifosi di Facebook per convalidare se il mio doctype è (HTML5)?

Oltre ai meta tag di Open Graph di Facebook, il mio documento si convalida perfettamente.

Non voglio davvero usare quanto ciò crea una serie di problemi completamente nuova.

Ecco un esempio di uno degli errori di validazione in questione …

Riga di errore 11, colonna 47: proprietà Attributo non consentita sul meta dell’elemento a questo punto.

  

Qualsiasi aiuto sarebbe apprezzato … Ho cercato senza sosta per giorni senza successo.

Per HTML5, aggiungi questo al tuo elemento html come descritto su ogp.me e mantieni la proprietà og: prefisso:

 < !doctype html>    ... 

Per XHTML (come la domanda dell’OP), usa l’attributo name invece dell’attributo property . Il lint di Facebook genererà un avvertimento, ma il valore meta sarà comunque riconosciuto e analizzato.

  

La risposta breve è no, non in questo momento. Tutte le altre risposte sono soluzioni alternative, hack o semplicemente pazzesche. L’unica soluzione a lungo termine è che Facebook deve creare una syntax alternativa valida HTML5.

Per coloro che raccomandano il targeting di Facebook tramite l’agente utente “facebookexternalhit”, è necessario ricordare che altre aziende stanno seguendo la guida di Facebook con questi tag. Ad esempio, Google+ ricadrà sui tag OpenGraph se il loro markup Schema.org preferito non è presente. Poiché la maggior parte dei siti non utilizza gli attributi di Schema.org (soprattutto se impiegano il tempo per utilizzare correttamente OpenGraph), puoi facilmente perdere i frammenti su siti come Google+ seguendo questo consiglio.

Con l’onnipresenza di Facebook, non è davvero una buona soluzione indirizzarli direttamente – anche se la scelta dell’implementazione è problematica per gli sviluppatori. Quando cerchi soluzioni in un sito come Stack Overflow, devi sempre ricordare che ci possono essere conseguenze impreviste per questi metodi.

Per i nostri siti principali, abbiamo mantenuto XHTML + RDFa per motivi di convalida e ha funzionato abbastanza bene. Spero che man mano che l’utilizzo di HTML5 aumenterà, il team di Facebook inizierà ad accettare un formato valido per questi metadati.

Per quanto riguarda il motivo per cui ci preoccupiamo della convalida: abbiamo riscontrato che la convalida, quando ansible, ci aiuta ad avvisarci degli errori nelle nostre pagine non insegnandoci ad ignorarli. Poiché utilizziamo tutte le estensioni di convalida nei nostri browser, sappiamo immediatamente se c’è un errore di convalida (o avviso) in una pagina e possiamo verificare se è ansible eliminarlo (che è il 99% del tempo in cui è). Questo ci fa risparmiare tempo occupandoci di implementazioni restrittive delle specifiche, soprattutto su piattaforms mobili e marginali al giorno d’oggi. Abbiamo riscontrato un’enorme riduzione dei bug strani perché siamo consapevoli che le nostre pagine sono valide e sappiamo che ciò che sta accadendo nel browser non ha a che fare con il markup non valido che una determinata UA potrebbe non interpretare come previsto.

Per convalidare come HTML5, aggiungi l’attributo prefix dai documenti di Open Graph :

 < !DOCTYPE html>   Valid HTML5!      

Copia e incolla quanto sopra per il validatore w3 per verificare.

È pronto per la produzione: Apple utilizza questo metodo su apple.com .

Questi meta tag sono richiesti solo quando Facebook analizza la pagina per questi tag.

  < ? if(eregi("facebookexternalhit", $_SERVER['HTTP_USER_AGENT'])){ echo ' 

Questi tag saranno presenti solo quando Facebook ne ha bisogno: questo metodo con PHP li rimuove completamente per tutte le altre istanze, inclusa la convalida del W3C.

È passato più di un anno e la soluzione migliore che abbiamo è quella di avvolgere i meta tag in una sorta di verifica lato server.

In PHP ho fatto:

 < ?php if (stristr($_SERVER["HTTP_USER_AGENT"],'facebook') !== false) { ?>      < ?php } ?> 

Funziona davvero su Facebook. Ma davvero non mi piace questa idea!

Molte delle risposte qui sono diventate obsolete. Si prega di non spiare per le intestazioni o scrivere tramite JavaScript (poiché i processori potrebbero non valutare il JS).

Le Raccomandazioni del W3C (estensioni in HTML5) chiamate RDFa 1.1 e RDFa Lite 1.1 (vedi http://www.w3.org/TR/rdfa-lite/ e http://www.w3.org/TR/rdfa-primer/ ) hanno reso l’attributo “proprietà” valido e conforms. Nel frattempo (dal momento che le risposte più vecchie qui) il validatore http://validator.w3.org/check riconosce l’attributo come valido. Inoltre, la documentazione del protocollo Open Graph, http://ogp.me/ , è stata aggiornata per riflettere RDFa 1.1 (utilizza l’attributo “prefisso”).

Il lavoro del W3C è stato fatto con gli input di OpenGraph e schema.org, tra gli altri, per risolvere il tipo di problema sollevato da questa domanda.

In breve, assicurati che i tag OG siano conformi a RDFa e che tu sia d’oro.

Una soluzione recente è quella di registrare un prefisso nel tag html o head:

  

o

  

preso da qui – scusa, la pagina è in tedesco …

Ctriggers soluzione per i meta tag. Se li avvolgi in Javascript, il Linter di Facebook non li troverà. È come non inserirli affatto.

Il wrapping come i pulsanti e gli script di questo tipo funzionano per aiutare a convalidare XHTML 1.0 ma non HTML5.

In JSP:

 < % String ua=request.getHeader("user-agent").toLowerCase(); if(ua.matches(".*facebookexternalhit.*")){ } %>  ... < % } %> 

O:

    ...  

Bene, Visual Studio 2011 mi dice che l’attributo “proprietà” non è valido. Tuttavia, il W3C sembra essere un po ‘più indulgente:

http://validator.w3.org/check?uri=http%3A%2F%2Fpacificfoods.com%2F

Noterai che ho aggiunto i tag Open Graph per raccomandazione di Facebook a quel sito, e non infrange il validatore W3C, che considero autorevole.

Consultando la specifica HTML5 del W3C ufficiale per il meta tag , è chiaro che l’uso dell’attributo “proprietà” (al posto degli attributi “nome”, “http-equiv”, “charset” o “itemprop”) non è valido. Tuttavia, il loro validatore lo convalida (???). Non ho alcuna spiegazione per questa discrepanza.

Sarei propenso a dire che non mi preoccupo della convalida, non credo che l’invalidazione del mark up danneggerà il posizionamento nei motori di ricerca. ad es. le raccomandazioni tecniche di googles non menzionano gli standard. http://www.google.com/support/webmasters/bin/answer.py?answer=35769#2 . Html5 consente di fornire maggiori informazioni ai motori di ricerca che possono quindi utilizzare, ma non riesco a vederle in base alla classifica non basata su convalida.

Tuttavia, se senti che ti aiuta a convalidare, puoi usarlo

  

per avere questi tag presenti e avere un file html che passerà i validatori.

Anche se interromperà gli utenti non Javascript, ho usato questo

  

e ha validato perfettamente. Mostra e funziona perfettamente con Firefox, Opera, IE, Chrome, Safari su Windows e con Firefox, Opera, Safari su Mac.