web-dev-qa-db-fra.com

Open graph og: contenu vidéo Meta Tags

J'essaie de créer une page qui peut être correctement supprimée par Facebook lorsqu'elle est partagée/appréciée. Une vidéo YouTube sera associée à la page. Par conséquent, dans l'attribut de contenu de la balise og: video, devrais-je insérer le lien d'intégration de la vidéo YouTube ou le lien de la page youtube pour qu'il apparaisse sur Facebook avec le petit bouton "Aperçu" qui joue la vidéo sur Facebook?

J'espère que quelqu'un peut aider! Merci!

facebookopengraph
27
basicallydan

Vous avez deux options. Vous pouvez définir le og:video sur https://www.youtube.com/v/YOUTUBECODE ou définir le og:url sur la page YouTube.

Dans mes exemples, j'intègre cette vidéo https://www.youtube.com/v/BQBjVr1iHH4 à la page suivante https://www.keithandthegirl.com/vip/bonus/episode/9/40/this-is-40 . J'aimerais que Facebook montre la vidéo YouTube chaque fois que quelqu'un partage ma page sur Facebook.

Option 1: définir le og:video sur https://www.youtube.com/v/YOUTUBECODE 

La méta-tag ressemblera à

<meta property='og:video' content='https://www.youtube.com/v/BQBjVr1iHH4' />

Notez que la structure de l'URL YouTube est différente de l'URL classique. Vous devrez isoler la requête "v" du lien YouTube et l'utiliser au format de lien og:video présenté ci-dessus. Dans mon exemple, la valeur de v est BQBjVr1iHH4.

Option 2: régler le og:url sur la page YouTube. 

Si vous ne pouvez pas isoler le code v, vous pouvez définir la balise og:url sur la page YouTube. Dans mon exemple, cela ressemblerait à ceci:

<meta property='og:url' content='https://www.youtube.com/watch?v=BQBjVr1iHH4' />

Cela indiquera à Facebook d’obtenir les balises Open Graph auprès de https://www.youtube.com/watch?v=BQBjVr1iHH4 et de l’utiliser dans l’incorporation. Cela signifie que la description et le titre proviendront de la page YouTube. Cependant, si quelqu'un clique sur le lien, il ira sur votre site Web.

Dans mon exemple, si quelqu'un colle le lien suivant pendant que j'utilise la deuxième option https://www.keithandthegirl.com/vip/bonus/episode/9/40/this-is-40 Facebook verra l'URL est défini sur YouTube et interroge ce lien YouTube pour obtenir des informations sur les OG. Tout ressemblera à YouTube sauf le lien cliquera vers https://www.keithandthegirl.com/vip/bonus/episode/9/40/this-is-40

Une autre remarque: assurez-vous d'utiliser https, pas http. Facebook n'intégrera aucune vidéo non sécurisée sur le site.

31
Michael Khalili

Vous pouvez voir à partir du code source d'une page YouTube, la balise og:video est au format suivant

<meta property="og:video" content="http://www.youtube.com/v/k86xpd26M2g">

Vous pouvez également voir un exemple des métadonnées utilisées à partir de YouTube simplifiées dans le code source de l'URL suivante: http://fb.stevelarsen.co.uk/example.html

Vous pouvez en savoir plus sur le protocole Open Graph ici: http://ogp.me/

8
larsen161

Voici ce que j'ai trouvé:

À l'aide du protocole Open Graph de Facebook, Publisher peut désormais utiliser n'importe quelle vidéo à partir de n'importe quelle URL, à condition que l'URL ait correctement formaté les métadonnées dans le <head> de son code HTML. Voici la liste des informations qui devraient figurer dans le <head>:

  • URL de l'image miniature:

    <meta property="og:image" content="image_src URL">

  • URL SWF:

    <meta property="og:video" content="video_src URL">

  • URL de votre page:

    <meta property="og:url" content="URL">

  • Titre:

    <meta property="og:title" content="title">

  • La description:

    <meta property="og:description" content="description">

  • Largeur de pixel vidéo:

    <meta property="og:video:width" content="video_width">

  • Hauteur de pixel vidéo:

    <meta property="og:video:height" content="name="video_height">

  • Type de contenu:

    <meta property="og:type" content="video">
7
Ryan Walton
<html xmlns:og="http://ogp.me/ns#"> 
    <head>
        <!-- ... -->
        <!-- [REQUIRED TAGS] -->
        <meta property="og:video" content="http://example.com/awesome.flv" />
        <meta property="og:video:height" content="640" />
        <meta property="og:video:width" content="385" />
        <meta property="og:video:type" content="application/x-shockwave-flash" />
        ...
    </head>

Le lien du fichier .flv .... consultez https://developers.facebook.com/docs/opengraph/#types

4
Louy

Pour ceux qui sont tombés sur le débogueur fourni par facebook, veuillez noter ce qui suit:

Lorsque vous êtes connecté au débogueur, vous êtes en session https. Afin de voir votre vidéo dans le débogage, vous devez ajouter l'URL sécurisée pour la vidéo en méta. Ajouter des vidéos youtube est facile, il suffit de mettre l’URL de la page dans og: URL et cela fonctionnera. 

Passé et heure pour arriver à cette conclusion. Il est trop tard, je suis trop fatigué, je veux dormir maintenant :)

0
Talha