{"id":9229,"date":"2026-06-01T09:37:32","date_gmt":"2026-06-01T07:37:32","guid":{"rendered":"https:\/\/mybox.com\/help\/?post_type=manual_kb&#038;p=9229"},"modified":"2026-06-01T09:37:33","modified_gmt":"2026-06-01T07:37:33","slug":"how-to-add-open-graph-to-your-website-in-html-code","status":"publish","type":"manual_kb","link":"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-to-add-open-graph-to-your-website-in-html-code\/","title":{"rendered":"How to add Open Graph to your website in HTML code"},"content":{"rendered":"\n<div class=\"translation-block translation-block-merged\">\n<p class=\"wp-block-paragraph\">Open Graph is a protocol used by social media platforms to generate rich previews when a page is shared. By adding Open Graph meta tags to your HTML, you control how your website appears on platforms like Facebook, LinkedIn, and others.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 ez-toc-wrap-left counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-to-add-open-graph-to-your-website-in-html-code\/#Where_to_add_Open_Graph_tags\" >Where to add Open Graph tags<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-to-add-open-graph-to-your-website-in-html-code\/#Basic_Open_Graph_tags\" >Basic Open Graph tags<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-to-add-open-graph-to-your-website-in-html-code\/#Explanation_of_key_tags\" >Explanation of key tags<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-to-add-open-graph-to-your-website-in-html-code\/#og_title\" >og:title<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-to-add-open-graph-to-your-website-in-html-code\/#og_description\" >og:description<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-to-add-open-graph-to-your-website-in-html-code\/#og_image\" >og:image<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-to-add-open-graph-to-your-website-in-html-code\/#og_url\" >og:url<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-to-add-open-graph-to-your-website-in-html-code\/#Optional_Open_Graph_tags\" >Optional Open Graph tags<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-to-add-open-graph-to-your-website-in-html-code\/#Best_practices\" >Best practices<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-to-add-open-graph-to-your-website-in-html-code\/#Why_Open_Graph_is_important\" >Why Open Graph is important<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-to-add-open-graph-to-your-website-in-html-code\/#Summary\" >Summary<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Where_to_add_Open_Graph_tags\"><\/span>Where to add Open Graph tags<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Open Graph meta tags are placed inside the <code>&lt;head&gt;<\/code> section of your HTML document.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Basic_Open_Graph_tags\"><\/span>Basic Open Graph tags<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<\/div>\n\n<div id=\"mybox-995280168\" class=\"mybox-content mybox-entity-placement\"><div class=\"early-access-banner-inpost\">\r\n  <div class=\"banner-left-inpost\">\r\n    <div class=\"icon-box-inpost\">\r\n      <img decoding=\"async\" src=\"https:\/\/mybox.com\/help\/wp-content\/uploads\/2026\/02\/square-info-icon.svg\" alt=\"Info\">\r\n    <\/div>\r\n    <div class=\"text-box-inpost\">\r\n      <span class=\"label-inpost\"><span class=\"translation-block translation-block-banner-text\">Early access<\/span><\/span>\r\n      <h4><span class=\"translation-block translation-block-banner-text\">Still need help?<\/span><\/h4>\r\n      <p><span class=\"translation-block translation-block-banner-text\">Contact our customer service team.<\/span><\/p>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"banner-right-inpost\">\r\n    <a href=\"https:\/\/panel.mybox.com\/helpdesk2\/v\/list\/\" class=\"banner-button-inpost\"><span class=\"translation-block translation-block-banner-text\">Message us<\/span><\/a>\r\n  <\/div>\r\n<\/div><\/div>\n\n<div class=\"translation-block translation-block-merged\"><p class=\"wp-block-paragraph\">Here is an example of commonly used Open Graph tags:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;meta property=\"og:title\" content=\"Page Title\" \/&gt;\n&lt;meta property=\"og:description\" content=\"Page description\" \/&gt;\n&lt;meta property=\"og:image\" content=\"https:\/\/example.com\/image.jpg\" \/&gt;\n&lt;meta property=\"og:url\" content=\"https:\/\/example.com\/page\" \/&gt;\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Explanation_of_key_tags\"><\/span>Explanation of key tags<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"og_title\"><\/span>og:title<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Defines the title of the page as it will appear when shared.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"og_description\"><\/span>og:description<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Provides a short description of the page content.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"og_image\"><\/span>og:image<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Specifies the image that will be displayed in the preview.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"og_url\"><\/span>og:url<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Defines the canonical URL of the page.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Optional_Open_Graph_tags\"><\/span>Optional Open Graph tags<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You can also add additional metadata such as:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>og:type<\/code> \u2013 defines the type of content (e.g., website, article)<\/li>\n\n\n\n<li><code>og:site_name<\/code> \u2013 name of your website<\/li>\n\n\n\n<li><code>og:locale<\/code> \u2013 language and region settings<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;meta property=\"og:type\" content=\"website\" \/&gt;\n&lt;meta property=\"og:site_name\" content=\"My Website\" \/&gt;\n&lt;meta property=\"og:locale\" content=\"en_US\" \/&gt;\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Best_practices\"><\/span>Best practices<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use high-quality images (recommended size: 1200\u00d7630 px)<\/li>\n\n\n\n<li>Ensure URLs are absolute (include https:\/\/)<\/li>\n\n\n\n<li>Keep titles and descriptions clear and concise<\/li>\n\n\n\n<li>Make sure each page has unique Open Graph data<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Why_Open_Graph_is_important\"><\/span>Why Open Graph is important<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Open Graph improves how your content appears on social media by:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>increasing click-through rates<\/li>\n\n\n\n<li>improving content visibility<\/li>\n\n\n\n<li>providing better previews for shared links<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Summary\"><\/span>Summary<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Open Graph meta tags are added inside the HTML <code>&lt;head&gt;<\/code> section and define how your website appears when shared on social platforms. Proper configuration helps improve presentation, engagement, and visibility of your content.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"template":"","format":"standard","manualknowledgebasecat":[42],"manual_kb_tag":[368,3052,5674,5743,5744,5752,5753,5754,5755,5756],"class_list":["post-9229","manual_kb","type-manual_kb","status-publish","format-standard","hentry","manualknowledgebasecat-miscellaneous","manual_kb_tag-website-optimization","manual_kb_tag-meta-tags","manual_kb_tag-page-title","manual_kb_tag-open-graph","manual_kb_tag-open-graph-tags","manual_kb_tag-social-media","manual_kb_tag-rich-previews","manual_kb_tag-head-section","manual_kb_tag-page-description","manual_kb_tag-page-image"],"_links":{"self":[{"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb\/9229","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb"}],"about":[{"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/types\/manual_kb"}],"author":[{"embeddable":true,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":1,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb\/9229\/revisions"}],"predecessor-version":[{"id":9230,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb\/9229\/revisions\/9230"}],"wp:attachment":[{"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/media?parent=9229"}],"wp:term":[{"taxonomy":"manualknowledgebasecat","embeddable":true,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manualknowledgebasecat?post=9229"},{"taxonomy":"manual_kb_tag","embeddable":true,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb_tag?post=9229"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}