feat: add open graph tab

[arashsheyda]

tried to help with #121

fix #121

Example Video

seo.mp4

[Atinux]

This is amazing!

[arashsheyda]

@Atinux thanks :D, it needs review though I think

[antfu]

@arashsheyda Thanks a lot for all the awesome contributions! It looks great, and I will review it ASAP!

[arashsheyda]

@antfu thanks

[antfu]

@arashsheyda could you share your demo project? I think we could have multiple playgrounds for playing with different features. It's hard for one app to cover all the needs. (like I pushed for playgrounds/tab-seo, you can directly override it with your setup.) Thanks!

[arashsheyda]

@antfu i edited some pages in playground(I hope i didn't do something wrong ,lol)

and I think there is a problem:

• for og: and twitter: tags, it is getting them from property, some use name, I think, example:
  { name: 'og:title', content: 'title' },

• if there is no twitter:card it should not show the preview(I'm not sure about this one but Social Share Preview does it this way)

thank you realy, it looks so much better this way 💯

[antfu]

Thanks! Actually, there would still be a lot of work to do to make it work better, like how it previews without og:image or different type of twitter:card etc. Marking it as draft and I will work on it slowly

[antfu]

Thanks a lot! Let's have it and iterates as we go!