{"id":915,"date":"2022-01-14T17:04:05","date_gmt":"2022-01-14T17:04:05","guid":{"rendered":"https:\/\/mailinvest.blog\/index.php\/2022\/01\/14\/how-to-create-social-media-meta-tags\/"},"modified":"2022-01-14T17:04:05","modified_gmt":"2022-01-14T17:04:05","slug":"how-to-create-social-media-meta-tags","status":"publish","type":"post","link":"https:\/\/mailinvest.blog\/index.php\/2022\/01\/14\/how-to-create-social-media-meta-tags\/","title":{"rendered":"How to Create Social Media Meta Tags"},"content":{"rendered":"

<\/a>\n<\/p>\n

\n

Social media can be a powerful tool to take your website to a whole new level of customer engagement. You can gain maximum exposure, boost your online traffic, and gain additional leads through various social media platforms. That\u2019s why it\u2019s important that you pay attention to how your site is presented when someone shares a post on Facebook or tweets a link to your website.<\/span><\/p>\n

Using social media meta tags, you can customize the way your website appears in tweets and posts. While creating meta tags isn\u2019t a ranking factor, the way your page appears on social media posts will influence online traffic and subsequently search engine ranking.<\/span><\/p>\n

What are meta tags?<\/span><\/h2>\n

Meta tags are lines of codes that provide metadata of a website. This metadata helps search engines and social media platforms identify and understand the contents of the particular web page.\u00a0\u00a0\u00a0<\/span><\/p>\n

Meta tags are hidden from the sight of website visitors, but provide search engines and social media platforms with various information about the website including instructions on how to display your website online.\u00a0<\/span><\/p>\n

Using social meta tags on your website lets you take control of how your website link looks when shared on social media platforms. Adding social media tags to your website is not that difficult. In this article, you will know how to create the perfect meta tags for different social media platforms.<\/span><\/p>\n

What metadata to include in your social meta tags?<\/span><\/h2>\n

Now that you have decided to add social meta tags to your website, let\u2019s discuss some commonly used metadata:<\/span><\/p>\n

    \n
  1. \n

    Title:\u00a0<\/span><\/h3>\n<\/li>\n<\/ol>\n

    Using the title metadata tells social media platforms exactly what title or headline you\u2019d like displayed when sharing your webpage.\u00a0<\/span><\/p>\n

    \u00a0 \u00a0 2.<\/span> Description:<\/span><\/h3>\n

    Your audience decides whether or not to open your website link, by reading the description of your page. The description meta tags help you add your own description for your webpage.\u00a0\u00a0<\/span><\/p>\n

    \u00a0 \u00a0 3. Image:<\/span><\/h3>\n

    Adding a featured image can increase the chances of your link being clicked by users. With the image meta tag, you can add your own custom image and make your link more effective.\u00a0<\/span><\/p>\n

    \u00a0 \u00a0 4. URL:<\/span><\/h3>\n

    Every page on the internet has a unique URL. The URL metadata includes the page URL that will be displayed when you share the link online.\u00a0<\/span><\/p>\n

    Different social media platform supports different meta tag protocols, let\u2019s take a look at some of them here:<\/span><\/p>\n

    Open Graph Tags:<\/span><\/h2>\n

    Open Graph protocols are used to provide metadata of your website and are supported by the majority of social media platforms<\/a> including Facebook, LinkedIn, and Twitter. In short, using Open Graph tags (OG tags) is the standard way to implement social media tags.<\/span><\/p>\n

    \u00a0<\/span>Here are some common OG tags::<\/span><\/p>\n

      \n
    1. og: locale<\/b> \u2013 language formate <\/span>these tags are marked up in: <\/span><meta property=\u201dog:locale\u201d content=\u201den_GB\u201d \/> Alternate: <meta property=\u201dog:locale:alternate\u201d content=\u201dfr_FR\u201d \/><\/span><\/li>\n
    2. og: type<\/b> \u2013 Type of website: <meta property=\u201dog:type\u201d content=\u201dvideo.movie\u201d \/><\/span><\/li>\n
    3. og: title <\/b>\u2013 The title of your page: <meta property=\u201dog:title\u201d content=\u201dHow to create social media meta data\u201d \/><\/span><\/li>\n
    4. og: description<\/b> \u2013 The description of your page: <meta property=\u201dog:description\u201d content=\u201denter your description\u201d \/><\/span><\/li>\n
    5. og: url<\/b> \u2013 URL of you page: <meta property=\u201dog:url\u201d content=\u201dhttps:\/\/yourwebaddress.com\/page\u201d \/>\u00a0<\/span><\/li>\n
    6. og: site_name<\/b> \u2013 your website name: <meta property=\u201dog:site_name\u201d content=\u201dTechWyse\u201d \/><\/span><\/li>\n
    7. og: image<\/b> \u2013 Featured image properties: <meta property=\u201dog:image\u201d content=\u201dhttps:\/\/example.com\/file.jpg\u201d\/><\/span><\/span>\"How<\/li>\n<\/ol>\n

      An image meta tag can also include image properties by using the following tags:<\/span><\/p>\n

        \n
      1. og:image:width<\/b> \u2013 Image width: <meta property=\u201dog:image:width\u201d content=\u201d400\u2033 \/><\/span><\/li>\n
      2. og:image:height<\/b> \u2013 Image height: <meta property=\u201dog:image:height\u201d content=\u201d300\u2033 \/><\/span><\/li>\n
      3. og:image:alt \u2013\u00a0 <\/b>A description of what is in the image: <meta property=\u201dog:image:alt\u201d content=\u201dTechWyse logo\u201d \/>\u00a0<\/span><\/li>\n
      4. og:image:type \u2013 <\/b>media type for this image: <meta property=\u201dog:image:type\u201d content=\u201dimage\/jpeg\u201d \/><\/span><\/li>\n<\/ol>\n

        You can use <\/span>Facebook for developer\u2019s Open Graph Debugger<\/span><\/a> to test whether the OG meta tags have been properly configured. The online tool allows you to see how your website appears to others when it\u2019s shared on Facebook, Messenger, and other social media platforms.<\/span><\/p>\n

        Schema Tags:<\/span><\/h2>\n

        Schema tags can also be used to create social media tags to display your site. The schema markup is an alternate solution for LinkedIn<\/a> and Pinterest.<\/span><\/p>\n

        Similar to the OG tags, the schema meta tags are also used to customize the title, URL, description, and image that is shown when a website is shared on a social media site.<\/span><\/p>\n

        Here are some commonly used schema meta tags:<\/span><\/p>\n

          \n
        1. Name<\/b>: <meta itemprop=\u201dname\u201d content=\u201dEnter the name here\u201d><\/span><\/li>\n
        2. URL:<\/b> <html itemscope itemtype=\u201dhttps:\/\/yourwebsiteaddress.com\/page\u201d><\/span><\/li>\n
        3. Description: <\/b><meta itemprop=\u201ddescription\u201d content=\u201dPage description\u201d><\/span><\/li>\n
        4. Image: <\/b><meta itemprop=\u201dimage\u201d src=\u201dhttps:\/\/yourwebsiteaddress.com\/image.png\u201d alt=\u201dalt text of image\u201d><\/span><\/li>\n<\/ol>\n

          You can use the <\/span>Google Structured Data Testing Tool<\/span><\/a> to test the schema meta tags. Just copy and paste the code and click on test.<\/span><\/p>\n

          Twitter Cards:\u00a0<\/span><\/h2>\n

          Using Twitter cards is another way to add social media tags for Twitter. Using the codes can enhance tweets and get additional traffic to your site<\/a>. The tags can be used to create metadata for photos and videos.<\/span><\/p>\n

          At present, you can add four types of Twitter cards. You should select one that is appropriate for a webpage.<\/span><\/p>\n

            \n
          1. Summary Card with a Large Image \u2014<\/b> This tag gives information about the unique image, title, and Twitter account attribution of a webpage. <meta name=\u201dtwitter:card\u201d content=\u201dsummary_large_image\u201d><\/span><\/li>\n
          2. Summary Card \u2014<\/b> This tag is similar to the above tag with the exception that the image is small and less prominent. <meta name=\u201dtwitter:card\u201d content=\u201dsummary\u201d \/>\u00a0<\/span><\/li>\n
          3. Player Card \u2014<\/b> The tag is used to embed rich media, such as audio and video, in the Tweet. <meta name=\u201dtwitter:card\u201d content=\u201dplayer\u201d \/>\u00a0<\/span><\/li>\n
          4. App Card \u2014<\/b> The tag is designed for a mobile app with a link for downloading the app. Using the card can boost the app downloads from Twitter users. <meta name=\u201dtwitter:card\u201d content=\u201dapp\u201d><\/span><\/li>\n<\/ol>\n

            To test the Twitter Card tag, you can use <\/span>Twitter\u2019s Card Validator Tool<\/span><\/a>. You can preview how the Twitter card will appear and make changes if required.<\/span><\/p>\n

            Social media meta tags generator:<\/span><\/h2>\n

            One easy way to create meta tags is to use a meta tag generator tool. These tools will generate the meta tag for you, based on your inputs. You can then copy this code and paste it into your website. Here are some tag generators:<\/span><\/p>\n

              \n
            1. metatags.io<\/span><\/li>\n
            2. metatags.co<\/span><\/li>\n
            3. opengraph.xyz<\/span><\/li>\n<\/ol>\n

              Adding meta tags to your website:<\/span><\/h2>\n

              Now that we understand social media meta tags, let\u2019s see how we can implement them on our website. There are two ways to go about it, check them out below:<\/span><\/p>\n

                \n
              1. \n

                Add meta tags to your code:<\/span><\/h3>\n<\/li>\n<\/ol>\n

                Once you have created the meta tags, then you can easily add them to your website code. Meta tags are placed within the head section of your webpage. Paste the code you have created after the <head> tag but before the closing head tag <\/head>. Once you have done that save changes and your social meta tags are ready to go.<\/span><\/p>\n

                Once you add meta tags to your website, it should look something like this:<\/span><\/p>\n

                \u00a0 \u00a0 \u00a02. Using plugins to add meta tags:<\/span><\/h3>\n

                If you use WordPress or other CMS programs to manage your website, then you can use plugins to add meta tags to your web page. Here are some WordPress plugins for meta tags:<\/span><\/p>\n

                  \n
                1. WPSSO<\/span><\/li>\n
                2. WordPress SEO by Yoast<\/span><\/li>\n
                3. JM Twitter Card<\/span><\/li>\n<\/ol>\n

                  Tips for Optimizing Social Media Meta Tags:<\/span><\/h2>\n

                  You must use online tools to review how posts about your site would appear on social media sites. One issue you may face is that the image does not fill the full width of the feed. To resolve this problem, you should use a large image with a width that exceeds 400 pixels. However, the image should not be more than 5mb in size.<\/span><\/p>\n

                  You should test different versions of an image to see which displays the best. Also, you should modify the image on each social media platform to appeal to the unique preferences of the network\u2019s online audience.<\/span><\/p>\n

                  Another issue that may occur is an older image being displayed when you\u2019ve updated the meta tag. A fix for this problem is to clear the cached version of the OG metadata of the page.<\/span><\/p>\n

                  Lastly, you should consider using different versions of meta tags for more control over how your post displays on different networks. Consider using both Twitter cards and OG or schema meta tags for the best results.<\/span><\/p>\n

                  \n
                  \"\"\/<\/p>\n

                  Post By Joseph Abishek<\/a> (1 Posts<\/span>)<\/p>\n

                  Joseph is a social media analyst at TechWyse. He’s passionate about growing client’s digital presence using proven marketing methods. In his free time, he enjoys listening to music and reading books.<\/p>\n

                  Website: \u2192 <\/p>\n<\/div>\n<\/div><\/div>\n