{"id":11598,"date":"2022-03-02T08:21:51","date_gmt":"2022-03-02T08:21:51","guid":{"rendered":"https:\/\/kwebby.com\/blog\/?p=11598"},"modified":"2024-08-03T15:12:10","modified_gmt":"2024-08-03T15:12:10","slug":"social-media-meta-tags","status":"publish","type":"post","link":"https:\/\/kwebby.com\/blog\/social-media-meta-tags\/","title":{"rendered":"Ultimate Guide to Generate Social Media Meta Tags for Your Website"},"content":{"rendered":"\n<p>Do you want your blog posts to look their best when shared on social media? Do your links on social media look weird or not so user-friendly? If so, you need to generate social media meta tags for your website.<\/p>\n\n\n\n<p>This can be done easily with the help of a few codes in your &lt;head&gt; section or you can also use free tools.<\/p>\n\n\n\n<p>In this blog post, we will discuss what social media meta tags are and how to create them. We will also provide a few tips on how to get the most out of your meta tags for social media.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-are-social-media-meta-tags\">What are Social Media Meta Tags?<\/h2>\n\n\n\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/O5f7CSfxKVI?si=oNxE4ytz4-hqEpvS\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n\n\n\n<p>Social media <a href=\"https:\/\/kwebby.com\/blog\/meta-tags-seo\/\">meta tags<\/a> are codes that you put in the header of your website in order to control how your blog post looks when it is shared on social media.<\/p>\n\n\n\n<p>Basically, All these social media platforms scan these meta tags on the header of your page and display your website&#8217;s link according to tags like title, description, author and images mentioned in the &lt;head&gt; tags.<\/p>\n\n\n\n<p>Social media mainly uses Open Graph Tags to display your links with the thumbnail, title, description, author and other tags but twitter prefers to use their own meta tags i.e. Twitter cards.<\/p>\n\n\n\n<p>Therefore, we have categorised Social media tags into two parts;<\/p>\n\n\n\n<p><strong>-Twitter Card Tags<\/strong><\/p>\n\n\n\n<p>Learn, <a href=\"https:\/\/kwebby.com\/blog\/add-twitter-card-meta-data-wordpress\/\">How to Add Twitter Card Meta Data in WordPress (Without Plugin)<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"635\" height=\"132\" src=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/twitter-card.png\" alt=\"twitter cards\" class=\"wp-image-11600\" title=\"\" srcset=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/twitter-card.png 635w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/twitter-card-300x62.png 300w\" sizes=\"auto, (max-width: 635px) 100vw, 635px\" \/><\/figure>\n\n\n\n<p><strong>-Facebook Open Graph Tags<\/strong><\/p>\n\n\n\n<p>Learn, <a href=\"https:\/\/kwebby.com\/blog\/og-tags-wordpress-without-plugin\/\">How to add OG (Open Graph) tags in WordPress Without Plugin (Easy Way)<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"134\" src=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/opengraph.png\" alt=\"open graph \" class=\"wp-image-11601\" title=\"\" srcset=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/opengraph.png 640w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/opengraph-300x63.png 300w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n\n\n\n<p>We will discuss the above in detail below.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"why-is-it-important-for-seo\">Why is it Important for SEO?<\/h2>\n\n\n\n<p><a href=\"https:\/\/moz.com\/blog\/your-guide-to-social-signals-for-seo\" target=\"_blank\" rel=\"noreferrer noopener\">Social signals are impactful <\/a>in your search engine optimization game, It not only increase your <a href=\"https:\/\/ahrefs.com\/website-authority-checker\" target=\"_blank\" rel=\"noreferrer noopener\">domain&#8217;s authority<\/a> but also boosts your brand awareness. But on contrary, it does not impact directly to your rankings but social media is indeed one major factor for ranking.<\/p>\n\n\n\n<p>So if Social media tags do not influence the SEO of your website, why should you bother using them?<\/p>\n\n\n\n<p>Well, Social media is one of the biggest sources to drive traffic to your website and having a good-looking link on Social Media can help increase user engagement and CTR. And since <a href=\"https:\/\/chrissniderdesign.com\/blog\/resources\/social-media-statistics\/#:~:text=monthly%20active%20users.-,Oct.,145%20million%20monetizable%20daily%20users.\" target=\"_blank\" rel=\"noreferrer noopener\">Facebook and Twitter are used by millions of users<\/a>, it is a great way for your website to get some extra traffic.<\/p>\n\n\n\n<p>Therefore, <a href=\"https:\/\/kwebby.com\/blog\/seo\/\">it&#8217;s not for SEO<\/a> but it&#8217;s for the traffic you going to get from these platforms. If adding little codes on your webpage gets you more traffic, engagement.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"open-graph-data-facebook\">Open Graph Data \/ Facebook<\/h2>\n\n\n\n<p><a href=\"https:\/\/ahrefs.com\/blog\/open-graph-meta-tags\/\" target=\"_blank\" rel=\"doFollow noopener\">Open Graph Tags<\/a> or we call it OG!<\/p>\n\n\n\n<p>In this section, we will discuss various open graph tags which are being used on Facebook and accepted on other social media platforms to make your web links rich object in a social graph.<\/p>\n\n\n\n<p>First thing first, you need to write down what you want your social followers to see when you share your web pages on Facebook.<\/p>\n\n\n\n<p>For example, If you have a general website\/blog where you write content like news, tutorials, blogs etc, then you may want to share meta titles, descriptions, thumbnails or maybe author names.<\/p>\n\n\n\n<p>But on the other hand, if you have a website that shares media content like videos and audios or podcasts, then you may want to add meta tags like title, audio\/videos, description or cover images right?<\/p>\n\n\n\n<p>Therefore, if you figure things out then do browse the available meta tags of open graph protocols below or if you want to dug deep then you can browse the full list with good <a href=\"https:\/\/ogp.me\/\" target=\"_blank\" rel=\"noreferrer noopener\">documentation here<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"basic-meta-tags-for-facebook\">Basic Meta Tags for Facebook<\/h3>\n\n\n\n<p>In this section, We will talk about the basic meta tags which are being used for Facebook of open graph for general websites\/blogs i.e. Title, Description, image.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Title<\/strong>:- The title is the most important social media meta tag for any webpages. It represents what your page is all about and we suggest to make it as catchy as possible to grab the attention of your facebook followers;<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;meta property=\"og:title\" content=\"Awesome title\" \/&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Description<\/strong>:- The description is also an important social media meta data for websites\/blogs. The recommended length is up to 100 characters but we recommend to make it as short and precise as possible;<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;meta property=\"og:description\" content=\"This is an awesome description which will be displayed on your social pages.\" \/&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Type<\/strong>:- The type social meta tag is used to declare the kind of content on your page. The following are the types which Facebook understands;- Article, Blog, Book, Business Page, Event, Movie, Music Album, Product, Recipe, TV Show;<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;meta property=\"og:type\" content=\"blog\" \/&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>URL<\/strong>:- The og:url is the canonical URL for your web page. This means that if you share a link on Facebook, it will use this tag to generate the preview. If you have multiple versions of a page (i.e. mobile and desktop), then we recommend using the canonical version as the og:URL;<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;meta property=\"og:url\" content=\"https:\/\/www.kwebby.com\/blog\/social-media-meta-tags\" \/&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Image<\/strong>:- Who loves a link preview without an image right? Facebook looks for the Open Graph Image tag to generate a preview of your link. So make sure you have an image in this tag or else it will display other images from your website randomly which may not be good;<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;meta property=\"og:image\" content=\"https:\/\/myawesomesite.com\/image.jpg\" \/&gt;<\/code><\/pre>\n\n\n\n<p>You can add multiple images but keep facebook&#8217;s default size in mind such that it won&#8217;t look weird or out of focus.<\/p>\n\n\n\n<p>Therefore, the final output of your basic social media meta tags looks like below;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;meta property=\"og:title\" content=\"Awesome title\" \/&gt;\n\n&lt;meta property=\"og:description\" content=\"This is an awesome description which will be displayed on your social pages.\" \/&gt;\n\n&lt;meta property=\"og:type\" content=\"blog\" \/&gt;\n\n&lt;meta property=\"og:url\" content=\"https:\/\/www.kwebby.com\/blog\/social-media-meta-tags\" \/&gt;\n\n&lt;meta property=\"og:image\" content=\"https:\/\/myawesomesite.com\/image.jpg\" \/&gt;<\/code><\/pre>\n\n\n\n<p>So now you have all the prerequisites required to display your webpage links full of rich objects such as title, images, URL etc.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"optional-meta-tags-for-facebook\"><strong>Optional Meta Tags for Facebook<\/strong><\/h3>\n\n\n\n<p>Apart from basic meta tags, open graph offers much more for media based content websites i.e. Audios and Videos, Therefore, in this section we will discover the meta tags that can enhance your web links with these tags.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>site_name<\/strong>:- You can use this to declare the name of your website. It is useful when you have a brand that spans multiple pages on Facebook and it looks like below;<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;meta property=\"og:site_name\" content=\"Kwebby\" \/&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>video<\/strong>:- If you have a video content and want to share on <a href=\"https:\/\/kwebby.com\/blog\/how-to-use-meta-ai-on-facebook\/\"  data-wpil-monitor-id=\"1201\">facebook then video meta<\/a> tag will be the right option for you. This is optional as you can also use the play icon on your thumbnail which is being explained in this blog, anyways, to us the video tag following is the code for you;<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;meta property=\"og:video\" content=\"https:\/\/kwebby.com\/movie.swf\" \/&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>audio<\/strong>:- Do you own a podcast or music sharing website? want to share the audio previews to your facebook followers? then this is the right tag for you to share audio file using the following code;<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;meta property=\"og:audio\" content=\"https:\/\/example.com\/bond\/theme.mp3\" \/&gt;<\/code><\/pre>\n\n\n\n<p>Best practice is to link the preview of your media i.e. audio or video such that it wont cause much of your server&#8217;s bandwidth and redirect the users to your website to watch the full content, in this way, you will increase CTR (Click-through-ratio) on your social links.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>locale<\/strong>:- og:locale tag is being used for geo specific website or multi languages websites that share content in different languages such as french for france, Spanish for spain and german for Germany etc, they can use this tag to specify in language_COUNTRY format like below;<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;meta property=\"og:locale\" content=\"en_GB\" \/&gt;<\/code><\/pre>\n\n\n\n<p>Keep in mind that the default value is en_US which is english for united states but if you have something otherwise then you can specify in the tag above, also you can add multiple language with the :alternate tag as below;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;meta property=\"og:locale:alternate\" content=\"fr_FR\" \/&gt;<\/code><\/pre>\n\n\n\n<p>&#8211; <strong>fb:app_id<\/strong>:- This tag is popular among Facebook Advertisers who track the traffic they get from facebook to their sites. To utilize Facebook Insights, you must include the app ID to your website. You may see analytics for traffic to your site from Facebook using Insights. The app ID may be found in your App Dashboard;<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Pro Tip: If you want to see how your webpage looks on Facebook, you can use our <a href=\"https:\/\/kwebby.com\/open-graph-checker\" target=\"_blank\" rel=\"noopener\">Open Graph Checker tool <\/a>or facebook&#8217;s <a href=\"https:\/\/developers.facebook.com\/tools\/debug\/?\" target=\"_blank\" rel=\"noreferrer noopener\">sharing debugger tool <\/a>to analyse and fix the issues how your page&#8217;s content being displayed on their platform.<\/strong><\/p>\n<\/blockquote>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"475\" src=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/Screenshot-32-1024x475.png\" alt=\"output\" class=\"wp-image-11604\" title=\"\" srcset=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/Screenshot-32-1024x475.png 1024w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/Screenshot-32-300x139.png 300w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/Screenshot-32-768x357.png 768w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/Screenshot-32-1536x713.png 1536w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/Screenshot-32.png 1676w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>There are many more Open Graph tags that you can use for your web pages which is being explained in detail on their official webpage or you can also refer to the Facebook guide of <a href=\"https:\/\/developers.facebook.com\/docs\/sharing\/webmasters\/#markup\" target=\"_blank\" rel=\"noreferrer noopener\">Open Graph Markup<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"meta-tags-for-twitter\">Meta Tags for Twitter<\/h2>\n\n\n\n<p>Twitter uses its own meta markup to display links which are also known as Twitter cards. With Twitter Cards, you can attach rich media like images, videos, app cards to let users download directly, audio, metadata to add extra juice on your links to be shared on their platform.<\/p>\n\n\n\n<p>There are various meta tags for twitter which is being discussed in following tables;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>twitter:card<\/strong>:- This is the basic card markup that you need to use for twitter, to identifies the type of link&#8217;s content with properties namely, summary, summary_large_image, player and app;<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;meta property=\"twitter:card\" content=\"summary_large_image\"&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>twitter:title<\/strong>:- This will be used as the title of your tweet and it should not exceed 120 characters.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;meta property=\"twitter:title\" content=\"Your awesome title in 120 characters\"&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>twitter:description<\/strong>:- This will be used as a brief description of your website and it is recommended to not exceed 200 characters;<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;meta property=\"twitter:description\" content=\"Your awesome description up to 200 characters\"&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>twitter:url<\/strong>:- This is the URL of your shared article or webpage, this will be used as a permanent link to your website that can be re-shared by others on twitter. It must match with og:url meta tag mentioned earlier in facebook&#8217;s open graph markup;<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;meta property=\"twitter:url\" content=\"https:\/\/kwebby.com\/\"&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>twitter:image<\/strong>:- This is the image which will be used as a thumbnail for your tweet, it should be in jpeg or png format and must not exceed 440&#215;220 pixels;<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;meta property=\"twitter:image\" content=\"https:\/\/kwebby.com\/yourimage.png\"&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>twitter:creator<\/strong>:- This will be used to show the Twitter profile of the person or company who has shared your content on their platform, you can either use twitter username or email address;<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;meta name=\"twitter:creator\" content=\"@kwebbydigital\" \/&gt;<\/code><\/pre>\n\n\n\n<p><strong>Note<\/strong>: Like facebook, Twitter also has card validator tool from where you can check if the social markup for your page is working properly or not <a href=\"https:\/\/cards-dev.twitter.com\/validator\" rel=\"noreferrer noopener\" target=\"_blank\">by going here<\/a>, just enter your page link and let the tool check it for you.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"final-output\">Final Output<\/h2>\n\n\n\n<p>Now we have covered the both social media meta tags for you, but when we combine both it should look like below;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>&lt;!-- meta tags --&gt;<\/strong>\n&lt;title&gt;Your Page title&lt;\/title&gt;\n&lt;meta name=\"description\" content=\"your awesome description\"&gt;\n\n<strong>&lt;!-- Open Graph \/ Facebook --&gt;<\/strong>\n&lt;meta property=\"og:title\" content=\"Awesome title\" \/&gt;\n&lt;meta property=\"og:description\" content=\"This is an awesome description which will be displayed on your social pages.\" \/&gt;\n&lt;meta property=\"og:type\" content=\"blog\" \/&gt;\n&lt;meta property=\"og:url\" content=\"https:\/\/www.kwebby.com\/blog\/social-media-meta-tags\" \/&gt;\n&lt;meta property=\"og:image\" content=\"https:\/\/myawesomesite.com\/image.jpg\" \/&gt;\n\n<strong>&lt;!-- Twitter --&gt;<\/strong>\n&lt;meta property=\"twitter:card\" content=\"summary_large_image\"&gt;\n&lt;meta property=\"twitter:title\" content=\"Your awesome title in 120 characters\"&gt;\n&lt;meta property=\"twitter:description\" content=\"Your awesome description up to 200 characters\"&gt;\n&lt;meta property=\"twitter:url\" content=\"https:\/\/kwebby.com\/\"&gt;\n&lt;meta property=\"twitter:image\" content=\"https:\/\/kwebby.com\/yourimage.png\"&gt;&lt;meta name=\"twitter:creator\" content=\"@kwebbydigital\" \/&gt;<\/code><\/pre>\n\n\n\n<p><strong>Note<\/strong>: To learn more about primary meta tags you can learn<a href=\"https:\/\/kwebby.com\/blog\/meta-tags-seo\/\" target=\"_blank\" rel=\"noopener\"> from this guide <\/a>for the same.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"open-graph-data-and-twitter\">Open Graph Data and Twitter<\/h2>\n\n\n\n<p>Open Graph Data and Twitter Cards are two different Social Media Meta tags but both work for the same purpose which is to make your shared links looks great with title, description, thumbnail image and sometimes with extra data like author name, website name or profile etc.<\/p>\n\n\n\n<p>You might be thinking that it&#8217;s too much work for just a social share, but trust me it&#8217;s worth it because if you do it correctly then your website or blog post will look great on Social media and people will be more likely to click on them.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"tools-for-social-media-meta-tags\">Tools For Social Media Meta Tags<\/h2>\n\n\n\n<h3 class=\"wp-block-heading has-text-align-left\" id=\"method-1-kwebby-s-open-graph-checker-and-generator-tool\">Method 1: Kwebby&#8217;s Open Graph Checker and Generator Tool<\/h3>\n\n\n\n<p>We have an in-house tool to check if your web page has any social media tags or not using the Kwebby Open Graph Checker tool.<\/p>\n\n\n\n<p>All you need to do is copy and enter your webpage&#8217;s URL, <a href=\"https:\/\/kwebby.com\/open-graph-checker\">go to the tool page<\/a> and paste it the form below;<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"496\" height=\"298\" src=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/checker-tool.png\" alt=\"\" class=\"wp-image-11605\" title=\"\" srcset=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/checker-tool.png 496w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/checker-tool-300x180.png 300w\" sizes=\"auto, (max-width: 496px) 100vw, 496px\" \/><\/figure>\n\n\n\n<p>Now, Click on &#8220;Submit&#8221; and the tool will check if OG tags are injected in your webpage&#8217;s header or not, if its available, it will revert the outcome like below;<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"772\" height=\"364\" src=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/output.png\" alt=\"\" class=\"wp-image-11606\" title=\"\" srcset=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/output.png 772w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/output-300x141.png 300w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/output-768x362.png 768w\" sizes=\"auto, (max-width: 772px) 100vw, 772px\" \/><\/figure>\n\n\n\n<p>Now, if it says &#8220;No Open Graph Tags found&#8221;, then you need to generate one using the Open Graph Generator Tool.<\/p>\n\n\n\n<p><a href=\"https:\/\/kwebby.com\/open-graph-generator\">Generating Open graph tags <\/a>are not rocket science you can do it just by typing some details about your page which are mentioned on the tool page;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"982\" height=\"800\" src=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/GENERATOR.png\" alt=\"\" class=\"wp-image-11607\" title=\"\" srcset=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/GENERATOR.png 982w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/GENERATOR-300x244.png 300w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/GENERATOR-768x626.png 768w\" sizes=\"auto, (max-width: 982px) 100vw, 982px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>You can view and select multiple options like number of images, page type, title, description, Image URLs etc and you can view your output just below the form;<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"945\" height=\"158\" src=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/copy-code.png\" alt=\"\" class=\"wp-image-11608\" title=\"\" srcset=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/copy-code.png 945w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/copy-code-300x50.png 300w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/copy-code-768x128.png 768w\" sizes=\"auto, (max-width: 945px) 100vw, 945px\" \/><\/figure>\n\n\n\n<p>Now, Copy the code, paste and save it in the header section of your script or WordPress.<\/p>\n\n\n\n<p>Now you&#8217;re done!<\/p>\n\n\n\n<p>Check the outcome by sharing it on Facebook;<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"494\" height=\"354\" src=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/profile.png\" alt=\"\" class=\"wp-image-11609\" title=\"\" srcset=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/profile.png 494w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/profile-300x215.png 300w\" sizes=\"auto, (max-width: 494px) 100vw, 494px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"method-2-metatags-io-to-generate-social-markups\">Method 2: Metatags.io to Generate Social Markups<\/h3>\n\n\n\n<p>There are various tools that you can use to generate Social Media Meta Tags for your website, but in this section, we will be using Metatags.io for general websites to create and see the preview of our link and fix the same using correct meta tags.<\/p>\n\n\n\n<p>Step 1: Go to metatags.io and enter your domain or page URL<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"511\" src=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/enter-url-1024x511.png\" alt=\"\" class=\"wp-image-11610\" title=\"\" srcset=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/enter-url-1024x511.png 1024w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/enter-url-300x150.png 300w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/enter-url-768x383.png 768w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/enter-url.png 1327w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 2: Select Google, Twitter, Facebook, Pinterest, Linkedin and Slack Channels from left to see the preview from all;<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"516\" src=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/select-channel-1024x516.png\" alt=\"\" class=\"wp-image-11611\" title=\"\" srcset=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/select-channel-1024x516.png 1024w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/select-channel-300x151.png 300w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/select-channel-768x387.png 768w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/select-channel.png 1227w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 3: If you see the correct preview in all channels then you don&#8217;t need anything but if you are missing out on basic details like title, description, the image then you can add it the panel below;<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"589\" src=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/Screenshot-33-1024x589.png\" alt=\"\" class=\"wp-image-11612\" title=\"\" srcset=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/Screenshot-33-1024x589.png 1024w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/Screenshot-33-300x173.png 300w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/Screenshot-33-768x442.png 768w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/Screenshot-33.png 1315w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 4: Now you can click on &#8220;generate meta tags&#8221; copy the code and paste it in your &lt;head&gt; section<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"616\" src=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/generate-1024x616.png\" alt=\"\" class=\"wp-image-11613\" title=\"\" srcset=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/generate-1024x616.png 1024w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/generate-300x180.png 300w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/generate-768x462.png 768w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/generate.png 1294w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Other tools\/resources for all platforms;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Metatags.co<\/li>\n\n\n\n<li><a href=\"https:\/\/cards-dev.twitter.com\/validator\" target=\"_blank\" rel=\"noreferrer noopener\">Twitter card Validator<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developers.facebook.com\/tools\/debug\/?\" target=\"_blank\" rel=\"noreferrer noopener\">Facebook Sharing Debugging<\/a><\/li>\n\n\n\n<li>Ogp.me<\/li>\n\n\n\n<li>Generate Social Media Meta Tags in WordPress<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"wordpress-plugin-for-social-media-meta-tags\">WordPress Plugin For Social Media Meta Tags<\/h2>\n\n\n\n<p>There are many online tools that can help you generate Social Media Meta tags for free, we have listed some of the best below;<\/p>\n\n\n\n<p>&#8211; <a href=\"https:\/\/warfareplugins.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Social Warfare<\/a>: This is a popular WordPress plugin that helps you add Social Media Meta tags to your WordPress website or blog, it also comes with some other great features like Social share buttons, Google Analytics tracking etc.<\/p>\n\n\n\n<p>&#8211; <a href=\"https:\/\/yoast.com\/wordpress\/plugins\/seo\/\" target=\"_blank\">Yoast SEO<\/a>: This is another popular WordPress plugin that comes with many features like Social Media Meta tags generator, XML sitemaps, SEO analysis etc. It also has a paid version with more advanced features.<\/p>\n\n\n\n<p>&#8211; Shareaholic: This is a Social Media sharing plugin for WordPress with many features like Social Media Meta tags generator, share buttons, related posts etc.<\/p>\n\n\n\n<p>&#8211; <a href=\"https:\/\/www.addthis.com\/wordpress\/\" target=\"_blank\">AddThis<\/a>: This is a Social Media sharing platform that provides you with code snippets to add to your website or blog, it also comes with a WordPress plugin.<\/p>\n\n\n\n<p>&#8211; <a href=\"https:\/\/wordpress.org\/plugins\/wp-to-hootsuite\/\" target=\"_blank\">Hootsuite<\/a>: This is a Social Media management platform that also provides you with code snippets to add to your website or blog.<\/p>\n\n\n\n<p>&#8211; <a href=\"https:\/\/wordpress.org\/plugins\/jm-twitter-cards\/\" target=\"_blank\">Twitter Cards<\/a>: This is the official Twitter tool to help you generate Social Media Meta tags for your Twitter account.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusion\">Conclusion<\/h2>\n\n\n\n<p>Now that you know how to generate social media meta tags for your website, it is important to make sure that all the correct information is filled in so that you can get the maximum benefit for your site.<\/p>\n\n\n\n<p>You can use various tools and generators available online but we recommend using Kwebby&#8217;s Open Graph Checker and Generator tool which is easy to use and covers all the channels. If you are using WordPress then there is a plugin for the same which will make it easy to add social media meta tags to your website. So what are you waiting for? Start optimizing your website today!<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/FAQ-1024x576.png\" alt=\"\" class=\"wp-image-11614\" title=\"\" srcset=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/FAQ-1024x576.png 1024w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/FAQ-300x169.png 300w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/FAQ-768x432.png 768w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/FAQ-1536x864.png 1536w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/FAQ-2048x1152.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n<div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-1646207981942\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Why You need Social Media Markups?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Social Media Markups like Meta tags help Social media platforms to understand your website and showcase it correctly on their platform. Without Social markups you might end up having wrong title, description or images for your website which can lead to less clicks through rate from Social Media Platforms.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1646207988389\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">What is the difference between Open Graph and Twitter Card?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Twitter Cards are used by Twitter to showcase your website content in a better way than the standard tweet. For example, if you add a Twitter card for an article, it will show a summary of the article with an image on Twitter instead of just text. Open Graph is used by Facebook and other Social Media platforms to understand your website and correctly display it on their platform.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1646207998522\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Can I use the same Social Media Meta Tags for all platforms?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>No, you need to create different Social Media Meta Tags for each platform as they have different requirements. For example, Twitter Card requires og:type while Open Graph does not.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1646208004254\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Can I use Social Markups for my website without using any tools?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Yes, you can but we don&#8217;t recommend it as it is easy to make mistakes while creating Social Media Meta Tags manually. We recommend using one of the tools mentioned above to generate Social Media Meta Tags for your website.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Do you want your blog posts to look their best when shared on social media? Do your links on social media look weird or not&hellip;<\/p>\n","protected":false},"author":1,"featured_media":11615,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,408,4],"tags":[],"class_list":["post-11598","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-seo","category-social-media-tutorials","category-tutorials"],"_links":{"self":[{"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/posts\/11598","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/comments?post=11598"}],"version-history":[{"count":5,"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/posts\/11598\/revisions"}],"predecessor-version":[{"id":23019,"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/posts\/11598\/revisions\/23019"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/media\/11615"}],"wp:attachment":[{"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/media?parent=11598"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/categories?post=11598"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/tags?post=11598"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}