Ensuring your shared post from blogger in Facebook looks amazing

So the all story began while I was working on my blog aggregation process, I saw that sometimes when I share the newly created post, the post in Facebook includes small image and has not so good layout

While the original post looks amazing with a big picture.

I used the Facebook debugger, which told me that my image is smaller than 200*200 or FB cannot reach it, apparently both of these reasons are incorrect, since I used image that is 250+ and it was reachable from anywhere.

The process of RSS aggregation included

1. Extract RSS
2. Extract new posts
3. Extract first image element
4. Create summary of article < 350 and add link to original (very important since we need to give credit for the hard work of the originator) 

When comparing my post with the original post's OG:IMAGE tag, I saw that mine was using 250+ image while the original was using 396+ width one....

When reviewing the content of the RSS I saw that, the first image included default SRC (which was the 250+ size) and additional SRCSET with additional bigger sizes ....

Since I am using blogger, which doesn't allow me to put an image and strictly define it as the og:image, it actually looks inside the post and take the first image he sees (probably)

Clearly blogger doesn't know how to handle this HTML5 IMG, and defaults to the smaller size ....

So in my process sadly, I had to create an image that is the biggest (any other options / hide it maybe ?).

So while I know that parsing HTML with RegEx is a big <no-no/>, I decided to do so and created the following RegEx to parse the SRCSET

/(?<image>[^ ]*?)\s(?:(?<widthOrRatio>\d+)[xw])[,\s]*/g

Now it a simple matter of taking the largest size and its image :)

Feel free to use, and I hope it will reduce your work :) (if you find any bug, let me know)