Comment mettre en œuvre avec succès og: image pour LinkedIn
LE PROBLÈME:
- J'essaie, sans grand succès, d'implémenter une image graphique ouverte sur le site: http://www.guarenty-group.com/cz/
- La page d'accueil contourne complètement la balise og: image, où les pages internes lisent toutes les images du site et placent og: image comme dernière option.
- D'autres réseaux sociaux fonctionnent bien sur les pages internes et la page d'accueil.
LA CONFIGURATION:
- Je n'ai pas de boutons de partage ou similaires, tout ce que je veux, c'est pouvoir partager le lien via mon profil.
- L'image dépasse largement 300x300px: http://guarenty-group.com/img/gg_seal.png
Voici à quoi ressemble ma balise head:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Guarenty Group : Pojištění pro nájemce a pronajímatelé</title> <meta name="keywords" content="" /> <meta name="description" content="Guarenty Group pojišťuje příjem z nájmu pronajímatelům, kauci nájemcům - aby nemuseli platit velkou částku v hotovostí předem - a dále nájemcům pojišťuje příjmy, aby měli na nájem při nemoci, úrazu či nezaměstnání." /> <meta name="image_src" content="http://guarenty-group.com/img/gg_seal.png" /> <meta name="image_url" content="http://guarenty-group.com/img/gg_seal.png" /> <meta property="og:title" content="Pojištění pro nájemce a pronajímatelé" /> <meta property="og:url" content="http://guarenty-group.com/cz/" /> <meta property="og:image" content="http://guarenty-group.com/img/gg_seal.png" /> <meta property="og:description" content="Guarenty Group pojišťuje příjem z nájmu pronajímatelům, kauci nájemcům - aby nemuseli platit velkou částku v hotovostí předem - a dále nájemcům pojišťuje příjmy, aby měli na nájem při nemoci, úrazu či nezaměstnání [...]" /> ... </head>
LES RÉSULTATS DU TEST:
Afin de tromper le cache, j'ai testé le site avec http://www.guarenty-group.com/cz/?try=N , où j'ai changé le N à chaque fois. Ce qui est étrange, c'est que les images trouvées pour différentes valeurs de N sont différentes. Parfois il n'y a pas d'image, parfois il y a 1, 2 ou 3 images, mais à chaque fois il y a un ensemble d'images différent. Mais, en tout cas, je n'ai pas pu trouver l'image spécifiée dans le graphique og:!
MES QUESTIONS:
- https://developer.linkedin.com/documents/setting-display-tags-shares dit une chose, et le personnel du forum d'assistance dit "plus de 300" Est-ce que quelqu'un sait quel est le dimension minimale officielle de l'image (à la fois w et h)?
- Une image peut-elle être trop grande?
- Dois-je utiliser les xmlns, ne dois-je pas utiliser les xmlns ou cela n'a pas d'importance?
- Quelles sont les longueurs maximales (et minimales) pour les balises og: title et og: description?
Toute autre suggestion est bien sûr la bienvenue :)
Merci d'avance, cheers ~
Cette réponse que j'ai trouvée sur les forums LinkedIn pourrait vous être utile:
Les gars, j'ai passé une journée entière à essayer différentes choses. Ce qui a fonctionné pour moi, c'est d'utiliser les balises mata [sic] comme suit:
<meta prefix="og: http://ogp.me/ns#" property="og:title" content="{Your content}" /> <meta prefix="og: http://ogp.me/ns#" property="og:type" content="{Your content}" /> <meta prefix="og: http://ogp.me/ns#" property="og:image" content="{Your content}" /> <meta prefix="og: http://ogp.me/ns#" property="og:url" content="{Your content}" />Essayez simplement d'ajouter un préfixe à chaque balise (pas à la balise html), puis reconnectez-vous avec votre compte LI pour vider le cache ... Publiez vos résultats.
Avez-vous essayé d'ajouter prefix="og: http://ogp.me/ns#" à la balise HTML?
J'ai trouvé cette solution simple qui a fonctionné pour moi après de nombreuses solutions compliquées qui n'ont pas fonctionné:
La seule façon de "vider" le cache de prévisualisation de partage pour LinkedIn est de faire croire à LinkedIn que votre page est une page différente (et nouvelle).
Cela se fait en ajoutant un paramètre composé au lien. Cela n'affecte pas votre page Web, mais cela force la récupération des métadonnées.
Exemple:
Lien d'origine: //beantin.se/consultant-resume "Nouveau" lien: //beantin.se/consultant-resume?1
J'avais le même problème hier soir. J'ai passé des heures à rechercher des solutions et j'ai essayé les solutions recommandées par d'autres dans ce post, mais en vain. Enfin, j'ai contacté LinkedIn à propos de ce problème et ils ont répondu immédiatement. Leur équipe de développement a mis en place un nouvel outil appelé "Post Inspector", qui vous permet d'optimiser le partage de contenu. Littéralement, en quelques minutes, cela a réellement fonctionné.
Tout ce que vous avez à faire est de taper votre URL et ils font tout le travail occupé, c'est-à-dire vérifier le code correct des propriétés telles que l'image, l'auteur, le titre, la description, la date de publication, etc. Non seulement ils vérifient, mais ils vous indiquent également à quel code inclure, ce qui manque et comment y remédier.
Voici le site Web pour utiliser Post Inspector:
LinkedIn met également en cache les aperçus. Si l'image OpenGraph n'a pas été correctement mise en cache à un moment donné auparavant, essayez de vaincre le cache avec un paramètre de requête sur un lien partagé, par exemple https://your-website.com/?1.
J'ai rencontré cela récemment, j'ai passé énormément de temps à y travailler avec tous les types de solutions ci-dessus. Je travaillais avec le code HTML de quelqu'un d'autre et j'ai finalement compris que le HTML manquait simplement la balise head, alors qu'il avait la balise de fermeture pour head.
Linked In ne recherche apparemment pas le texte de la page pour les balises og, mais traite le dom de la page, et si les objets dom ne sont pas correctement codés, ils ne seront pas traités. Si vous rencontrez des problèmes avec des balises sans correspondance ou des balises non fermées, cela pourrait être votre problème si tout le reste ne fonctionne pas.
Je n'ai pas eu besoin d'ajouter de préfixe aux balises META ou d'ajouter des balises de hauteur et de largeur d'image og une fois le code HTML corrigé. Linked In l'a bien traité une fois le html corrigé.
Si la réponse de @ Kym fonctionne pour vous et que vous ne voulez pas avoir un faux paramètre d'URL dans vos liens LinkedIn, une solution simple consiste simplement à vous déconnecter puis à vous reconnecter.
* Écrire ma propre réponse car je n'ai pas assez de représentants pour commenter la leur
J'ai passé toute la journée à le mettre en œuvre. Mon critère principal était de le faire pour tous mes articles sans toucher à un seul article dans Wordpress.
solution LinkedIn n'a pas fonctionné. LinkedIn met également en cache les images pendant 7 jours et si vous avez modifié l'image, vous ne pouvez pas regarder l'image actualisée. Ce sont donc les contraintes et j'ai pu l'implémenter en utilisant du PHP, du Javascript et en utilisant un paramètre factice pour rafraîchir le cache LinkedIn. Voici la solution
Dans mon cas, j'ai fait exactement cela et cela a bien fonctionné (sur ma page bien sûr).
Mettez ces quatre lignes dans la tête:
<title> aanalytics </title>
<meta data-react-helmet="true" property="og:image" content="/photos/s5.jpg">
<meta data-react-helmet="true" property="og:type" content="website">
<meta data-react-helmet="true" property="og:url" content="https://www.aanalytics.de">
MAIS, faites attention que si vous avez plus d'une tête dans votre page, ces lignes doivent être insérées dans la première tête sinon cela ne fonctionnera pas.
J'ai également eu le préfixe = "og: http://ogp.me/ns# " dans le html
Pour moi, la solution était de mettre tous les <meta> balises (sans prefix) à l'intérieur <head> tag.
Pour d'autres réseaux sociaux comme Facebook , Twitter ou Google vous n'avez même pas besoin d'avoir <head> tag. (car il est facultatif dans HTML5 spécifications)
PS. Il existe une nouvelle méthode intéressante pour tester <meta> balises sur votre site Web: https://metatags.io/