Twitter Card META Tags
There are three sorts of Twitter Cards: outline, photograph, and video. The outline Twitter Card is for articles and content based substance, while photograph and video cards are clear as crystal (YouTube utilizes the video card compose, for instance). There are a couple of META labels utilized for all card composes, at that point a couple of progressively that are card-type-particular. All META label name qualities are prefixed with twitter:.
Nonexclusive META Tags
META labels you would use in all card cases include:
twitter:card - The kind of card to be made: outline, photograph, or video.
twitter:url - The URL that ought to be utilized for the card. This will probably be indistinguishable URL from the page's sanctioned connection.
twitter:title - The title as it should show in the Twitter Card.
twitter:description - A 200 character synopsis of the substance at the given URL.
twitter:image - A delegate picture URL for the substance. Much of the time, basically giving your logo's URL will be okay.
Every one of these things get their very own META tag, so the Twitter Card META labels for this page would resemble:
<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="https://davidwalsh.name/twitter-cards">
<meta name="twitter:title" content="How to Create a Twitter Card">
<meta name="twitter:description" content="Twitter's new Twitter Cards API enables designers to add META labels to their site, and Twitter will fabricate card content from connections to a given site.">
<meta name="twitter:image" content="https://davidwalsh.name/wp-content/topics/punky/pictures/logo.png">
Twitter likewise gives attribution META labels to content, giving a chance to creators to get credit inside the TwitterCard:
twitter:site - The Twitter username utilized by the given site including the '@'
twitter:creator - The Twitter username of the individual creator of the substance
I utilize a similar handle for the site and creator, however I could utilize my @davidwalsh represent the designer in the event that I needed:
<meta name="twitter:site" content="@davidwalshblog">
<meta name="twitter:creator" content="@davidwalshblog">
These are the fundamental META labels you'll need to utilize at whatever point making Twitter Cards. How about we examine the labels particular to picture and video cards!
Picture and Video META Tags
Media-particular cards require more data about the media itself, so for picture and video cards, these extra labels are helpful:
twitter:image:width - The width of the picture
twitter:image:height - The tallness of the picture
twitter:player - URL to the IFRAME'd player, must be HTTPS
twitter:player:width - The width of the player IFRAME
twitter:player:height - The tallness of the player IFRAME
twitter:player:stream - The URL to stream as video
twitter:player:stream:content_type - The substance kind of the stream
Twitter video cards are substantially more required than the other card composes, yet well worth designing so clients can watch their recordings inside their Twitter application. Test labels could resemble:
<meta name="twitter:image:width" content="600">
<meta name="twitter:image:height" content="600">
<meta name="twitter:player" content="https://davidwalsh.name/video-install/12345">
<meta name="twitter:player:width" content="435">
<meta name="twitter:player:height" content="251">
<meta name="twitter:player:stream" content="https://davidwalsh.name/crude stream/12345.mp4">
<meta name="twitter:player:stream:content_type" content="video/mp4; codecs="avc1.42E01E1, mpa.40.2"">
Twitter gives a Card Preview utility with the goal that you can guarantee your META labels are utilized in a legitimate manner. I prescribe utilizing this utility for all card composes, yet particularly for video card composes, as they require the most data.
Since the Twitter Card META labels are set up, the following stage is applying for endorsement from Twitter.
Applying for Twitter Card Approval
Twitter necessitates that your space be endorsed before they will permit Twitter Cards for your site; this is probably going to battle mishandles like erotic entertainment and destinations advancing unlawful action. When you apply for Twitter Card endorsement, you give straightforward data about your site, similar to the Twitter username related with the space, which cards you expect on utilizing, et cetera:
Twitter Card Application
Twitter makes reference to the endorsement procedure can tween five and ten days, however my site was affirmed in two days. Once your site is affirmed, connections to your site containing the suitable META labels will give Twitter customers enough data to assemble Twitter Cards!
Twitter and Robots.txt
In case you're running into issues with your card content not being pull accurately, guarantee that your robots.txt document isn't blocking Twitter. Twitter's bot is relevantly named Twitterbot so check your robots.txt record for erroneously Disallow rules!
Test Twitter Card
The accompanying picture demonstrates a Twitter card for this site:
Twitter Card
At first I was vexed about Twitter's concept of a Twitter Card since I accepted it would shut down the stage, and to this point, nobody knows whether that will be the situation. What I do know is that actualizing Twitter Card META labels is unbelievably simple and gives another approach to business/site proprietors to viably advertise their site. Twitter Cards are additionally pleasant for the client, enabling them to play recordings inside their Twitter customer, or basically furnish a visual related with a given tweet.
Need to see Twitter Cards in real life? Tweet a connection to this or some other post on the site, at that point click/tap the tweet for the nitty gritty view!
There are three sorts of Twitter Cards: outline, photograph, and video. The outline Twitter Card is for articles and content based substance, while photograph and video cards are clear as crystal (YouTube utilizes the video card compose, for instance). There are a couple of META labels utilized for all card composes, at that point a couple of progressively that are card-type-particular. All META label name qualities are prefixed with twitter:.
Nonexclusive META Tags
META labels you would use in all card cases include:
twitter:card - The kind of card to be made: outline, photograph, or video.
twitter:url - The URL that ought to be utilized for the card. This will probably be indistinguishable URL from the page's sanctioned connection.
twitter:title - The title as it should show in the Twitter Card.
twitter:description - A 200 character synopsis of the substance at the given URL.
twitter:image - A delegate picture URL for the substance. Much of the time, basically giving your logo's URL will be okay.
Every one of these things get their very own META tag, so the Twitter Card META labels for this page would resemble:
<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="https://davidwalsh.name/twitter-cards">
<meta name="twitter:title" content="How to Create a Twitter Card">
<meta name="twitter:description" content="Twitter's new Twitter Cards API enables designers to add META labels to their site, and Twitter will fabricate card content from connections to a given site.">
<meta name="twitter:image" content="https://davidwalsh.name/wp-content/topics/punky/pictures/logo.png">
Twitter likewise gives attribution META labels to content, giving a chance to creators to get credit inside the TwitterCard:
twitter:site - The Twitter username utilized by the given site including the '@'
twitter:creator - The Twitter username of the individual creator of the substance
I utilize a similar handle for the site and creator, however I could utilize my @davidwalsh represent the designer in the event that I needed:
<meta name="twitter:site" content="@davidwalshblog">
<meta name="twitter:creator" content="@davidwalshblog">
These are the fundamental META labels you'll need to utilize at whatever point making Twitter Cards. How about we examine the labels particular to picture and video cards!
Picture and Video META Tags
Media-particular cards require more data about the media itself, so for picture and video cards, these extra labels are helpful:
twitter:image:width - The width of the picture
twitter:image:height - The tallness of the picture
twitter:player - URL to the IFRAME'd player, must be HTTPS
twitter:player:width - The width of the player IFRAME
twitter:player:height - The tallness of the player IFRAME
twitter:player:stream - The URL to stream as video
twitter:player:stream:content_type - The substance kind of the stream
Twitter video cards are substantially more required than the other card composes, yet well worth designing so clients can watch their recordings inside their Twitter application. Test labels could resemble:
<meta name="twitter:image:width" content="600">
<meta name="twitter:image:height" content="600">
<meta name="twitter:player" content="https://davidwalsh.name/video-install/12345">
<meta name="twitter:player:width" content="435">
<meta name="twitter:player:height" content="251">
<meta name="twitter:player:stream" content="https://davidwalsh.name/crude stream/12345.mp4">
<meta name="twitter:player:stream:content_type" content="video/mp4; codecs="avc1.42E01E1, mpa.40.2"">
Twitter gives a Card Preview utility with the goal that you can guarantee your META labels are utilized in a legitimate manner. I prescribe utilizing this utility for all card composes, yet particularly for video card composes, as they require the most data.
Since the Twitter Card META labels are set up, the following stage is applying for endorsement from Twitter.
Applying for Twitter Card Approval
Twitter necessitates that your space be endorsed before they will permit Twitter Cards for your site; this is probably going to battle mishandles like erotic entertainment and destinations advancing unlawful action. When you apply for Twitter Card endorsement, you give straightforward data about your site, similar to the Twitter username related with the space, which cards you expect on utilizing, et cetera:
Twitter Card Application
Twitter makes reference to the endorsement procedure can tween five and ten days, however my site was affirmed in two days. Once your site is affirmed, connections to your site containing the suitable META labels will give Twitter customers enough data to assemble Twitter Cards!
Twitter and Robots.txt
In case you're running into issues with your card content not being pull accurately, guarantee that your robots.txt document isn't blocking Twitter. Twitter's bot is relevantly named Twitterbot so check your robots.txt record for erroneously Disallow rules!
Test Twitter Card
The accompanying picture demonstrates a Twitter card for this site:
Twitter Card
At first I was vexed about Twitter's concept of a Twitter Card since I accepted it would shut down the stage, and to this point, nobody knows whether that will be the situation. What I do know is that actualizing Twitter Card META labels is unbelievably simple and gives another approach to business/site proprietors to viably advertise their site. Twitter Cards are additionally pleasant for the client, enabling them to play recordings inside their Twitter customer, or basically furnish a visual related with a given tweet.
Need to see Twitter Cards in real life? Tweet a connection to this or some other post on the site, at that point click/tap the tweet for the nitty gritty view!
No comments:
Post a Comment