Cannot make my Twitter card (summary_large_image) match Twitter examples

[PattyYa1]

Despite following all of the examples, I cannot get any of my client’s Twitter Cards to match the examples given by Twitter. For example, when I specify the following meta tags:

<meta name="twitter:card" value="summary_large_image" />
<meta name="twitter:title" value="Latest pics from Katoeys &#39;Are&#39; Us (@KatoeysAreUs)" />
<meta name="twitter:description" value="Visit our web site for more great pics and vids! https://www.katoeys-are-us.com - and be sure to Follow us here at @KatoeysAreUs !" />
<meta name="twitter:image" value="https://dz41sfzqwj7uf.cloudfront.net/uploads/photo/image/352/medium_17880675_455721771440690_7448460371250011230_o_1492714949.jpg" />
<meta name="twitter:site" value="@KatoeysAreUs" />

and insert the following Javascript:

<script>window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return t;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);

  t._e = [];
  t.ready = function(f) {
    t._e.push(f);
  };

  return t;
}(document, "script", "twitter-wjs"));</script>

And after successfully validating the following URL: https://www.katoeys-are-us.com/photos/352, I have a tweet that does not show the correct twitter:site, only the Twitter ID of the poster. The Twitter Card Validator indicates that it finds 12 meta tags (of which 5 are specific to Twitter) - is it possible that some of the other meta tags may be overriding/interfering with them?

Has anyone else run into this issue?

[PattyYa1]

I should also explain that after successfully tweeting this to my test account, the entire card is associated with a single link that resolves to my client’s website (there are no separate “clickable” entities or controls that are shown in Twitter’s own examples. For instance, the example at the top of this page (https://dev.twitter.com/cards/types/summary-large-image) is exactly what I am trying to produce (including the Follow button (for which there appears to be no documentation or code to support this desired behavior…)

[PattyYa1]

Apologies in advance – I know these forums are comprised mostly of volunteers using their own time to help others out. Having said that, is there anyone out here who could at least “validate” my issue? I’ve provided:

• the relevant URL: https://katoeys-are-us.com/photos/352, which can be tested in the Validator
• unrestricted access to the HTML to view the tags in question (and everything else, i.e., the javascript)
• an example (Nat Geo) from the Twitter Dev site itself that seemingly cannot be reproduced per existing documentation (https://dev.twitter.com/cards/types/summary-large-image)

Any and all help is greatly appreciated as this is impacting a client project - very grateful for your time!

[andypiper]

Sorry for any confusion here. The difference between what you see in the Tweet in the timeline, and the one embedded on the page in the documentation, is that embedded Tweets will show a Follow button when shown on a web page. Tweets on Twitter (either on an individual Tweet page, or in a timeline) will not have the Follow control.

If you have a Tweet already posted, click the chevron down control at the top right of the Tweet in the timeline, and choose Embed (or paste the URL to the Tweet into publish.twitter.com) -> you’ll see a popover with the Follow control which is a preview of what the Tweet would look like embedded on a web page.

twitter:site is used for attribution when replying to a Tweet. It may not show directly elsewhere in the card.

[system]

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.