Card validator can't track meta tags though my site has them

progyadeep · 2018-01-11T16:16:51.832Z

I created a new web page. I have developed web pages with twitter card meta tags before and they worked perfectly. I don’t know what the issue is this time.

I followed the format for specifying the meta tags for a twitter summary card but the twitter card validator can’t find the meta tags.

My website’s address is: http://www.hotwiredbrain.com

Here’s the Twitterbot’s message:

INFO:  Page fetched successfully
INFO:  2 metatags were found
ERROR: No card found (Card error)

I also typed

curl -v -A Twitterbot http://hotwiredbrain.com

and the output shows the meta tags right where they should be - inside the tag.

Here’s part of the source of my web page:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:fb="http://ogp.me/ns/fb#">

    <head>
        <meta charset="Unicode">
        <meta name="description" content="Codes, programs, software and deep thoughts. Inspired by curiosity and the open-source philosophy." >
        <meta name="keywords" content="tech, programming, coding, code, internet, tech blog, AI, software, computer" >
        <meta name="viewport" content="width=device-width, initial-scale=1.0" >

        <link rel="stylesheet" href="resources/css.css">
        <title>Home | HotWiredBrain.com</title>

        <meta name="twitter:card" content="summary" >
        <meta name="twitter:title" content="HotWiredBrain.com" >
        <meta name="twitter:description" content="Codes, programs, software and deep thoughts. Inspired by curiosity and the open-source philosophy." >
        <meta name="twitter:image" content="favicon.ico" >


        <meta property="og:title" content="HotWiredBrain.com">
        <meta property="og:image" content="favicon.ico">
        <meta property="og:description" content="Codes, programs, software and deep thoughts. Inspired by curiosity and the open-source philosophy.">
        <meta property="og:url" content="www.hotwiredbrain.com" >


    </head>

    ...

</html>

Please help me resolve this issue.

Thanks.
~Progy.

ran5000 · 2018-01-12T15:58:57.544Z

Hello,

Looking at the cards related tags I see a couple of issues that might effect the card rendering:

 ~  curl -s -A Twitterbot http://www.hotwiredbrain.com | grep twitter
        <meta name="twitter:card" content="summary" />
        <meta name="twitter:Site" content="@_progyadeep_" />
        <meta name="twitter:title" content="HotWiredBrain.com" />
        <meta name="twitter:description" content="Codes, programs, software and deep thoughts. Inspired by curiosity and the open-source philosophy." />
        <meta name="twitter:image" content="favicon.ico" />

first, the “twitter:Site” card, the ‘S’ should be lowered case.

Second, the “twitter:image”, *.ico are not supported:

Images must be less than 5MB in size. The image will be cropped to a square on all platforms. JPG, PNG, WEBP and GIF formats are supported

you can see more details here: https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary

progyadeep · 2018-01-12T16:17:47.218Z

I removed the faulty twitter:site tag and changed the image to a .png of size 26 KB. The problem still persists.

ran5000 · 2018-01-12T16:49:44.832Z

Your current “twitter:image” points to http://www.hotwiredbrain.com/favicon.png yet this file doesn’t exist. I would suggest using absolute image URL.

Also, make sure your image is meets the supported dimensions:

minimum dimensions of 144x144 or maximum of 4096x4096 pixels

progyadeep · 2018-01-12T17:00:07.161Z

The image meets the dimensional requirements. However, the image actually exists: there’s some problem with my host. I guess I need to fix that first.

progyadeep · 2018-01-15T06:47:08.487Z

Hey @ran5000, I don’t wish to drag it along unnecessarily but the cards rendering problem seems to persist even after I fixed the following errors:

Fixed the typo
Uploaded an image meeting the requirements (dimensions + extension = png)
Disabled hotlink protection on my domain that earlier didn't allow TPAs to access images and other files

I also re-checked the output of

curl -v -A Twitterbot http://hotwiredbrain.com

and it fetched the updated markup. I still don’t know why I’m facing the problem.

I’m really at a loss and I request your help.

ran5000 · 2018-01-15T11:35:15.635Z

I would try the following and see how it goes:

Add a Content-Type tag to your site: <meta content="text/html; charset=UTF-8" name="Content-Type" />
Change the location of the image to a public path: <meta name="twitter:image" content="http://www.hotwiredbrain.com/favicon.png" >
Add robots.txt to your site to make sure the Twitterbot have access to the image

progyadeep · 2018-01-15T12:15:22.358Z

I am an extremely amateur web coder so I don’t understand what the content of the robots.txt should be. A google search didn’t help. Can you? Please??

ran5000 · 2018-01-15T15:29:39.868Z

Sure!
just create robots.txt in the root of you application with the following content:

User-agent: *
Disallow:

taken from the following answer: https://stackoverflow.com/questions/4276957/how-to-configure-robots-txt-to-allow-everything

progyadeep · 2018-01-15T17:26:38.498Z

Added the meta tag you suggested: tried both

<meta name="Content-Type" content="text/html; charset=Unicode"/>

and

<meta http-equiv="Content-Type" content="text/html; charset=Unicode"/>

Changed the url for twitter:image

Added robots.txt

NOTHING WORKED

andypiper · 2018-01-15T17:37:19.177Z

For reasons that are unclear to me, your site is returning base64 encoded content when the cards crawler attempts to access it. I cannot see any related headers that control this. It seems to be a strange anomaly.

progyadeep · 2018-01-16T04:42:11.166Z

The character set I had earlier mentioned was Unicode. Once I changed it to UTF-8, it worked.

Although UTF-8 isn’t going to be a problem for most of my website’s content, is it supposed to happen this way? Why can’t the twitterbot interpret base64 data?

system · 2018-01-30T04:42:27.725Z

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