{"id":6064,"date":"2024-04-14T13:30:43","date_gmt":"2024-04-14T05:30:43","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=6064"},"modified":"2024-04-14T13:30:43","modified_gmt":"2024-04-14T05:30:43","slug":"regulate-the-appearance-of-social-shares-with-open-graph","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/regulate-the-appearance-of-social-shares-with-open-graph\/","title":{"rendered":"Regulate the appearance of social shares with Open Graph"},"content":{"rendered":"\n<div class=\"docs_rich-text w-richtext\">\n<p>Open Graph (OG) is a system that social platforms like Facebook, LinkedIn, Twitter, etc., utilize to extract data from your website when you share its URL on those platforms. You have the ability to define the information displayed in your site\u2019s link previews through Open Graph settings.\u00a0<\/p>\n<h6><strong>Key point to remember:<\/strong> In case you have not configured your Open Graph settings, random content (or no content) will be displayed when your site is shared on social media.\u00a0<\/h6>\n<p>This guide will teach you:\u00a0<\/p>\n<ol role=\"list\">\n<li>Setting up Open Graph tags<\/li>\n<li>Arranging dynamic Open Graph tags<\/li>\n<li>Testing and rectifying Open Graph settings<\/li>\n<li>Solving issues with missing Open Graph images<\/li>\n<\/ol>\n<h2>How to establish Open Graph tags<\/h2>\n<p>In Webflow, you can define 3 Open Graph tags:\u00a0<\/p>\n<ul role=\"list\">\n<li><strong>Open Graph title<\/strong> \u2014 text exhibited as the page\u2019s title when the page\u2019s URL is shared<\/li>\n<li><strong>Open Graph description<\/strong> \u2014 a textual representation that appears below the title and provides an outline of the page\u2019s content<\/li>\n<li><strong>Open Graph image<\/strong> \u2014 an image showcased above the title and description<\/li>\n<\/ul>\n<h6><strong>Useful tip: <\/strong>Open Graph content is most effective when it is tailored to the specific page being shared. For instance, the Open Graph content for your homepage should differ from that of your pricing page. Open Graph tags cannot be applied globally and are exclusive to the designated page \u2014 hence, setting Open Graph tags for each page is a recommended practice.<\/h6>\n<p>You can access and adjust the Open Graph settings for a page by navigating to <strong>Pages panel<\/strong> &gt; <strong>Page settings<\/strong> &gt; <strong>Open Graph settings<\/strong>.<\/p>\n<h6><strong>Pro hint: <\/strong>On websites with Localization activated, you can localize your page-level Open Graph settings. Find out more about localizing Open Graph settings.\u00a0<\/h6>\n<h3>Open Graph title and description\u00a0<\/h3>\n<p>You can manually input an Open Graph title and description, or retrieve them from your SEO title and meta description by ticking the checkboxes below each Open Graph field.\u00a0<\/p>\n<h3>Open Graph image<\/h3>\n<p>To specify an Open Graph image, provide a direct link to an image (i.e., a URL ending with the image&#8217;s filename and extension).\u00a0<\/p>\n<p>To utilize an image from the Asset panel in the Open Graph image field:\u00a0<\/p>\n<ol role=\"list\">\n<li>Hover over the image in the <strong>Asset panel<\/strong><\/li>\n<li>Click on the settings \u201c<strong>cog<\/strong>\u201d icon that appears<\/li>\n<li>Right-click on the \u201c<strong>link<\/strong>\u201d icon next to the asset name in the Asset details menu<\/li>\n<li>Copy the link\u00a0<\/li>\n<li>Paste the link in the <strong>Open Graph image<\/strong> field<\/li>\n<\/ol>\n<p><strong>Discover more:<\/strong> Optimize images to enhance site previews<\/p>\n<h2>How to configure dynamic Open Graph tags<\/h2>\n<p>On Collection pages, you can establish a template that all pages in a Collection will adhere to for their Open Graph details. This way, instead of manually setting the Open Graph title for each Collection item, all items in the Collection will auto-generate their Open Graph title, description, and image based on the set template. For instance, with a Collection of blog posts, you can employ dynamic data to extract content from your post\u2019s name or title Collection field in your Open Graph settings.<\/p>\n<p>Similar to static pages, you can edit this information by navigating to <strong>Pages panel<\/strong> &gt; <strong>Page settings<\/strong> &gt; <strong>Open Graph settings<\/strong>.\u00a0<\/p>\n<h3>Open Graph title and description\u00a0<\/h3>\n<p>To preload your Open Graph title and description fields with dynamic data from a Collection field, click on <strong>Add field<\/strong>.\u00a0<\/p>\n<p>You can also manually enter an Open Graph title and description, or fetch your Open Graph title and description from your SEO title and meta description by selecting the checkboxes below each Open Graph field.\u00a0\u00a0<\/p>\n<h3>Open Graph image<\/h3>\n<p>To assign an Open Graph image on a Collection page, select the <strong>Open Graph image<\/strong> dropdown and pick an <strong>Image<\/strong> field from your Collection (e.g., main image, thumbnail image, etc.). If your Collection lacks an Image field, you won\u2019t be able to designate an Open Graph image.<\/p>\n<h6><strong>Notice: <\/strong>All Open Graph images in a Collection must possess identical dimensions.\u00a0<\/h6>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94af42463a29b9b98d384_649b063e43d2460683607b3f_fdfhkqtwb6jrcyydk1stl1wp0_qh3cang6m0n0luzyq6joucdsnhsb5qehwpi2kfds-qjhfdmjk0jnzquytb9r7kwsafmhswlhfow8hq5riccj1nuf7jz08rycwqi0crjnbsi3rueeoao4n8il5jek\" alt=\"The Open Graph settings for a Collection template page displays a preview of the Open Graph content.\" title=\"64b94af42463a29b9b98d384_649b063e43d2460683607b3f_fdfhkqtwb6jrcyydk1stl1wp0_qh3cang6m0n0luzyq6joucdsnhsb5qehwpi2kfds-qjhfdmjk0jnzquytb9r7kwsafmhswlhfow8hq5riccj1nuf7jz08rycwqi0crjnbsi3rueeoao4n8il5jek\"><\/div><figcaption><em>Collection Template pages allow you to define Open Graph content using dynamic data from Collection fields, making the Open Graph content pertinent to each item in your Collection.<\/em><\/figcaption><\/figure>\n<h2>How to examine and rectify Open Graph settings<\/h2>\n<p>It might be beneficial to preview your links before sharing them to comprehend how they will be displayed on social media platforms or update your Open Graph content if outdated data appears in your link preview.<\/p>\n<p>Several popular social media platforms offer their own tools for previewing, debugging, and refreshing your Open Graph data:\u00a0<\/p>\n<ul role=\"list\">\n<li>Facebook<\/li>\n<li>LinkedIn<\/li>\n<li>Twitter<\/li>\n<\/ul>\n<h6><strong>Notice: <\/strong>Pinterest and Instagram lack tools dedicated to validating Open Graph data. Facebook\u2019s debugger tool can be utilized to check the potential display of your site on these platforms. Access to the Facebook debugger requires you to be logged into Facebook.<\/h6>\n<h3>Facebook\u00a0<\/h3>\n<p>Facebook offers its own debugger tool, allowing you to scrape (i.e., index) your link and retrieve the most recent Open Graph data.\u00a0<\/p>\n<p>To utilize the Facebook debugger, insert your link and tap on <strong>Debug<\/strong>. If the displayed data is outdated following changes to your Open Graph settings, select <strong>Scrape Again<\/strong> to refresh the data.\u00a0<\/p>\n<h6><strong>Notice: <\/strong>Accessing the Facebook debugger requires you to be logged into Facebook.<\/h6>\n<h3>LinkedIn<\/h3>\n<p><a href=\"https:\/\/www.linkedin.com\/post-inspector\/\">LinkedIn\u2019s Post Inspector<\/a> enables you to request a re-scrape of your link, view when LinkedIn last updated the link preview, and resolve issues related to your Open Graph data.\u00a0<\/p>\n<p>To make use of the LinkedIn Post Inspector, insert your link and click on <strong>Inspect<\/strong>. You can click on a property (e.g., Title, Type, Image, etc.) to gain insights into how LinkedIn chose the value.\u00a0<\/p>\n<h6><strong>Notice: <\/strong>Accessing the LinkedIn Post Inspector requires you to be logged into LinkedIn.\u00a0<\/h6>\n<h3>Twitter<\/h3>\n<p>Twitter\u2019s Card Validator provides a Log containing debug information about the Open Graph data of your link. To utilize the Twitter Card Validator, insert your link and click on <strong>Preview card<\/strong>.\u00a0<\/p>\n<p>Twitter no longer displays a preview of your link within the Card Validator. To view how your link will appear when shared on Twitter, compose a tweet and insert your link.\u00a0<\/p>\n<h6><strong>Notice: <\/strong>Accessing the Card Validator and Tweet Composer on Twitter requires you to be logged into your Twitter account.<\/h6>\n<h2>How to resolve missing Open Graph images<\/h2>\n<p>When sharing a link to your site on Facebook, you might observe that the link preview only contains a title and description, while the image set in your Open Graph settings is absent.\u00a0<\/p>\n<p>This usually occurs when a page is shared and the preview is generated for the first time, but this issue can be resolved by removing and re-adding the link in your post. However, adopting a few best practices can prevent this problem from arising:\u00a0<\/p>\n<ol role=\"list\">\n<li>Maintain uniform dimensions for all Open Graph images on your site. Facebook suggests utilizing images with a minimum width of 1080 pixels. Check out Facebook\u2019s recommendations for sharing images.\u00a0<\/li>\n<li>Precache your images by running the link through the Facebook debugger tool. This should be done after updating your Open Graph image as well.\u00a0<\/li>\n<li>Utilize Open Graph tags to specify the dimensions of your images to the web crawler. This facilitates immediate rendering of the image by the web crawler without the need for asynchronous downloading and processing. Insert the following code snippet in <strong>Site settings<\/strong> &gt; <strong>Custom code<\/strong> tab &gt; <strong>Head code<\/strong> section, altering the width and height values to match the pixel values of the images on your site (assuming a consistent dimension for all Open Graph images):\u00a0<\/li>\n<\/ol>\n<div class=\"w-embed\">\n<div class=\"code-block\">\n<pre class=\"code-block_body\"><code id=\"snippet1\" class=\"code-block_code\">\n    &lt;meta property=\"og:image:width\" content=\"1200\"&gt;\n    &lt;meta property=\"og:image:height\" content=\"630\"&gt;\n    <\/code><\/pre>\n<\/div>\n<\/div>\n<p>\u200dLearn more about implementing custom code in your site\u2019s head and body tags.\u00a0<\/p>\n<h6><strong>Useful tip to remember:<\/strong> In case you are using Open Graph images with varied dimensions across your site, insert the above code snippet in <strong>Pages panel<\/strong> &gt; <strong>Page settings<\/strong> &gt; <strong>Inside &lt;head&gt; tag<\/strong> rather than within your Site settings. Every Open Graph image within a Collection must maintain identical dimensions.\u00a0<\/h6>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Edit your site\u2019s Open Graph settings to customize your link previews.","protected":false},"author":2,"featured_media":5151,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[286],"tags":[],"class_list":{"0":"post-6064","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-site-settings","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6064","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=6064"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6064\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5200"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=6064"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=6064"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=6064"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}