{"id":3369,"date":"2024-08-27T00:27:13","date_gmt":"2024-08-27T02:27:13","guid":{"rendered":"https:\/\/rosybrown-mole-393459.hostingersite.com\/?p=3369"},"modified":"2024-08-27T00:27:13","modified_gmt":"2024-08-27T02:27:13","slug":"comment-ajouter-des-balises-open-graph-dans-wordpress-a-laide-de-php","status":"publish","type":"post","link":"https:\/\/blog.juandesouza.com\/fr\/tech\/comment-ajouter-des-balises-open-graph-dans-wordpress-a-laide-de-php\/","title":{"rendered":"Comment ajouter des balises Open Graph dans WordPress avec PHP"},"content":{"rendered":"<p>Open Graph (OG) tags are essential for ensuring that your website content is displayed correctly on social media platforms when shared. These tags help platforms determine which image, title, and description to use when showcasing your content. In this article, you&#8217;ll learn how to add these tags to your WordPress theme using PHP, ensuring that the featured image is correctly displayed for each shared post.<\/p>\n<h4>Step 1: Understanding Open Graph Tags<\/h4>\n<p>Before diving into the code, let&#8217;s review what Open Graph tags are and why they are important.<\/p><div id=\"juand-1212169730\" class=\"juand-content juand-entity-placement\"><script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-8944986240478060\"\r\n     crossorigin=\"anonymous\"><\/script>\r\n<ins class=\"adsbygoogle\"\r\n style=\"display:block; text-align:center;\"\r\n data-ad-layout=\"in-article\"\r\n data-ad-format=\"fluid\"\r\n data-ad-client=\"ca-pub-8944986240478060\"\r\n data-ad-slot=\"9601515663\"><\/ins>\r\n<script>\r\n     (adsbygoogle = window.adsbygoogle || []).push({});\r\n<\/script>\r\n<br\/><\/div>\n<ul>\n<li><strong><code>og:title<\/code><\/strong>: Defines the title of the post.<\/li>\n<li><strong><code>og:description<\/code><\/strong>: Provides a brief description of the post.<\/li>\n<li><strong><code>og:image<\/code><\/strong>: Specifies the image to be used when sharing the post.<\/li>\n<li><strong><code>og:url<\/code><\/strong>: Specifies the canonical URL of the post.<\/li>\n<li><strong><code>og:type<\/code><\/strong>: Defines the type of content, such as an article, video, etc. For blog posts, we use &#8220;article&#8221;.<\/li>\n<\/ul>\n<p>These tags are placed within the <code>&lt;head&gt;<\/code> section of your site\u2019s HTML and are read by social media platforms like Facebook, Twitter, and LinkedIn, among others.<\/p>\n<h4>Step 2: Adding the Code to Your Theme<\/h4>\n<p>Now that you understand the importance of Open Graph tags, let\u2019s add the necessary code to your theme&#8217;s <code>functions.php<\/code> file. If you&#8217;re using a child theme, add the code to the child theme\u2019s <code>functions.php<\/code> file to ensure your changes are not overwritten during future updates to the parent theme.<\/p>\n<ol>\n<li><strong>Access the WordPress Dashboard<\/strong> and go to <strong>Appearance &gt; Theme Editor<\/strong>.<\/li>\n<li><strong>Select the <code>functions.php<\/code> file<\/strong> of your theme or child theme.<\/li>\n<li><strong>Add the following PHP code<\/strong> at the end of the file:<\/li>\n<li>function add_opengraph_tags() {<br \/>\nif (is_single() || is_page()) {<br \/>\nglobal $post;<br \/>\nif (has_post_thumbnail($post-&gt;ID)) {<br \/>\n$img_src = wp_get_attachment_image_src(get_post_thumbnail_id($post-&gt;ID), &#8216;full&#8217;);<br \/>\n} else {<br \/>\n\/\/ Default image URL if the post has no featured image<br \/>\n$img_src = array(&#8216;https:\/\/www.example.com\/default-image.jpg&#8217;);<br \/>\n}\/\/ Post title<br \/>\n$title = get_the_title();<br \/>\n\/\/ Post description<br \/>\n$description = get_the_excerpt();echo &#8216;&lt;meta property=&#8221;og:title&#8221; content=&#8221;&#8216; . esc_attr($title) . &#8216;&#8221;\/&gt;&#8217;;<br \/>\necho &#8216;&lt;meta property=&#8221;og:description&#8221; content=&#8221;&#8216; . esc_attr($description) . &#8216;&#8221;\/&gt;&#8217;;<br \/>\necho &#8216;&lt;meta property=&#8221;og:image&#8221; content=&#8221;&#8216; . esc_url($img_src[0]) . &#8216;&#8221;\/&gt;&#8217;;<br \/>\necho &#8216;&lt;meta property=&#8221;og:url&#8221; content=&#8221;&#8216; . get_permalink() . &#8216;&#8221;\/&gt;&#8217;;<br \/>\necho &#8216;&lt;meta property=&#8221;og:type&#8221; content=&#8221;article&#8221;\/&gt;&#8217;;<br \/>\n}<br \/>\n}<br \/>\nadd_action(&#8216;wp_head&#8217;, &#8216;add_opengraph_tags&#8217;);<\/li>\n<\/ol>\n<h4>Code Explanation:<\/h4>\n<ul>\n<li><strong><code>add_opengraph_tags()<\/code><\/strong>: This function checks if the current page is a post or page and, if so, generates the appropriate Open Graph tags.<\/li>\n<li><strong>Featured Image<\/strong>:\n<ul>\n<li><strong><code>has_post_thumbnail($post-&gt;ID)<\/code><\/strong>: Checks if the post has a featured image set.<\/li>\n<li><strong><code>wp_get_attachment_image_src()<\/code><\/strong>: Retrieves the full-size URL of the featured image. If the post does not have a featured image, a default image is used.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Title and Description<\/strong>:\n<ul>\n<li><strong><code>get_the_title()<\/code><\/strong> and <strong><code>get_the_excerpt()<\/code><\/strong>: Retrieve the post title and description, which are used for the <code>og:title<\/code> and <code>og:description<\/code> tags, respectively.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Canonical URL and Content Type<\/strong>:\n<ul>\n<li><strong><code>get_permalink()<\/code><\/strong>: Retrieves the URL of the current post for the <code>og:url<\/code> tag.<\/li>\n<li><strong><code>og:type<\/code><\/strong>: Set to &#8220;article&#8221; to indicate that the content is an article.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h4>Step 3: Verifying the Implementation<\/h4>\n<p>After adding the code to <code>functions.php<\/code>, it\u2019s important to verify that the Open Graph tags are being generated correctly.<\/p>\n<ol>\n<li><strong>View the page source<\/strong>: On any post or page, right-click and select \u201cView Page Source\u201d or a similar option. Look for the Open Graph tags within the <code>&lt;head&gt;<\/code> section.<\/li>\n<li><strong>Use the Facebook Sharing Debugger<\/strong>:\n<ul>\n<li>Visit the <a href=\"https:\/\/developers.facebook.com\/tools\/debug\/\" target=\"_new\" rel=\"noopener\">Facebook Sharing Debugger<\/a>.<\/li>\n<li>Enter the URL of your post and click &#8220;Debug&#8221;.<\/li>\n<li>Facebook will show the information it detects, including the image, title, and description. This helps identify if the tags are being generated correctly.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h4>Step 4: Troubleshooting Common Issues<\/h4>\n<ul>\n<li><strong>Image Not Displaying<\/strong>: Ensure that the featured image is set on the post. If a default image is used, verify that the image URL is correct and publicly accessible.<\/li>\n<li><strong>Conflicts with Other Plugins<\/strong>: Some SEO or social media plugins may interfere with the generation of Open Graph tags. Try temporarily disabling these plugins to see if the issue persists.<\/li>\n<li><strong>Caching<\/strong>: If you\u2019re using a caching plugin, clear the site\u2019s cache to ensure the new settings are applied.<\/li>\n<\/ul>\n<h4>Summary<\/h4>\n<p>Adding Open Graph tags manually to your WordPress theme using PHP is an excellent way to ensure your content is displayed correctly on social media platforms. With this code, you have full control over how your posts are shared, including which image, title, and description are used. Additionally, you avoid relying on extra plugins, keeping your site lighter and faster.<\/p><div id=\"juand-443265850\" class=\"juand-content_2 juand-entity-placement\"><script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-8944986240478060\"\r\n     crossorigin=\"anonymous\"><\/script>\r\n<ins class=\"adsbygoogle\"\r\n style=\"display:block; text-align:center;\"\r\n data-ad-layout=\"in-article\"\r\n data-ad-format=\"fluid\"\r\n data-ad-client=\"ca-pub-8944986240478060\"\r\n data-ad-slot=\"9601515663\"><\/ins>\r\n<script>\r\n     (adsbygoogle = window.adsbygoogle || []).push({});\r\n<\/script>\r\n<br\/><\/div>\n<p>Now that you\u2019ve configured the Open Graph tags, your posts should be shared correctly on social media, with the featured images appearing as expected. If you have any questions or need further assistance, feel free to leave a comment below!<\/p>\n<p>Photo by <a href=\"https:\/\/www.pexels.com\/photo\/coffee-writing-computer-blogging-34600\/\" target=\"_blank\" rel=\"noopener\">Negative Space<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Open Graph (OG) tags are essential for ensuring that your website content is displayed correctly on social media platforms when shared. These tags help platforms determine which image, title, and description to use when showcasing your content. In this article, you&#8217;ll learn how to add these tags to your WordPress theme using PHP, ensuring that [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3370,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1302,1289],"tags":[],"class_list":["post-3369","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-devs","category-tech"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/blog.juandesouza.com\/wp-content\/uploads\/2024\/08\/pexels-negativespace-34600-scaled-1.jpg?fit=2560%2C1707&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/p8STS8-Sl","jetpack_sharing_enabled":true,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/blog.juandesouza.com\/fr\/wp-json\/wp\/v2\/posts\/3369","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.juandesouza.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.juandesouza.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.juandesouza.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.juandesouza.com\/fr\/wp-json\/wp\/v2\/comments?post=3369"}],"version-history":[{"count":0,"href":"https:\/\/blog.juandesouza.com\/fr\/wp-json\/wp\/v2\/posts\/3369\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.juandesouza.com\/fr\/wp-json\/wp\/v2\/media\/3370"}],"wp:attachment":[{"href":"https:\/\/blog.juandesouza.com\/fr\/wp-json\/wp\/v2\/media?parent=3369"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.juandesouza.com\/fr\/wp-json\/wp\/v2\/categories?post=3369"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.juandesouza.com\/fr\/wp-json\/wp\/v2\/tags?post=3369"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}