How to add Open Graph and Twitter Cards as Social Metadata to Your Website Using HTML
When you share links on social networking platforms, rather than simply being presented as plain text, the links will typically be accompanied by visually appealing graphics and include a title, synopsis, and link that have been formatted in an attractive manner. For instance, the following is an example of how a link to this lesson series would appear on Twitter:
By putting certain tags in the body of your HTML document, you can add rich media social sharing capabilities to your website. Twitter Cards and the Open Graph protocol are the two primary standards that dictate how to format this metadata. Both of these formats can be found here.
You will learn how to verify both Twitter Card and Open Graph metadata on your webpage by following the instructions in this article.
When a link is shared on Twitter, the Twitter Cards metadata specification will display it with rich text, picture, and video content. Twitter Cards were developed by Twitter.
You can begin with the most fundamental information and build from there if you like, but the whole Twitter Card markup specification includes a lot of other options to choose from.
Put the following tags in between the ones you already have on your site so that Twitter can check the basic metadata for your Twitter Card:
Make care to incorporate your own material into the sections that have been marked.
Let's go one by one through every tag that was recently added:
This tag identifies the kind of Twitter Card that ought to be presented to the user. The Twitter:cardtype presents a brief description along with a huge image preview. summary large image: your Twitter username, or the username of your site or firm.
twitter:site: the title that you would like to see in the card. There is a possibility that this will coincide with what you have written in your twitter:titletags, but there is no requirement that it do so.
Previewing and Creating Open Graph Meta Tags in the Most Straightforward Way Possible
You can preview all of the Open Graph meta tags in a single location by using the Free Meta Tag Generator.
Learn How Search Engines and Social Media React to Your Website by Analyzing Their Responses to It
The title of a web page can be specified using an HTML element known as the title tag. On the page that contains the search results, search engines will often show the title tag.
You should utilize the title tag to explain the content of the page because it is vital for search engine optimization and social sharing.
Maintaining a title with fewer than sixty characters is recommended.
Tag with a Description
An HTML element known as "meta description" offers a condensed synopsis of the content of a web page. When it comes to improving your search visibility, this is on par with the importance of your title tag.
The meta description you provide will be read by search engines and shown alongside your website's results.
A good rule of thumb is to limit your description to between 155 and 160 characters.
Frequently asked questions
Are you unable to locate the response that you require? Please go to our Frequently Asked Questions page for further information.
What is meant by the term "Open Graph meta tags"?
Facebook's Open Graph is a standard that was released in 2010 that enables deeper interaction between Facebook and any website. It makes it possible for any website to have the same capabilities as any other object on Facebook.
You have the ability to customize the manner in which your website is displayed on Facebook. Open Graph meta tags are now being recognized by a wider variety of social media websites, including Twitter and LinkedIn.
How can I examine the meta tags in an HTML document?
To produce meta tags for your website, make use of a free resource such as OpenGraph.xyz, and then paste the generated meta tags into the element just before the closing tag.
I'd like to check if there are any meta tags in the body element.
The only place where meta tags can be used is in the head element. Including meta tags within the body will cause the markup to become invalid.
What dimensions should an Open Graph image have?
If you want your photographs to look their best on high resolution devices, make sure they have a width of at least 1080 pixels. For improved performance with image link advertisements, Facebook suggests that you use images with a ratio of 1:1 within your ad creatives.
What should I do if the content of my website is not displaying correctly on a social networking site?
There is a possibility that the appearance of your website after it has been shared on social media will vary from how it appears here. The primary reason for this is that your website has been shared in the past, which means that any modifications you may have made will not be reflected.
To re-scrape your website, you can select any of the official Open Graph debugger tools that are listed below:
Facebook: https://developers.facebook.com/tools/debug/
Twitter: https://cards-dev.twitter.com/validator
LinkedIn: https://www.linkedin.com/post-inspector/
Pinterest: https://developers.pinterest.com/tools/url-debugger/
Copyright © 2024 SUPERSEOPLUS Free Premium SEO Tools. All Rights Reserved.
