Today I am here to show you how to customize your web page or business share links and their content like your share Link Title, Image and other Contents are often not matching your web page on Twitter, Facebook, Google Plus, LinkedIn. I will show you how to control and customize your social share content with social meta tags.
Now, wait is it good for Search Engine Optimization?
Yeah, this is significant for Search Engine Optimization we know that optimize images and right data helps your web page content to spread which most of the time increase your number of links and social media crawler better understand your content.
Now you will be thinking what the heck is social meta tags. So let’s discuss each and every single one in detail.
What are Social Meta Tags?
Most of the time when you share your link on facebook, twitter or any other social media.You have noticed that Your share link show an image doesn’t match the title of your page, post, article. So how to control social media share content. For that, you have to use Social meta tags.
Let’s start with Facebook meta.
But remember you have to add these social meta tags in the head section of your web page.
Open Graph is a Facebook Protocol Standard for adding| Implementing social meta tags.And it is not only supported by facebook but other social media platforms like Google +, LinkedIn and even Twitter recognized it.
The benefit of adding open graph meta tags (protocol) is that it enables a web page as a rich object in the social graph.Like if you use these tags for our website and share your website link on facebook your website share will be treated as facebook object and will have the same functionality as other Facebook objects.
Basic metadata for Facebook Open Graph
To make your web page as a social media object you have to add these meta tags to your web page inside your head tags
<head> Add Your social media meta tags here </head>
og:title – og mean open graph and colon(:) The title of your web page to be displayed on Facebook.
og:type – The type of your web page like video.movie. Depending on the type you have specified for your webpage.
In Our case, the Type is a website.
og: image – An Image URL (where your image is located) This will be your main focus to add an image which best suits your title and web page.
og:URL – The URL (link) of your web page.
Now make a practical Example from the above social meta tags.
<head> <meta property="og:title" content="Ask Web Support" /> <meta property="og:type" content="website" /> <meta property="og:url" content="https://askwebsupport.com/how-to-control-social-media-share-links/" /> <meta property="og:image" content="http://askwebsupport.com/images/logo.jpg" /> </head>
There are a lot more optional meta tags for Facebook. If you are interested in more social
media meta tags you can read from this link Open Graph.
Now to make sure that your Open Graph (Facebook) meta tags are properly configured you have to check and validate your web page with Open Graph Debugger. Visi this link and enter your web page URL to which you have added facebook meta tags and it will validate and preview your Share link.
With Twitter Social media meta tags you can add your video, Image to your tweet with some content with some less number of line of code.And anyone can understand and implement them to their webpage.
There are many types of Twitter cards but Summary cards and Photo Summary cards are the most common one.
twitter:card – Twitter card Type. List of Twitter card type
twitter: title – The title of your web page
twitter:description – Your Web page description but not more than 200 characters.
twitter:image – Your Tweet Image URL.Your Tweet image minimum dimension 420×220.
Now let’s Implement in Practical.
<meta name="twitter:card" content="summary"> <meta name="twitter:title" content="How to Customize Social Meta Tags"> <meta name="twitter:description" content="Your Page Description"> <-- Twitter Summary card images must be at least 120x120px --> <meta name="twitter:image" content="http://www.example.com/image.jpg">
If you are wondering that you have added these tags but how will you test this. So don’t worry Twitter have a solution for this to validate your social media meta tags.
Twitter Card validator will give you the preview of your web page that how it will show on Twitter as your tweet, by just entering your web page URL.
So now what about Google +, LinkedIn and other Social media Platforms and their meta tags.
As we discuss earlier that Open Graph Supported by all of the Social media Platforms if in some cases that is wrong then we have to use another solution which Schema markup for the rest of the social media platforms.
Schema Markup for Google +, LinkedIn and Pinterest
We are using schema markup to customize our web page Title, description, and image on social media.
Below is the example that how to use Schema Markup.
itemprop-name – The title of your web page.
itemprop-description – The description of your webpage to be shown on social media.
itemprop-image – URL of your image to be shown with title and description.
Now let’s implement this as practical example
<meta itemprop=”name” content=”Blog Post Title”></em> <meta itemprop=”description” content=”This a description of blog post”> <meta itemprop=”image” content=”http://www.domain.com/image.jpg”>
If you are wondering that how can we validate these So yes there is a validator tool for this also.
To validate your schema markup tags you have to use Structured Data Testing Tool.
I hope everything is clear now If you still have Questions or need help with implementing social media meta tags to your web page Ask Your Questions. I will answer your questions within couple of hours.