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


#1

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.


#2

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


#3

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


#4

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


#5

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.


#6

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:

  1. Fixed the typo
  2. Uploaded an image meeting the requirements (dimensions + extension = png)
  3. 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.


#7

I would try the following and see how it goes:

  1. Add a Content-Type tag to your site: <meta content="text/html; charset=UTF-8" name="Content-Type" />

  2. Change the location of the image to a public path: <meta name="twitter:image" content="http://www.hotwiredbrain.com/favicon.png" >

  3. Add robots.txt to your site to make sure the Twitterbot have access to the image


#8

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??


#9

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

User-agent: *
Disallow:

#10
  1. 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"/>
    
  2. Changed the url for twitter:image

  3. Added robots.txt

NOTHING WORKED :neutral_face:


#11

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.


#12

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?


#13

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