WordPress‘s default behavior when pasting a link in its editing interface (since the Gutenberg editor) is that it tries to create an embed block to show a link preview. But this only works when the page you link to has the correct <oembed> properties set.
WordPress relies on oEmbed to embed links, and it seems not many site owners are setting the oEmbed properties. The strange thing is that WordPress does favor oEmbed (instead of a Facebook open graph, or Twitter card tags), but does not allow me to set the oEmbed properties when writing a post in WordPress.
When you paste a link into an empty Gutenberg block, you will get the following message if the page you link to has no oEmbed properties set.
This is annoying. First, it should just convert it to a link instead of showing this dialog (or giving me a way to control that dialog). Secondly, if WordPress can’t find the oEmbed tags to render the link properly, why not, as a fall-back solution, read the object tags social media platforms use?
For reference, if a page is providing the oEmbed properties like the NYTimes is doing it, a link preview would look like this:
I have blogged about this issue in my post creating a link blog with WordPress (the announced project I never finished).
Now there is a plugin available, written by my friend Johannes “Zeitwesen”, which solves that issue. The plugin is called Beautiful Links.
Once installed, you can add links to your posts using the beautiful links shortcode. If you do that, it creates a link preview based on the Facebook Open Graph properties or Twitter card tags, including any preview image.
How does it work?
After downloading and activating the plugin (right from your WordPress dashboard), you can use the shortcode block to add links in your posts.
[beautiful_link_preview url="https://freshvanroot.com/newsletter/"]Which will create the following link preview in your post:
[beautiful_link_preview url=”https://freshvanroot.com/newsletter/”]
The plugin comes with some additional options you will easily figure out. You can choose between two different preview styles, and you will also find information on how to customize the CSS so that the link preview matches the style of your site. Check out all plugin settings, and reach out to Johannes with our feature requests!
This plugin is especially useful for bloggers that curate content and want to add well-looking previews to the content shared.
Hand-picked related content