Metadata is more important than JavaScript
Tags: html, webdiv
Published: 2020-07-16 01:24:49

People get excited about fancy 'code' = and that's great.

But you know what's _also great_? The boring stuff.

## When you share your website... it can look like _this_:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qm2530tl254k6aqv2d38.png)

But that's not very exciting. The website might be the coolest website in the world... but the point here - is that you want to give people trust in the link - and also make it seem exciting or serious or whatever story you want to tell - so that they'll engage. This just picks up the favicon and the URL. [(url)](https://peprojects.dev/s/sheriffderek/html/metadata-examples/none/)

## Or it can look like _this_:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/g3o3j86mg9bp9zpezxcg.png)

At least this one has the page title. [(url)](https://peprojects.dev/s/sheriffderek/html/metadata-examples/minimum/)

## Or it can look like _this_:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/unkrji1mpp89tz8ob1pw.png)

This one has open-graph metadata for 'title' and 'description' and an 'image.' This is an example in a text-message, but this stuff is what would be used on all the social networks - so, you might as well just cover your bases. This is a generic bit of information though. [(url)](https://peprojects.dev/s/sheriffderek/html/metadata-examples/full/)

## or it can look like _this_:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/grccwy1zl6g9lxn9kt8v.png)

This is a targeted message that tells the person exactly what they want them to know - and gives them a call to action. Right in their messaging app! This might mean more to the success of your company - than the actual website. Maybe your website just has a phone number on it. [(url)](https://peprojects.dev/s/sheriffderek/html/metadata-examples/targeted/)

## So - why does it matter? Are you sure? Isn't that just some boring HTML stuff?

No.

Our friend Arthur Jones: [futuresmells.com/](https://www.futuresmells.com/) _and a bunch of other people_ just spent **3 whole years** of their lives making [a documentary](https://www.feelsgoodmanfilm.com/) with Matt Furie.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/i6u2hlcb4q7kdg4ysa2u.png)

The trailer is out today and everyone is working hard to share it and make it a success - _and so_ we send it around to our friends and it looks like this:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/l5xq6tjjphrpi602wb4j.png)

If you're going to spend 3 years of all-day every-day passion project lifestyle / then you gotta make sure your developer spends 10 minutes to get the messages down for each page on the website and make sure that that rich sharing data is A+.

## People say it doesn't matter... but - well, are we crazy? Doesn't it?

What makes you want to learn more? This?

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/l5xq6tjjphrpi602wb4j.png)

Or this:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/u6zk803sruitj2p980qn.jpg)


Of course we've alerted them - and so if you check out [the site](https://www.feelsgoodmanfilm.com/) - it might be updated... but almost no one listens to us - so, we'll just have to check back and see.

metadata matters. It especially matter during covid. We've got some more writing about that over here: https://perpetual.education/content-strategy-and-covid-19/



## UPDATE 1

Not just any image will do. This .png for example - from the website, has no background!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/drzyb1iyd8bkngx8jbw3.png)

The go-to image size is 1200x630, but we usually double that in our graphics editor. (2400x1260) 

and you also need to really check with the facebook debugger: https://developers.facebook.com/tools/debug/?q=https%3A%2F%2Fwww.feelsgoodmanfilm.com%2F to see how it works... and really double check on devices like phones to make sure that the text is readable.

For example: 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lb7k0m7wsqbkhxvhrxa6.jpg)

might have the feet cut off - but the words will be legible on the smallest screens.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zhbp5z63p8adv7ne5erc.png)