It has been a bit of a mad week this week. I joined a new team so lots of time learning what's what and also being pulled in two directions as usual demands come through on top of that.
My blog runs on Blazor and I have been making use of JavaScript interop to update the html headers and update the page title to match the blog post article. This works great, I load the page and check the headers and they were saying what I wanted.
The problem was I wanted to add tags for twitter cards This means that when I paste a link to my blog on twitter you get a nice preview and pic of me in the tweet. This was not working at all even though I had the correct headers.
I eventually figured out that the problem was the fact I was using JavaScript to update my headers after the page had been initially loaded. Twitter was fetching my page before these headers got added and therefore couldn't see the twitter card headers.
My solution was to use invalid html. Not ideal but it works. I added the required html tags in the body of my page using Blazor/C# instead of using JavaScript to add them into the header. Twitter appears to not be fussy in finding them in the wrong place.
Twitter provides a validator tool at Twitter Card Validator which my website now passes.
Not much else to say this week, apart from I am missing Visual Studio and C#, I have been mostly using VS Code on Linux and looking at php which isn't as much fun as my usual day job.
Top comments (0)