When to Use This Tool
- Preview how your website links will appear on Facebook or Twitter feeds.
- Verify that your Discord and Slack message previews display the correct titles and images.
- Debug missing or incorrect OpenGraph meta tags before publishing content.
Step-by-Step Workflow
- Open the tool
Navigate to the OpenGraph Link Previewer tool on the Bluesky Labs website.
- Enter inputs
Enter the full URL of the webpage you want to test into the input field.
- Run the action
Click the 'Preview' or 'Generate' button to fetch the metadata.
- Review results
Review the simulated cards for Google, Facebook, Slack, and Discord layouts.
- Adjust options
Adjust your website's meta tags if the preview displays incorrect information.
Best Practices
- Ensure your website has a high-resolution featured image (1200x630px) for optimal previews.
- Keep your page title concise to avoid being cut off in different social media layouts.
- Use unique meta descriptions for every page to improve click-through rates.
- Test the preview on multiple platforms as each site handles dimensions differently.
FAQ
What is an OpenGraph preview?
It is a snippet of information (title, description, and image) that social media platforms pull to create a rich link card.
Why does my preview look different on Facebook than it does on Slack?
Different platforms have unique requirements for aspect ratios, character limits, and supported image formats.