feat: improve seo & social media links

[ljosberinn]

fixes #135

Not sure if the robots.txt will work like that, currently there's none.
Didn't work. If meta tags arent fine, I'll try to use redirects.

Went through:

• https://htmlhead.dev/#recommended-minimum
• Lighthouse
• https://metatags.io/
• https://cards-dev.twitter.com/validator
• Discord

[ljosberinn]

Experimented a bit with the images & tags as you can see. Can't remove the triple headline on Discord for some reason.

[smeijer]

Can't remove the triple headline on Discord for some reason.

Not a huge issue, but do other sites also have that problem?

[ljosberinn]

No, only Discord. Inspecting class names was what made me experiment, because..

1. Testing-Playground is called embedProvider
2. Testing Playground is called embedAuthor
3. Testing Playground is called embedTitle

But we don't use author with any other value than your name, so I suspect a opengraph-parsing mistake on discords end. All 3 link to the same url anyways.

[smeijer]

Sorry I meant, if you would post another site in a discord channel. Do they also render their title three times?

But, it turns out, it doesn't. So there must be something that we're missing.

[ljosberinn]

To be fair, tweets are something else, but yeah, I'll keep continue digging because I don't see that behaviour on any of my own sites 😅

For reference: https://twitter.com/CoinbitIO/status/1136959919612145664

[smeijer]

To be fair, tweets are something else

I see 😅 long live standards

[smeijer]

This one shows the title at three places, can it be related? (name, og:title, og:site_name)

https://opengraphcheck.com/result.php?url=https%3A%2F%2Fdeploy-preview-143--testing-playground-com.netlify.app

[ljosberinn]

Yeah, I assume Discord is using one of those as author for some reason. Or it's actually picking up on the oembed, which why I updated that too.

[ljosberinn]

Well, it's the oembed! provider_name + host, author_name + author_url and finally og:title + og:url.

Final edit:

Testing Playground links to the site; your name links to the repo.

[smeijer]

Can we also leave some elements out? I don't really need to have my name there so prominently visible.

Testing Playground is no longer mine. We have a number of contributors now.

[smeijer]

And maybe we should just use the frog instead of that screenshot? What do you think?

Nice work by the way! I like where this is going 🙂👍

[ljosberinn]

Can we also leave some elements out? I don't really need to have my name there so prominently visible.

Sure! I just figured there's a reason it was initially added. If the oembed is exclusively crawled when also crawling the site, I'd just drop provider_name, host, author_name + author_url alltogether because it's duplicate content as already provided in meta tags anyways.

And maybe we should just use the frog instead of that screenshot? What do you think?

I'm on the fence about the frog. Sites will go for rel="icon" and will scale it up to their dimensions, which makes the frog pop out of the embed, effectively cutting it off on the top and bottom. If you prefer that, I'm on board with it. Looks the cleanest on Discord too ironically. That said, the site.png looks odd on Discord but is fine for the others. Can't have both at the same time though.

[smeijer]

Oembed is there for iframe.ly and embed.ly. I'm not sure about what they need. So maybe we should just accept that discord won't be perfect?

About the frog, your image looks better. Maybe we'll optimize that more in the future with an image that scales better.

https://embed.ly/providers/validate/oembed?endpoint=https%3A%2F%2Fdeploy-preview-143--testing-playground-com.netlify.app%2Foembed&url=https%3A%2F%2Fdeploy-preview-143--testing-playground-com.netlify.app%2F%3Fmarkup%3DDwIwrgLhD2B2B8AoANtA5gS1o4B6cUc8QA%26query%3DM4YwTgphB2B0DmEAuAhAngJQPYBsIAoByAIwFckktpCBKIA

https://iframely.com/embed/https%3A%2F%2Ftesting-playground.com%2F%3Fpanes%3Dmarkup%2Cquery%26markup%3DDwGwhgRgpiAEBmB7ATgXgEQFcDOVkDswBbKdAPgFVcDipgB6caEMgKGAEt8AHTAF1YcAJhhx5CJdKwlRR1GVO7gAxlAAWiEELwYNAd1jYNmLbACSsZWBBwAnokwB%252BKULB8wAWj5RsfYaIVWPz4QWXQofG9kWHtMaLEaSVZrPgwIqJiHePlaKQA3a0wwgCtENXwPIURSINtuMO8ADz4pejZgCH4%252BRHxYGQxsDgBzfExudFg%252BOrDsTAgiDhayQZGxhk6%252BbvwyIA%26query%3DPTAEEUFcFMCcE9TwPaVqaAbaBbaA7AFwGdQALOaAGlAAdZoAzOAQwCNNEB3AS0LIBQIUAANiAYwYEAdAHNohAELxAZAQAKFQEoR00AElGSVKHEt8AckKhIxaELASp%252Ba7dHjkRFj3xxpARxgEAGUsaHFCZFgNbWkBexMPQi8fWH9A%252BBDscMi1c29aSEJzTQFHaBl5JXgAJWRsXLZCiItNIA

[ljosberinn]

I'll try to see how much of the oembed info can be omitted so that embed.ly and iframely are still happy.

[ljosberinn]

Dropped author meta tag & author info in oembed. When keeping the author tag but dropping the info in oembed, embed.ly will use the author tag as replacement and you wanted it removed anyways.

The only occurance of your name is now indirectly through the site:creator twitter tag, is that ok?

Discord looks like this now, using provider_name + host and og:title:

Twitter etc. are unchanged.

Embed.ly is still happy. But apparently I'm unable to test iframely with a deploy preview?

[smeijer]

The only occurance of your name is now indirectly through the site:creator twitter tag, is that ok?

Yeah, that's okay :)

Discord looks like this now, using provider_name + host and og:title:

Can we make that gray testing playground (the top most) into testing-playground.com? Or will that cause trouble on other sites?

[ljosberinn]

Good idea, seems to work just fine.

[smeijer]

Awesome! I'm okay with merging this if you are.

I'm am curious though, how did Kent do this? Is it a different image source?

[ljosberinn]

Thanks for the heads up, didn't know you could enforce that.

Guess it can be merged then :)

[smeijer]

Thanks for your hard work on this! Much appreciated!

[smeijer]

@all-contributors please add @ljosberinn for code.

*edit, Oops. you were already there! I'm new to this. 😇

[allcontributors]

@smeijer

I've put up a pull request to add @ljosberinn! 🎉

[smeijer]

@ljosberinn, do you know how to populate the thumbnail on twitter?

When browsing twitter, I see two versions:

1. Image on the left:

   

2. Big image on top

   

   But this is how playground renders (tweet):

   

[ljosberinn]

I will take a look!

[ljosberinn]

After investigating for a while, it might just be because the image has a leading slash. Tags itself should be fine.