Created December 2024

Webmentions

A brief-ish introduction to the idea of a webmention!

What is a webmention?

Webmentions are a way for one web page to tell another web page that they have linked to them.

So here's two pages, one linked to the other.

Screenshot of https://smorgasborg.artlung.com/douglasadams/

→

Screenshot of https://artlung.com/blog/2016/10/06/audio-packrattitude/

You could say that a source page has linked to a target page. For the source page to tell the target page about the link. It can send a webmention. To do that, it needs to know if there's an endpoint to send the webmention to.

Is there an endpoint?

If the second page indicates in its source code that it can receive webmentions, it usually will include an HTML <link> tag with an attribute of rel="webmention". In this case, the WordPress Webmention plugin has added it. Some of what this page describes is all automated by content management systems like WordPress.

BUT!—you don't have to run a CMS to receive webmentions. Any plain HTML page can receive a webmention. To let people know you can receive them, you add a <link> tag.

For example:

<link rel="webmention" href="https://artlung.com/wp-json/webmention/1.0/endpoint" />

Link tags are meant to be in the <head> of an HTML page. Invisible. I usually use Brent Lineberry's Supports Webmentions? bookmarklet. Read about it here

Okay, so how do I send the message?

→

One way is with "curl"

Curl is a command line tool to call web pages. "Console" programs can be intimidating. But this one is not so different from a web form. ...Skip to the web form

curl -i -d "source=https://smorgasborg.artlung.com/douglasadams/&target=https://artlung.com/blog/2016/10/06/audio-packrattitude/" \
https://artlung.com/wp-json/webmention/1.0/endpoint

That curl command has some options:

-i is what makes the command give back very detailed request headers.
-d is the parameter that indicates the payload. A querystring that includes the source and target urls.

The final part of the curl command is the url of the site that can receive the webmention. GET requests are mostly what we are making when we click links.

In this case it would transmit to the endpoint: https://artlung.com/wp-json/webmention/1.0/endpoint

This form, when submitted, does the same thing, minus the request for detailed headers:

<form action="https://artlung.com/wp-json/webmention/1.0/endpoint" method="get">
    <input type="url" name="source" value="https://smorgasborg.artlung.com/douglasadams/">
    <input type="url" name="target" value="https://artlung.com/blog/2016/10/06/audio-packrattitude/">
    <input type="submit" value="Send Webmention">
</form>

Okay, I'm ready to run the curl command...


>>> curl -i -d "source=https://smorgasborg.artlung.com/douglasadams/&target=https://artlung.com/blog/2016/10/06/audio-packrattitude/" \
https://artlung.com/wp-json/webmention/1.0/endpoint

HTTP/2 200
vary: Accept-Encoding,Cookie
x-robots-tag: noindex
link: <https://artlung.com/wp-json/> rel="https://api.w.org/"
x-content-type-options: nosniff
access-control-expose-headers: X-WP-Total, X-WP-TotalPages, Link
access-control-allow-headers: Authorization, X-WP-Nonce, Content-Disposition, Content-MD5, Content-Type
allow: POST, GET
content-type: application/json; charset=UTF-8
date: Wed, 18 Dec 2024 01:15:49 GMT
server: Apache
{
    "link": "https:\/\/smorgasborg.artlung.com\/douglasadams\/",
    "source": "https:\/\/smorgasborg.artlung.com\/douglasadams\/",
    "target": "https:\/\/artlung.com\/blog\/2016\/10\/06\/audio-packrattitude\/",
    "code": "success",
    "message": "Webmention was successful"
}

That bit in the code where it says "Webmention was successful" means it worked! The endpoint accepted the webmention. It's important to know that the page doesn't have to display the webmention, but they could, or may in the future. That's a decision that the person responsible for the target page makes.

Webmentions can communicate more than linking. By adding microformats to the source page's link,, likes, mentions, replies and reposts can be sent.

Thanks for reading. If you have questions feel free to leave a comment below using the Disqus comment system. You could also send an email to joe@artlung.com if you have any questions or suggestions.

Also

You can edit the example code of the source, target, and endpoint urls in this page if your browser supports the contenteditable attribute.