CODEWITHSUNDEEP
reactjsherokutwitterreact-routermeta
Robert
Robert

Reputation: 43

Twitter Cards - "WARN: No metatags found"

Having setup metatags for sharable pages via a heroku-hosted react web app. I've noticed that Twitter cards are not being properly presented, despite page source correctly presenting twitter and og meta data.

Given the below - Is there anything I haven't considered yet?

Javascript: I have tested with javascript disabled, and the site still renders correctly, with correct meta tags

Image Size: Is within defined limits - 434px X 650px, 94KB

Hosting: Hosted on Herokuapp, the URL is still using the herokuapp domain (hasn't been switched to a production url) expressFullURL : https://project.herokuapp.com/share/[ID]

Image Hosting: Images are referencing AWS S3 buckets in the url https://media.project.aws/[etc]

Robots: The site does not have a robots.txt file

Below, is the head meta content:

twitter.image URL is dynamically loaded in twitter.url, which is also dynamic using express to generate the full URL (http://project.com/share/page/1234)

<!-- basic meta -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta charset="utf-8" />
    <meta content="text/html; charset=UTF-8" name="Content-Type" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- content meta -->
    <meta name="description" content="description content" />
    <meta name="copyright" content="Copyright 2019" />


    <!-- Twitter meta -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:site" content="@handle">
    <meta property="twitter:image" content="${image.url}">
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="${expressFullURL}">
    <meta property="twitter:title" content="Title">
    <meta property="twitter:description" content="description content">

    <!-- opengraph data -->

    <meta property="og:title" content="Title" />
    <meta property="og:description" content="description content" />
    <meta property="og:url" content="${expressFullURL}" />
    <meta property="og:image" content="${image.url}" />
    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="Site Name" />

Using https://cards-dev.twitter.com/validator the response is:

INFO:  Page fetched successfully
WARN:  No metatags found

Meta is correct on page, so can't understand why no metatags can be found

Upvotes: 4

Views: 3276

Answers (2)

Moritz Petersen
Moritz Petersen

Reputation: 13057

I made a couple of observations that I'd like to document as an answer here:

  1. A <meta charset="utf-8"> tag is required.
  2. The twitter:image tag needs a full HTTPS URL, like https://host.com/some/image.jpg.
  3. The twitter card validator needs to be refreshed for each change. It is not enough to just click on the "Preview Card" button again, you need to reload the webpage (CMD-R on the Mac) and enter the card URL in the text field. Otherwise the validator doesn't seem to load the latest changes.
  4. The error message
    "INFO: Page fetched successfully
    WARN: No metatags found"
    is completely misleading. It is shown even if the URL doesn't exist.

A minimum working example is:

<html>
<head>
<meta charset="utf-8">
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:site" content="@username"/>
<meta name="twitter:title" content="A title"/>
<meta name="twitter:description" content="A description."/>
<meta name="twitter:image" content="https://host.com/some/image.jpg"/>
</head>
<body>
</body>
</html>

Upvotes: 0

Lucas Haley
Lucas Haley

Reputation: 1

I had a similar situation, but seem to have it working. I kept an eye on the Heroku logs heroku logs --tail while clicking the validator preview button. Turns out I was getting a 500 error from my app, because of the format of the request from the validator. Might be worth a check.

Upvotes: 0

Related Questions