{"id":292837,"date":"2021-07-07T14:00:32","date_gmt":"2021-07-07T11:00:32","guid":{"rendered":"https:\/\/en.buradabiliyorum.com\/how-to-add-social-media-embeds-to-your-website-open-graph-meta-tags-cloudsavvy-it\/"},"modified":"2021-07-07T14:00:32","modified_gmt":"2021-07-07T11:00:32","slug":"how-to-add-social-media-embeds-to-your-website-open-graph-meta-tags-cloudsavvy-it","status":"publish","type":"post","link":"https:\/\/buradabiliyorum.com\/en\/how-to-add-social-media-embeds-to-your-website-open-graph-meta-tags-cloudsavvy-it\/","title":{"rendered":"#How to Add Social Media Embeds To Your Website (Open Graph Meta Tags) \u2013 CloudSavvy IT"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a3f7b08644a2\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #dd3333;color:#dd3333\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #dd3333;color:#dd3333\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a3f7b08644a2\" checked aria-label=\"Toggle\" \/><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:\/\/buradabiliyorum.com\/en\/how-to-add-social-media-embeds-to-your-website-open-graph-meta-tags-cloudsavvy-it\/#What_Are_Open_Graph_Meta_Tags\" >What Are Open Graph Meta 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:\/\/buradabiliyorum.com\/en\/how-to-add-social-media-embeds-to-your-website-open-graph-meta-tags-cloudsavvy-it\/#Using_OG_Meta_Tags\" >Using OG Meta 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:\/\/buradabiliyorum.com\/en\/how-to-add-social-media-embeds-to-your-website-open-graph-meta-tags-cloudsavvy-it\/#Debugging_Meta_Tags\" >Debugging Meta Tags<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-add-social-media-embeds-to-your-website-open-graph-meta-tags-cloudsavvy-it\/#Can_You_Generate_Tags_Dynamically\" >Can You Generate Tags Dynamically?<\/a><\/li><\/ul><\/nav><\/div>\n<p><strong>&#8220;#How to Add <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/social-mediaa\/\" data-internallinksmanager029f6b8e52c=\"1\" title=\"Social Media\" target=\"_blank\" rel=\"noopener\">Social Media<\/a> Embeds To Your Website (Open Graph Meta Tags) \u2013 CloudSavvy IT&#8221;<\/strong><\/p>\n<div id=\"article-content-area\">\n<img loading=\"lazy\" decoding=\"async\" class=\"type:primaryImage alignnone size-full wp-image-12397\" src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/07\/1b70d1bf.png?width=1198&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"700\" height=\"350\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>You\u2019ve probably run into these embeds very often without thinking about it\u2014whenever you send someone a link on a social media platform or messaging app, the link expands to include content from the website, usually an image, title, and de<a href=\"https:\/\/buradabiliyorum.com\/en\/category\/download-scripts-themes-apps\/\" data-internallinksmanager029f6b8e52c=\"9\" title=\"Download Scripts &amp; Themes &amp; Apps\" target=\"_blank\" rel=\"noopener\">script<\/a>ion. Here\u2019s how to set that up.<\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"What_Are_Open_Graph_Meta_Tags\"><\/span>What Are Open Graph Meta Tags?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The configuration for these embeds is done using <code>&lt;meta&gt;<\/code>\u00a0tags, usually in the header of your site. There\u2019s a standard for them, originally created at Facebook, called \u201c<a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/ogp.me\/\">the Open Graph Protocol.<\/a>\u201d<\/p>\n<p>The tags will always use the following format, with a \u201cproperty\u201d value set to \u201cog:\u201d followed by the type of tag, and a \u201ccontent\u201d value set to the value of whatever content is on the page:<\/p>\n<pre>&lt;meta property=\"og:type\" content=\"value\" \/&gt;<\/pre>\n<p>For example, a basic setup for most websites looks like the following:<\/p>\n<pre>&lt;meta property=\"og:image\" content=\"https:\/\/i.imgur.com\/imagelink.jpg\"&gt;&#13;\n&lt;meta property=\"og:title\" content=\"Website Title\" \/&gt;&#13;\n&lt;meta property=\"og:description\" content=\"Website Description\" \/&gt;&#13;\n&lt;meta property=\"og:type\" content=\"website\" \/&gt;&#13;\n&lt;meta property=\"og:url\" content=\"https:\/\/example.com\/\" \/&gt;<\/pre>\n<p>This sets the image, title &amp; link, description, and tells sites that it is a website. This results in a simple embed like the following:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-5070 size-full\" src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2020\/06\/9ba0a87f.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"another link expand\" width=\"592\" height=\"320\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>It\u2019s a simple format, but there\u2019s quite a few options that most websites will recognize. You can find the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/ogp.me\/\">full list of them on the Open Graph website<\/a>, but we\u2019ll cover the important ones here.<\/p>\n<p>Twitter will recognize OG tags, but it\u2019s worth noting that they also have their own tags as well which will take priority.<\/p>\n<pre>&lt;meta name=\"twitter:title\" content=\"Website Title\"&gt; &#13;\n&lt;meta name=\"twitter:description\" content=\"Website Description\"&gt; &#13;\n&lt;meta name=\"twitter:image\" content=\"https:\/\/i.imgur.com\/imagelink.jpg\"&gt;<\/pre>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"Using_OG_Meta_Tags\"><\/span>Using OG Meta Tags<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>First, the title. this is an extremely simply tag, but is necessary for everyone. Even if your embed is representing an object instead of a page, it should still have a title explaining what it is.<\/p>\n<pre>&lt;meta property=\"og:title\" content=\"Website Title\" \/&gt;<\/pre>\n<p>Optionally, if your title doesn\u2019t get the job done, you can add an extended description:<\/p>\n<pre>&lt;meta property=\"og:description\" content=\"Website Description\" \/&gt;<\/pre>\n<p>The <code>og:type<\/code>\u00a0tag is also very important, because it tells sites what kind of content you\u2019re linking, and how it should be formatted. It also allows different kinds of optional parameters depending on the type. There are a couple different options:<\/p>\n<ul>\n<li><code>website<\/code>, which is a basic default.<\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/ogp.me\/#type_article\"><code>article<\/code><\/a>, which represents a <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/news\/\" data-internallinksmanager029f6b8e52c=\"2\" title=\"News\" target=\"_blank\" rel=\"noopener\">news<\/a>\/blog post, and has the optional parameters of <code>published_time<\/code> , <code>modified_time<\/code> , <code>author<\/code> , <code>section<\/code> , and <code>tag<\/code> .<\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/ogp.me\/#type_profile\" name=\"type_profile\"><code>profile<\/code><\/a>, which represents a user, and has options for <code>first_name<\/code> , <code>last_name<\/code> , <code>username<\/code> , and <code>gender<\/code>.<\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/ogp.me\/#type_video.other\" name=\"type_video.other\"><code>video.other<\/code><\/a>, which represents a video. There are also tags for <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/watch-movies-tv-seriess\/\" data-internallinksmanager029f6b8e52c=\"8\" title=\"Watch Movies &amp; TV Series\" target=\"_blank\" rel=\"noopener\">movies<\/a> and TV shows, with their own parameters.<\/li>\n<li>Various <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/ogp.me\/#type_music.song\" name=\"type_music.song\"><code>music<\/code><\/a>\u00a0related tags, some of which are whitelisted on sites like Facebook.<\/li>\n<\/ul>\n<p>For optional parameters, you need to add a separate meta property with the parameter name. For example, setting <code>music:duration<\/code>:<\/p>\n<pre>&lt;meta property=\"music:duration\" content=\"60\" \/&gt;<\/pre>\n<p>You\u2019ll also want to set the URL tag to link back to your site.<\/p>\n<pre>&lt;meta property=\"og:url\" content=\"https:\/\/example.com\/\" \/&gt;<\/pre>\n<p>If you want an image to show with your embed, you\u2019ll need to set that as well. Images have a lot of configuration options:<\/p>\n<pre>&lt;meta property=\"og:image\" content=\"https:\/\/example.com\/ogp.jpg\" \/&gt;&#13;\n&lt;meta property=\"og:image:secure_url\" content=\"https:\/\/secure.example.com\/ogp.jpg\" \/&gt;&#13;\n&lt;meta property=\"og:image:type\" content=\"image\/jpeg\" \/&gt;&#13;\n&lt;meta property=\"og:image:width\" content=\"400\" \/&gt;&#13;\n&lt;meta property=\"og:image:height\" content=\"300\" \/&gt;&#13;\n&lt;meta property=\"og:image:alt\" content=\"A shiny red apple with a bite taken out\" \/&gt;<\/pre>\n<p>There\u2019s also\u00a0<code>og:video<\/code>\u00a0and <code>og:audio<\/code> tags that work the same way, but for video and audio respectively.<\/p>\n<p>You can also set the site name manually, if the title doesn\u2019t give that away.<\/p>\n<pre>&lt;meta property=\"og:site_name\" content=\"CloudSavvy IT\" \/&gt;<\/pre>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"Debugging_Meta_Tags\"><\/span>Debugging Meta Tags<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Sending them to yourself to debug isn\u2019t the best idea\u2014many platforms will cache the response, making it harder to make quick changes.<\/p>\n<p>Luckily there are a few great tools like<a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.opengraph.xyz\/\">\u00a0opengraph.xyz<\/a>, where you can put in your link and view the embed response for various platforms.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12398\" src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/07\/94d6c791.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"700\" height=\"314\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>You\u2019ll of course still want to send the link out on each platform to double check it\u2019s working.<\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"Can_You_Generate_Tags_Dynamically\"><\/span>Can You Generate Tags Dynamically?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Of course! Tags are just HTML, and most modern web frameworks are all about rendering dynamic HTML. Though, it needs to be in the header, so it may complicate things for some frameworks focused on writing to the body of the page.<\/p>\n<p>In React, you can do this easily with a package called <code>react-helmet<\/code>, which goes in your main App() component. You can of course use standard JSX syntax to replace any of the values with values from your page\u2019s state.<\/p>\n<pre>import React from \"react\";&#13;\nimport Helmet from \"react-helmet\";&#13;\n&#13;\nfunction App() {&#13;\n  return (&#13;\n    &lt;main&gt;&#13;\n      &lt;Helmet&gt;&#13;\n         &lt;title&gt;Example&lt;\/title&gt;&#13;\n&#13;\n         &lt;meta itemprop=\"name\" content=\"Example\" \/&gt;&#13;\n         &lt;meta property=\"og:title\" content=\"Example\" \/&gt;&#13;\n&#13;\n         &lt;meta itemprop=\"description\" content=\"A description\" \/&gt;&#13;\n         &lt;meta name=\"description\" content=\"A description\" \/&gt;&#13;\n         &lt;meta property=\"og:description\" content=\"A description\" \/&gt;&#13;\n&#13;\n         &lt;meta itemprop=\"image\" content=\"http:\/\/example.com\/example.png\" \/&gt;&#13;\n         &lt;meta property=\"og:image\" content=\"http:\/\/example.com\/example.png\" \/&gt;&#13;\n&#13;\n         &lt;meta property=\"og:url\" content=\"https:\/\/example.com\" \/&gt;&#13;\n         &lt;meta property=\"og:type\" content=\"website\" \/&gt;&#13;\n      &lt;\/Helmet&gt;&#13;\n    &lt;\/main&gt;&#13;\n  );&#13;\n}<\/pre>\n<p>For WordPress, you can configure this with a plugin, or add some PHP to your <code>header.php<\/code>\u00a0file.<\/p>\n<pre>&lt;meta name=\"description\" content=\"&lt;?php if ( is_single() ) {&#13;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0single_post_title('', true);\u00a0&#13;\n\u00a0\u00a0\u00a0\u00a0} else {&#13;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0bloginfo('name'); echo \" - \"; bloginfo('description');&#13;\n\u00a0\u00a0\u00a0\u00a0}&#13;\n\u00a0\u00a0\u00a0\u00a0?&gt;\" \/&gt;<\/pre>\n<p>For other frameworks, they\u2019ll likely support meta tags in some fashion, so you\u2019ll want to check how it works for your application.\n<\/p><\/div>\n<blockquote><p><strong><span style=\"color: #ff6600;\">If you liked the article, do not forget to share it with your friends. Follow us on\u00a0<span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"https:\/\/news.google.com\/publications\/CAAqBwgKMLG0nwswvr63Aw\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Google News<\/a><\/span>\u00a0too, click on the star and choose us from your favorites.<\/span><\/strong><\/p><\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\">For forums sites go to <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/forum.buradabiliyorum.com\/\" target=\"_blank\" rel=\"noopener\">Forum.BuradaBiliyorum.Com<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\"><strong>If you want to read more like this article, you can visit our <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/en.buradabiliyorum.com\/technology\/\" target=\"_blank\" rel=\"noopener\">Technology category.<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<p><span style=\"color: black;\"><a style=\"color: #ff9900;\" href=\"https:\/\/www.cloudsavvyit.com\/12396\/how-to-add-social-media-embeds-to-your-website-open-graph-meta-tags\/\" target=\"_blank\" rel=\"noopener\">Source<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;#How to Add Social Media Embeds To Your Website (Open Graph Meta Tags) \u2013 CloudSavvy IT&#8221; You\u2019ve probably run into these embeds very often without thinking about it\u2014whenever you send someone a link on a social media platform or messaging app, the link expands to include content from the website, usually an image, title, and&#8230;<\/p>\n","protected":false},"author":1,"featured_media":292838,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/07\/1b70d1bf.png","fifu_image_alt":"","footnotes":""},"categories":[18],"tags":[],"class_list":["post-292837","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology"],"_links":{"self":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/292837","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/comments?post=292837"}],"version-history":[{"count":0,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/292837\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media\/292838"}],"wp:attachment":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media?parent=292837"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/categories?post=292837"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/tags?post=292837"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}