WordPress facilite l’intégration de vidéos, tweets, posts sociaux, cartes, playlists et contenus externes grâce aux oEmbeds. Il suffit souvent de coller une URL dans l’éditeur, et WordPress génère l’intégration automatiquement.
Mais sur un vieux thème, un ancien article ou un site migré plusieurs fois, le HTML peut vite devenir bancal : balises <meta> au mauvais endroit, iframes mal formées, embeds copiés-collés, attributs invalides, scripts externes inutiles, ou shortcodes d’anciens plugins qui ne servent plus à rien.
Voici comment valider et nettoyer le code HTML lié aux balises meta et aux oEmbeds WordPress, sans casser les contenus intégrés.
Comprendre la différence entre meta tags et oEmbeds
Les balises <meta> décrivent la page. Elles appartiennent au document HTML et doivent généralement être placées dans le <head>. Elles servent par exemple à déclarer l’encodage, le viewport mobile, la description SEO ou certaines métadonnées sociales.
Les oEmbeds, eux, servent à intégrer du contenu externe dans le corps de la page : vidéo YouTube, vidéo Vimeo, publication sociale, audio, carte, document ou autre contenu pris en charge par un provider compatible.
Le mélange des deux crée souvent les erreurs. Une balise <meta> dans le contenu d’un article n’a généralement rien à faire là. Un embed collé dans le <head> non plus. Chacun sa chambre, chacun son bazar.
Les balises meta doivent rester dans le head
En HTML, l’élément <meta> représente une métadonnée du document. Selon ses attributs, il peut déclarer l’encodage, fournir une métadonnée nommée, ou simuler certaines directives HTTP. MDN rappelle notamment que charset, name et http-equiv correspondent à des usages différents de l’élément <meta>.
Un encodage UTF-8 correct ressemble à ceci :
<meta charset="UTF-8">Langage du code : HTML, XML (xml)La balise viewport classique ressemble à ceci :
<meta name="viewport" content="width=device-width, initial-scale=1">Langage du code : HTML, XML (xml)Sur WordPress, ces balises ne doivent pas être ajoutées dans un article. Elles doivent venir du thème, via header.php, wp_head(), ou le système natif du thème.
Vérifier que le thème appelle wp_head()
Un thème WordPress doit appeler wp_head() juste avant la fermeture de la balise </head>. Sans cet appel, WordPress et les plugins ne peuvent pas injecter correctement leurs scripts, styles et métadonnées.
<?php wp_head(); ?>
</head>Langage du code : HTML, XML (xml)Vérifiez aussi que wp_footer() est présent avant </body> :
<?php wp_footer(); ?>
</body>Langage du code : HTML, XML (xml)Si ces deux appels manquent, beaucoup de comportements WordPress deviennent imprévisibles : oEmbeds, scripts, styles, plugins SEO, analytics, commentaires, blocs et embeds sociaux.
Ne pas coller des balises meta dans le contenu WordPress
Une erreur fréquente consiste à coller dans l’éditeur WordPress un code fourni par une plateforme externe, par exemple :
<meta name="something" content="value">
<script src="https://example.com/embed.js"></script>
<iframe src="https://example.com/embed"></iframe>Langage du code : HTML, XML (xml)Dans un article, ce mélange pose plusieurs problèmes : la balise <meta> n’est pas au bon endroit, le script peut être filtré par WordPress, l’iframe peut casser la validation, et le rendu peut dépendre d’un service externe.
Quand un service propose à la fois une URL et un code embed, commencez toujours par tester l’URL seule dans un bloc Embed. WordPress gère souvent l’intégration proprement.
Utiliser les blocs Embed de Gutenberg
Dans l’éditeur de blocs, vous pouvez coller directement une URL compatible dans un bloc. WordPress tente alors de générer l’intégration via oEmbed.
Exemple avec une vidéo YouTube :
https://www.youtube.com/watch?v=dQw4w9WgXcQLangage du code : JavaScript (javascript)WordPress transforme ensuite l’URL en bloc Embed ou bloc YouTube. C’est plus propre que coller un vieux code iframe récupéré à la main.
Le Block Editor repose sur un système de blocs pour composer les contenus. Les embeds modernes s’inscrivent dans cette logique : on insère une URL ou un bloc dédié, et WordPress se charge du rendu. :contentReference[oaicite:1]{index=1}
Comprendre oEmbed dans WordPress
oEmbed est un format qui permet à un site de demander à un provider le HTML nécessaire pour intégrer une ressource. WordPress connaît une liste de providers autorisés, et peut aussi utiliser la découverte oEmbed avec des restrictions de sécurité.
Depuis WordPress 4.4, la découverte oEmbed existe, mais WordPress limite fortement le HTML autorisé pour les providers non explicitement autorisés. La documentation WordPress indique notamment que les contenus HTML et vidéo sont filtrés, sandboxés et soumis à des restrictions de sécurité. :contentReference[oaicite:2]{index=2}
Cette prudence est normale : un embed externe peut contenir des iframes, du JavaScript ou du HTML arbitraire. WordPress ne doit pas tout accepter comme si Internet était une salle de classe bien rangée. Spoiler : non.
Tester un oEmbed avec wp_oembed_get()
Pour tester une URL oEmbed en PHP, WordPress fournit wp_oembed_get(). Cette fonction tente de récupérer le HTML d’intégration depuis une URL et un provider compatible.
<?php
$embed = wp_oembed_get( 'https://www.youtube.com/watch?v=dQw4w9WgXcQ' );
if ( false !== $embed ) {
echo wp_kses_post( $embed );
}Langage du code : HTML, XML (xml)La fonction accepte aussi des arguments, par exemple une largeur :
<?php
$embed = wp_oembed_get(
'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
array(
'width' => 800,
)
);
if ( false !== $embed ) {
echo wp_kses_post( $embed );
}Langage du code : HTML, XML (xml)Dans un thème ou plugin, n’utilisez pas wp_oembed_get() en boucle sans cache. Chaque appel peut déclencher une requête HTTP vers le provider externe si le résultat n’est pas déjà disponible. C’est très bien pour un test, moins bien pour transformer chaque page vue en tournée internationale des API vidéo.
Pourquoi wp_oembed_get() peut retourner false
Si wp_oembed_get() retourne false, plusieurs causes sont possibles :
- l’URL n’est pas prise en charge par un provider oEmbed ;
- le service externe bloque la requête ;
- le serveur WordPress ne peut pas faire de requête HTTP sortante ;
- le certificat TLS du provider pose problème ;
- le provider répond trop lentement ;
- l’URL n’est pas publique ;
- un plugin de sécurité bloque les requêtes HTTP externes ;
- le cache oEmbed contient une ancienne erreur.
Pour isoler le problème, testez l’URL dans l’éditeur WordPress, dans la console serveur avec curl, puis avec wp eval.
wp eval 'var_dump( wp_oembed_get( "https://www.youtube.com/watch?v=dQw4w9WgXcQ" ) );'Langage du code : JavaScript (javascript)Si cette commande retourne false, WordPress ne parvient pas à générer l’embed depuis cette URL dans cet environnement.
Nettoyer les anciens embeds dans post_content
Sur un site ancien, vous pouvez trouver des iframes copiées-collées, des scripts externes, des shortcodes obsolètes, ou des balises <meta> perdues dans post_content.
Pour chercher des balises <meta> dans les articles :
wp db query "
SELECT ID, post_title, post_status
FROM wp_posts
WHERE post_type IN ('post', 'page')
AND post_content LIKE '%<meta%';
"Langage du code : PHP (php)Pour chercher les iframes :
wp db query "
SELECT ID, post_title, post_status
FROM wp_posts
WHERE post_type IN ('post', 'page')
AND post_content LIKE '%<iframe%';
"Langage du code : PHP (php)Pour chercher les vieux scripts collés dans le contenu :
wp db query "
SELECT ID, post_title, post_status
FROM wp_posts
WHERE post_type IN ('post', 'page')
AND post_content LIKE '%<script%';
"Langage du code : PHP (php)Ces requêtes ne modifient rien. Elles listent seulement les contenus à inspecter. C’est volontaire : supprimer massivement des embeds sans contrôle peut casser des articles encore utiles.
Exporter les contenus à auditer en CSV
Pour produire un export exploitable, utilisez WP-CLI :
wp db query "
SELECT ID, post_title, post_type, post_status, post_date
FROM wp_posts
WHERE post_content LIKE '%<iframe%'
OR post_content LIKE '%<script%'
OR post_content LIKE '%<meta%'
ORDER BY post_date DESC;
" --format=csv > contenus-embeds-auditer.csvLangage du code : PHP (php)Vous pouvez ensuite ouvrir le fichier dans un tableur et traiter les contenus par priorité : articles publiés, pages importantes, vieux contenus à refondre, vidéos encore utiles, embeds obsolètes.
Pour un audit éditorial plus large, l’article sur les articles WordPress de moins de 300 mots complète bien cette méthode. Les vieux contenus courts contiennent souvent des embeds historiques à nettoyer.
Remplacer un ancien iframe par une URL oEmbed
Quand c’est possible, remplacez un iframe manuel par l’URL de la ressource. Par exemple, au lieu de garder ceci :
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" allowfullscreen></iframe>Langage du code : HTML, XML (xml)Utilisez simplement :
https://www.youtube.com/watch?v=dQw4w9WgXcQLangage du code : JavaScript (javascript)Dans Gutenberg, cette URL sera transformée en bloc Embed/YouTube. Le contenu devient plus lisible, plus maintenable, et plus compatible avec les futures évolutions de WordPress.
Rendre les iframes responsives quand l’embed manuel est nécessaire
Certains services ne sont pas compatibles oEmbed. Dans ce cas, un iframe manuel peut rester nécessaire. Il faut alors le rendre responsive et éviter qu’il dépasse du viewport.
HTML :
<div class="responsive-embed">
<iframe src="https://example.com/embed" loading="lazy" allowfullscreen></iframe>
</div>Langage du code : HTML, XML (xml)CSS :
.responsive-embed {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.responsive-embed iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}Langage du code : CSS (css)Cette approche évite les anciennes bidouilles avec padding-bottom, tout en gardant une taille responsive propre. Pour traquer les éléments trop larges, consultez aussi l’article sur l’identification d’un élément plus large que le viewport.
Valider le HTML d’une page WordPress
Pour vérifier les erreurs HTML, utilisez le validateur du W3C :
https://validator.w3.org/Langage du code : JavaScript (javascript)Testez une page représentative : article avec vidéo, page avec embed social, fiche produit WooCommerce, page d’accueil, ou ancien article migré.
Les erreurs fréquentes liées aux embeds :
- balise
<meta>dans le<body>; - iframe sans attribut valide ;
- attribut HTML obsolète ;
- balise non fermée ;
- script externe placé dans le contenu ;
- embed copié depuis un service qui génère du HTML ancien ;
- balise Open Graph ajoutée dans un article au lieu du
<head>; - duplication de meta description ou de viewport.
Ne corrigez pas uniquement pour “faire plaisir au validateur”. Corrigez surtout ce qui peut casser le rendu, l’accessibilité, le SEO, la performance ou la maintenance.
Éviter les meta tags SEO en double
Les balises meta SEO doivent être gérées par WordPress, le thème ou un plugin SEO. Si vous utilisez The SEO Framework, Yoast, Rank Math ou un autre plugin SEO, ne collez pas manuellement des meta descriptions dans le contenu.
Une balise comme celle-ci doit être dans le <head>, pas dans l’article :
<meta name="description" content="Description de la page">Langage du code : HTML, XML (xml)Pour les sites WordPress modernes, laissez le plugin SEO gérer cela. Sinon, vous risquez des doublons, des incohérences entre page et article, ou des balises visibles au mauvais endroit dans le DOM.
Si vous utilisez The SEO Framework, l’article sur la correction du sitemap The SEO Framework sous nginx complète bien cette partie SEO technique.
Performance : attention aux embeds externes
Un embed externe peut charger beaucoup de ressources : iframe, JavaScript, polices, cookies, trackers, thumbnails et connexions réseau supplémentaires.
Pour limiter l’impact :
- évitez d’empiler trop d’embeds sur une même page ;
- utilisez
loading="lazy"sur les iframes manuels ; - préférez les URLs oEmbed natives quand possible ;
- utilisez une façade de vidéo si la performance est critique ;
- testez le poids réseau avec DevTools ;
- mesurez l’impact sur mobile.
Pour une approche performance plus globale côté WordPress, l’article sur l’optimisation d’un thème WordPress et des requêtes SQL complète bien ce sujet. Les embeds ne pèsent pas sur MySQL de la même manière, mais ils peuvent plomber le rendu front-end.
Vie privée : embeds et cookies tiers
Beaucoup d’embeds externes chargent des ressources tierces. Selon le service, cela peut déposer des cookies ou déclencher des requêtes vers des domaines externes.
Pour les vidéos YouTube, vous pouvez parfois préférer le domaine privacy-enhanced :
https://www.youtube-nocookie.com/embed/VIDEO_IDLangage du code : JavaScript (javascript)Si vous devez intégrer beaucoup de vidéos, envisagez une façade : une image cliquable qui ne charge l’iframe qu’après interaction. Le gain performance et confidentialité peut être net, surtout sur mobile.
Cas des shortcodes d’anciens plugins d’embed
Les vieux sites WordPress contiennent parfois des shortcodes d’anciens plugins vidéo ou audio :
[youtube id="..."]
[vimeo clip_id="..."]
[embed]https://example.com/video[/embed]Langage du code : JavaScript (javascript)Certains fonctionnent encore. D’autres affichent le shortcode brut si le plugin a été supprimé. Commencez par lister ces shortcodes :
wp db query "
SELECT ID, post_title
FROM wp_posts
WHERE post_content LIKE '%[youtube%'
OR post_content LIKE '%[vimeo%'
OR post_content LIKE '%[embed%';
"Langage du code : PHP (php)Ensuite, remplacez-les progressivement par des blocs Embed ou des URLs simples. Pour comprendre quand exécuter ou éviter les shortcodes côté PHP, consultez aussi l’article sur l’exécution d’un shortcode dans une fonction WordPress.
Ajouter un provider oEmbed personnalisé
Si un service interne ou externe fournit un endpoint oEmbed, vous pouvez l’ajouter à WordPress avec wp_oembed_add_provider().
<?php
add_action( 'init', 'skyminds_register_custom_oembed_provider' );
/**
* Register a custom oEmbed provider.
*
* @return void
*/
function skyminds_register_custom_oembed_provider(): void {
wp_oembed_add_provider(
'https://videos.example.com/watch/*',
'https://videos.example.com/oembed',
false
);
}Langage du code : HTML, XML (xml)Le troisième paramètre indique ici que le provider n’utilise pas une expression régulière. Si vous ajoutez un provider personnalisé, faites-le uniquement pour un service fiable. Un provider oEmbed peut renvoyer du HTML d’intégration, donc la confiance compte.
Supprimer un provider oEmbed si nécessaire
Vous pouvez aussi supprimer un provider avec wp_oembed_remove_provider(). Par exemple, si vous ne voulez plus transformer automatiquement certaines URLs en embeds :
<?php
add_action( 'init', 'skyminds_remove_example_oembed_provider' );
/**
* Remove a custom oEmbed provider.
*
* @return void
*/
function skyminds_remove_example_oembed_provider(): void {
wp_oembed_remove_provider( '#https?://www\.example\.com/.+#i' );
}Langage du code : HTML, XML (xml)Ce cas reste plus rare. En général, il vaut mieux corriger le contenu que désactiver brutalement un provider utilisé par de vieux articles.
Purger les caches oEmbed
WordPress met en cache certains résultats oEmbed dans les métadonnées des articles. Si un embed reste cassé alors que l’URL fonctionne, il peut être utile de vider les caches oEmbed liés aux contenus concernés.
Pour repérer les metas oEmbed :
wp db query "
SELECT post_id, meta_key
FROM wp_postmeta
WHERE meta_key LIKE '_oembed_%'
LIMIT 50;
"Langage du code : PHP (php)Pour supprimer les caches oEmbed globalement :
wp db query "
DELETE FROM wp_postmeta
WHERE meta_key LIKE '_oembed_%';
"Langage du code : PHP (php)Faites une sauvegarde avant. WordPress pourra régénérer ces caches, mais sur un gros site, cela peut déclencher de nombreux appels externes au prochain rendu des contenus. Allez-y proprement, pas façon bulldozer sous caféine.
Sauvegarder avant un nettoyage massif
Avant de nettoyer des balises meta, iframes ou caches oEmbed en base, exportez la base :
wp db export "backup-before-oembed-cleanup-$(date +%F-%H%M%S).sql"Langage du code : JavaScript (javascript)Vérifiez le fichier :
ls -lh backup-before-oembed-cleanup-*.sqlLangage du code : CSS (css)Pour une stratégie plus large, vous pouvez consulter l’article sur les sauvegardes de fichiers et bases de données avec cron.
Valider le code oEmbed de YouTube
Il suffit de lancer les quatre requêtes SQL suivantes :
<code>UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, 'frameborder="0" allowfullscreen', 'style="border: none"');
UPDATE wp_commentmeta SET meta_value = REPLACE (meta_value, 'frameborder="0" allowfullscreen', 'style="border: none"');
UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, "wmode=transparent' frameborder='0'", "wmode=transparent' style='border: none'");
UPDATE wp_commentmeta SET meta_value = REPLACE (meta_value, "wmode=transparent' frameborder='0'", "wmode=transparent' style='border: none'");</code>Langage du code : JavaScript (javascript)Valider le code oEmbed de Dailymotion
Pour le code de Dailymotion, ces deux requêtes suffisent :
<code>UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, 'frameborder="0">', 'style="border: none">');
UPDATE wp_commentmeta SET meta_value = REPLACE (meta_value, 'frameborder="0">', 'style="border: none">');</code>Langage du code : JavaScript (javascript)Valider le code oEmbed de Vimeo
Quatre requêtes pour Vimeo :
<code>UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, 'frameborder="0" title=', 'title=');
UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, ' webkitallowfullscreen mozallowfullscreen allowfullscreen', '');
UPDATE wp_commentmeta SET meta_value = REPLACE (meta_value, 'frameborder="0" title=', 'title=');
UPDATE wp_commentmeta SET meta_value = REPLACE (meta_value, ' webkitallowfullscreen mozallowfullscreen allowfullscreen', '');</code>Langage du code : JavaScript (javascript)Valider le code oEmbed de SlideShare
Et deux requêtes pour SlideShare :
<code>UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, 'frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen>', 'style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px;overflow:auto;border:none">');
UPDATE wp_commentmeta SET meta_value = REPLACE (meta_value, 'frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen>', 'style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px;overflow:auto;border:none">');</code>Langage du code : JavaScript (javascript)Et voilà, le code est plus propre, plus valide et utilise CSS plutôt que des balises propriétaires.
Checklist de validation
- Vérifier que
wp_head()etwp_footer()existent dans le thème. - Éviter les balises
<meta>dans le contenu des articles. - Utiliser les blocs Embed Gutenberg quand possible.
- Remplacer les anciens iframes YouTube/Vimeo par des URLs simples si possible.
- Rendre les iframes manuels responsives.
- Rechercher les
<script>,<iframe>et<meta>danspost_content. - Valider les pages importantes avec le validateur W3C.
- Éviter les meta descriptions ou Open Graph collées manuellement.
- Mesurer l’impact performance des embeds externes.
- Vider les caches oEmbed uniquement après sauvegarde.
- Tester mobile, desktop et contenu ancien.
Commandes utiles
Chercher les balises meta dans les contenus :
wp db query "
SELECT ID, post_title, post_status
FROM wp_posts
WHERE post_type IN ('post', 'page')
AND post_content LIKE '%<meta%';
"Langage du code : PHP (php)Chercher les iframes :
wp db query "
SELECT ID, post_title, post_status
FROM wp_posts
WHERE post_type IN ('post', 'page')
AND post_content LIKE '%<iframe%';
"Langage du code : PHP (php)Chercher les scripts :
wp db query "
SELECT ID, post_title, post_status
FROM wp_posts
WHERE post_type IN ('post', 'page')
AND post_content LIKE '%<script%';
"Langage du code : PHP (php)Tester un oEmbed :
wp eval 'var_dump( wp_oembed_get( "https://www.youtube.com/watch?v=dQw4w9WgXcQ" ) );'Langage du code : JavaScript (javascript)Lister les caches oEmbed :
wp db query "
SELECT post_id, meta_key
FROM wp_postmeta
WHERE meta_key LIKE '_oembed_%'
LIMIT 50;
"Langage du code : PHP (php)Supprimer les caches oEmbed après sauvegarde :
wp db export "backup-before-oembed-cache-delete-$(date +%F-%H%M%S).sql"
wp db query "
DELETE FROM wp_postmeta
WHERE meta_key LIKE '_oembed_%';
"Langage du code : PHP (php)Conclusion
Pour valider le code HTML lié aux meta tags et aux oEmbeds dans WordPress, commencez par séparer les responsabilités : les balises <meta> appartiennent au <head>, les embeds appartiennent au contenu.
Ensuite, privilégiez les blocs Embed et les URLs simples plutôt que les vieux iframes copiés-collés. Auditez les anciens contenus avec WP-CLI, corrigez les erreurs visibles, rendez les iframes nécessaires responsives, puis validez les pages importantes.
Un embed propre doit faire oublier sa technique. Il affiche la vidéo, l’audio ou la publication attendue, sans casser le HTML, le mobile, la performance ou le SEO.
