# HTML - Rich previews Rich website preview is a new open web specification that uses [The Open Graph protocol](https://ogp.me/#metadata). It can be achieved with tags. ![[Pasted image 20231007130311.png|Twitter composter test for rich preview|300]] Tools to test/debug how they look like: - [Twitter](https://twitter.com/home) (You need create the post to see the preview - not post it) - [Facebook/Meta](https://developers.facebook.com/tools/debug/) - [LinkedIn](https://www.linkedin.com/post-inspector/inspect/) An example of html tags for 1Password’s rich preview: ```html <meta property="og:type" content="website"> <meta property="og:site_name" content="1Password"> <meta property="og:title" content="I’m sharing an item with you using 1Password"> <meta property="og:description" content="A password manager, digital vault, form filler and secure digital wallet. 1Password remembers all your passwords for you to help keep account information safe."> <meta property="og:image" content="https://share.1password.com/static/img/share-image-v1.png"> <meta property="og:image:secure_url" content="https://share.1password.com/static/img/share-image-v1.png"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@1Password"> <meta name="twitter:title" content="I’m sharing an item with you using 1Password"> <meta name="twitter:description" content="A password manager, digital vault, form filler and secure digital wallet. 1Password remembers all your passwords for you to help keep account information safe."> <meta name="twitter:image" content="https://share.1password.com/static/img/share-image-v1.png"> ``` ## References - https://blog.logrocket.com/open-graph-sharable-social-media-previews/