SEO Traffic Increases for IndieWeb Reads, Watches, Listens, and other Bookmarked Content

I usually think not a wit about SEO and web stats/traffic with respect to my personal website, but a recent WordPress notification about an unusual spike in traffic got me thinking.

In the past, I’ve very often posted some social bookmark-type posts of what I read, watch, and listen to online. They’re usually of a very small microblog or linkblog sort of nature and have very little intrinsic value other than to people who may want to closely follow this sort of minutiae to see what I’ve been interested in lately.

Recently I noticed that there’s been a 4-5 fold increase in web traffic to my site, so I thought I’d take a look and it turns out that I’m getting some larger than usual numbers of visitors to my site for an article I bookmarked as having read three years ago.

Here’s a list of the top ten most highly trafficked pages on my website over the past year. 

Most visited pages on my website over the past year

The top post with almost 18,000 views in the last year is essentially a link to an article I read about gaslighting in 2018 which includes a brief reply context (reminder) of what the original post is about. The next two are slightly differently named links to my homepage for a total of 6,500 views followed by an article I wrote about TiddlyWiki (1,500 views). Articles I wrote about commonplace books, my furniture hobby, and my about page are also among my native content in the top ten.

However a watch post about How to Buy a Velomobile (1,310 views), and read posts about configuring an iPhone (I don’t even own one) (654 views) and an article about opinions and fact checking in the Houston Press (619) round out the bottom of the list.

I don’t know what to really think about these short bookmark posts accounting for so many views or that my site ranks so highly in terms of SEO for some of these oddball topics (look at the mnemonics and commonplace aficionado calling the kettle black).

I’m wondering if I should look at my little widget that recommends content and begin to narrow it down to more of my own native content? Should I tamp down on content I was tangentially interested in at some point but don’t really care about or want to rank on? Gaslighting and fact checking are interesting broad topics to me, but velomobiles and iPhones really aren’t. Of the tens of thousands of things I’ve linked to, why should these stick out in particular? I get that there’s probably only a limited number of people writing about velomobiles, but the others?!?

It does make me wonder if other IndieWeb site owners have experienced the same sort of quirky behavior? What implications might this have on SEO if more of the wider web was taken over by personal sites instead of corporately controlled silos like Facebook, Twitter, and Instagram? I’m sure there are other great questions to be asked here. Brainstorming of ideas, answers, and implications are encouraged below.

Replied to Social Interactions on the Web by James Gallagher (jamesg.blog)
When I think about it, likes and bookmarks are somewhat difficult to distinguish for my purpose. A bookmark inherently implies that I liked a post because I usually only bookmark posts on Pocket that I like and want to save for later. I use Firefox bookmarks to track the articles that I have not yet read and want to come back to later. There is a distinction. A like is clearer. It’s my way of saying that I did like your content. Not everybody will know my policy on bookmarks, so having a like feature is useful. 
My general heirarchy is that bookmarks are things I want to come back to (and usually read) later, reads are things that I’ve read, like are things I’ve read and want to send appreciation for, and replies are things that usually are both read, liked, and needed even a bit more.
Here’s more on how I’ve thought about it before: https://boffosocko.com/2018/03/10/thoughts-on-linkblogs-bookmarks-reads-likes-favorites-follows-and-related-links/
I just automated my creating stars on Github to syndicate that intent and data (by PESOS) back to my website as bookmarks. Here’s an example on my site.

This is done using a variation of Using IFTTT to syndicate (PESOS) content from social services to WordPress using Micropub.

As part of this I used the feed pattern https://github.com/{{username}}.atom to input a feed which I’m filtering with my username and the word “starred” to pull out the correct items to syndicate.

I couldn’t find a permalink URL for the star itself, so I’m adding a syndication link that points to the page of “stargazers” for the individual repo that I’m bookmarking. 

While GitHub calls these stars and I might have mapped them to “likes” on my website, I’ve always thought of my intent as more of a bookmark. In practice I often use my stars as bookmarks for things I want to come back to visit on their site anyway. Since it’s my website and I have the control, I get to choose.  Of course I also have the facility to create a star post kind on the site too, but the semantic difference just doesn’t warrant the work.

Now to figure out how I might extract out all of my prior data to backfill old bookmarks like this…

I’ve now got about 20 webhooks set up to pull back data out of silos like this including ones for GoodReads, GitHub, Hypothes.is, Last.fm, Spotify, Untappd, Twitter, Letterboxd, Diigo, Reading.am, Huffduffer, Google Calendar, Meetup.com, YouTube and Pocket.

Replied to a thread (Twitter)
Lots of potential ways of shaving this yak.

The best “modern” way would be to create a Micropub endpoint and then you can use some of the excellent multi-platform Micropub clients like Quill, Omnibear, Micropublish.net, etc. The benefit of this is that you get way more than just bookmarks.

I don’t know if anyone has set one up to work with Eleventy or Netlify, but there is some prior art for other static site generators. 

The low brow solution may be to take the route I took with TiddlyWiki, but that includes some cutting and pasting, so it may be helpful, but isn’t a completely automatic solution. You’ll note there’s a reply at the bottom of the post that modified my code for use with Roam Research which also includes code for browser extensions as well.

If you want to go crazy with some .php, there’s Parse This code for a plugin for WordPress that might be co-opted. It will parse a variety of pages for microformats, JSON-LD, schema, OGP, etc. to return rich data on a huge variety of websites to give you lots of metadata to create a bookmark, but this may be over and above anything you might want. I use it as a built-in product in the Post Kinds Plugin for WordPress to create a wide variety of post types for reply contexts.

Bookmarked WordPress by Jan Bozzez (janboddez.tech)
Through the years, I’ve created a few (child) themes and plugins for WordPress. Some of them are described below, and more will surely follow.
Jan has some awesome IndieWeb-esqe plugins for WordPress, how have I not seen these before?! If David Shanske hasn’t seen them yet, he definitely should be aware of them.

We should definitely add some of these to the IndieWeb wiki as necessary.

Jan if you’d like to join a group of us helping to improve the web standards and IndieWeb-friendliness of WordPress, do reach out.

Annotation posts >> Highlight posts

Because they’re so similar, I’ve decided to discontinue the custom highlight posts my site had in lieu of the more prevalent annotation post kind. The layout and format of both as highlighted text quoted from another site was almost exactly the same with the primary difference being my additional commentary added to the highlighted text to call it an annotation. Conceptually I considered “highlight + commentary/reply = annotation”. The difference is marginal at best–pun intended.

Since I only had 13 highlight posts versus 121 annotation posts (plus various additional annotations and highlights which I’ve rolled up into the body of some of my read posts) over the last year and a half, I felt it seemed redundant and bothersome to maintain two separate, but nearly identical post kinds. Semantically one may think of a highlight on some text as an annotation anyway, thus the idea of annotation subsumes that of a simple highlight.

As of this evening, I’ve changed all the custom highlight posts to be of the annotation kind. Other than the one word visual difference of the post kind text changing from “highlight” to “annotation” this change won’t affect much except for those who may have been subscribed to the highlight feed. Going forward you may consider subscribing to my annotation feed instead.

I had created highlight posts first, but in the end annotation posts have won the day. And for those that don’t have them, fear not, because honestly annotation posts are really just glorified bookmarks with custom text in the context. (The glorification only entails a highligher icon instead of a bookmark icon and a bit of CSS to color the text yellow.) I do find having them delineated for my personal research purposes useful though.

Read PESOS for Pocket by Charlotte AllenCharlotte Allen (charlotteallen.info)
A few weeks ago, I made a post about how I got PESOS working for Facebook and Instagram using IFTTT. Now, I’ve gone ahead and done something similar with Pocket and IFTTT!
The code is similar to my linked post. As always, you’ll want to customize everything for your own needs, as well as add your own auth token.
A great way to leverage Micropub!
Replied to a tweet by Allie Nimmons (your friendly neighborhood pain in the ass)Allie Nimmons (your friendly neighborhood pain in the ass) (Twitter)
This was an inspiring question to me, so I thought I’d spitball a few ideas for doing this in an IndieWeb way. Personal events like this are an excellent use case with respect to personal websites!

I had thought of doing some of this ages ago to own this sort of great nostalgic data on my own website. Sadly I couldn’t get it up due to other work commitments. I now really wish I had.

At the moment, the only direct wedding-related page on the IndieWeb wiki is a snarky definition for engagement. When I’m done, I’ll create a stub for wedding with the following brainstorm.

Of course if you’re looking for general inspiration, the prior artwork of Pinterest, various registries, and other wedding sites will naturally be useful. But I think there are a number of IndieWeb building blocks that can be leveraged to accomplish a lot of what these sites do.

I think if I were doing it today, I’d meld some of the work from bookmarks and photos to create a Pinterest-esqe post type (probably by extending the Post Kinds Plugin, maybe with a custom wedding type with a custom display).

There is lots of prior art on the registries front on the wiki under wish or wish lists. To goose things a bit, I’d definitely add referral links from places like Amazon.com, etc. and use the money either to make a donation to a charity in honor of the event or to defray honeymoon costs. If you want to encourage direct donations or funding mechanisms, there’s also some interesting prior art at the payment wiki page.

Now that the IndieWeb has some very solid support for events and RSVPs, I might even try doing an online wedding invitation and collecting RSVPs. I’ve recently seen Jacky Alcine’s website leveraging CommentPara.de to connect to Quill for comments/replies, and it would be cool to get Quill to also add RSVP functionality to allow those without their own websites to RSVP using the non-anonymous functionality in CommentPara.de. I suspect that since many people have trouble getting RSVP functionality into their sites, that Aaron Parecki might be Tom Sawyered into providing that functionality as a quick and easy win for the broader community. (I’m not immediately aware of any other Micropub tools that do RSVPs though I may be wrong.) Of course potentially expanding it with meal options would be a lovely bonus so people can choose meat/vegetarian/other options. I’ll also mention that gRegor Morill has been tinkering with RSVPs using Webmention on Twitter. As a minimal fallback, you can also allow people to respond directly in the built-in commenting system in WordPress, but if you’re going to do it…)

The biggest piece that would be fun to figure out would be to see how to get things set up to receive social media related wedding photos of the pre-, during, and post-event stuff back to my website from friends and family. Using Brid.gy with Twitter to pull back photos that tag your twitter user name is fairly straightforward, but I’m not sure that services like Flickr or Instagram may work as easily. This may require some thought and programming, but being able to backfeed social photos to your site or even providing friends and family a serviceable photo upload functionality to your site so you can document and keep photos from the event in real-time would be a cool win and could likely be a great feature for any event-related website to have built in or widgetized. It’s usually weeks or months for paid wedding photos to show up and it’s generally a big hassle finding all the online social photos, much less keeping copies of them, so having this could be both fun and useful, particularly for looking back on the event years later. 

Naturally, being a WordPress person, I’m sure there may be some interesting prior art in the plugin repository, but I think it would be far cooler to IndieWebify this sort of data and functionality for the broader world.

Depending on the wedding date, this general topic (even for other non-wedding related events) would be an awesome one to look at and explore during an upcoming IndieWebCamp. Perhaps someone is up for it at San Francisco this weekend? (I suspect they’ll have some good live-streaming options for those who aren’t local.)

Given her weddings/events background and web-based work, perhaps Liz Coopersmith (t) might be someone interesting to collaborate with on something like this? 

Similarly, I recall a great presentation by Brianna Privett at WordCamp US 2017 called The Story of Your Life: Using WordPress as Your Memory Warehouse. She may have some useful tidbits and advice in there as well.

Featured photo: Wedding cake. flickr photo by THEMACGIRL* shared under a Creative Commons (BY-NC-ND) license

Read Correctly using bookmarks (instead of reposts) by Jamie Tanna (jvt.me)
As I've embraced indie post types, such as reposts, I've noticed that actually I've been using them wrong. Looking at https://indieweb.org/bookmark#Repost it appears I've been conflating a "retweet" on Twitter with a "repost", thinking they were the same. Alas, they are not, and it makes more sense to be a bookmark. I've since updated the posts using the wrong type and will get things right next time!

Lurking, Twitter, The Commons, and Private Posts

Lurking

Yesterday I was catching up on chat logs and ran across a stub for lurking on the IndieWeb wiki. I cleaned up the formatting a bit and added some additional material. Later Ton Zijlstra dropped a link to his excellent article from 2004 on the topic: Lurking and Social Networks (though honestly, I first came by the link courtesy of our good friend Jeremy Cherfas who added it to the wiki page).

Lurking is the quiet watching/listening that what many people of the web do in chat rooms in order to begin gauging culture, learning jargon or lingo, and other community norms or unspoken principles before diving in to interact on a more direct level with other participants.

While the word lurking can have a very negative connotation, online it often has a much more positive one, especially in regard to the health and civility of the commons. Rather than rehash what Ton has done an excellent job of doing, I won’t go into the heavy details and history of online lurking, but instead, let’s take a look at where it isn’t in today’s social media landscape.

Twitter

Since 2004, Twitter and a slew of other social media has popped up on the scene and changed many of our prior behaviors concerning lurking. In particular, Twitter’s interface has made it far easier to either like/favorite a post or retweet it.

In comparison the the preceding era of the blogosphere represented by Tons’ post, Twitter has allowed people to send simple notifications back and forth about each others’ posts indicating a lower bar of interaction than writing a thoughtful and measured comment. Now instead of not knowing about dozens, hundreds, or thousands of lurkers, a (micro)blogger would more quickly know who many more of their readers were because they were liking or resharing their content. Naturally there are still many more potential lurkers who don’t interact with one’s posts this way, but these interactions in some way are like adding fuel to the fire and prompt the writer to continue posting because they’re getting some feedback that indicates they’ve got an audience. Twitter has dramatically lowered the bar for lurkers and made it more socially acceptable for them to make themselves known.

A mid-century imagining of a Twitter company sign on the side of a commercial building, but aged to the point that the sign is rusted, broken, and decaying from neglect
Twitter image from the collection Social Decay by Andrei Lacatsu

Of course, not all is rosy and happy in Twitterland as a result of this lowering the social bar. Because it’s so easy to follow almost anyone and interact with them, naturally everyone does. This means that while before one may have lurked a blog for weeks or months before posting a response of any sort, people are now regularly replying to complete strangers without an resistance whatsoever. While this can be valuable and helpful in many instances, oftentimes it comes off as rudely as if one butted into the private conversation of strangers at a public gathering. At the farther end of the spectrum, it’s also much easier for trolls to tag and target unsuspecting victims. As a result, we have the dumpster fire that Twitter has become in the past several years for many of its users.

The problem for the continued health of the commons is how can we maintain a bar for online lurking, but still provide some feedback? How can we keep people from shouting and yelling at passer-by from their proverbial front porches or vice-versa? How might we encourage more positive lurking online before directly jumping into a conversation? 

Read Posts and Private Posts

For several years now, as a part of the IndieWeb movement, I’ve been more directly controlling my online identity and owning my content by using my own domain name and my own website (boffosocko.com). While I still use Twitter, I’m generally only reading content from it via a feed reader. When I post to or interact with it, I’m always publishing my content on my own website first and syndicating a copy to Twitter for those who don’t own their online identities or content and (sadly) rely on Twitter to do that for them. 

Within this setting, since roughly late 2016, I’ve been posting almost all of what I read online or in books, magazines, or newspapers on my own website. These read posts include some context and are often simply composed of the title of the article, the author, the outlet, a summary/synopsis/or first paragraph or two to remind me what the piece was about, and occasionally a comment or two or ten I had on the piece.

screencapture of a read post on my website
An example read post with context from my website at https://boffosocko.com/2019/06/02/lurking-and-social-networks-ton-zijlstra/

In tandem with these posts, I’m also sending webmentions to the websites of those pieces. These (experimental) read webmentions are simply notifications to the originating site that I’ve read their piece. In our prior framing of lurking or Twitter, I’m sending them the simplest notification I can think of to say, “I’m here lurking. I’m reading or looking at your work.”

I’m not saying that I liked it, favorited it, disliked it, bookmarked it, commented on it,  or anything else, but simply that I read it, I consumed it, I spent the time to interact with it. But in contrast with Ton’s older method of looking at server logs to see what kind of traffic his posts are getting, he can see exactly who I am and visit my website in return if he chooses. (Ton’s old method of sifting through those logs was certainly not a fun experience and the data was usually relatively anonymous and useless.) These newer read notifications could potentially give him a much richer idea of who his (lurking) audience actually is. Then when someone shows up with a comment or reply, it’s not completely from out of the dark: they’ve previously indicated that they’re at least somewhat aware of the context of a potentially broader conversation on his site.

These read notifications are semantically different from likes, favorites, or even bookmarks on other platforms. In fact many platforms like Twitter, which has moved from “stars” (with the semantic idea of a favorite) to “hearts” (with the semantic idea of a like), have so few indicators of reaction to a post that the actual meaning of them has been desperately blurred. Personally I’ll use Twitter’s like functionality variously to mean: “I’m bookmarking this (or the linked article within it) for reading later”, “I like this post”, “I’ve read this post”, or even “I’m acknowledging receipt of your reply to me”. That’s just too much meaning to pack into a silly little heart icon.

Because I’m using my own website over which I have complete control, I can make it do a better job of unpacking some of this semantic tom-foolery. I’ve written about it a bit in the past if you care to see some of the details: Thoughts on linkblogs, bookmarks, reads, likes, favorites, follows, and related links. See also: the read-posts tag on this site.

If they choose, some website owners display these read post notifications in one or more ways. Some sites like Aaron Parecki’s or Jeremy Keith’s will show my interactions as bookmarks. Others, primarily WordPress-based websites that support Webmention (via plugin), will actually show these interactions in their comment sections under the heading “Read” and display my photo/avatar as an indicator that I’ve interacted with that post. In the case of read posts on which I’ve written one or more comments, the receiving site also has the option of showing my interaction not as a read/bookmark intent, but could also show my comments as a reply to their post. I’ve written a bit about this and its potential for large news outlets before in Webmentions: Enabling Better Communication on the Internet for A List Apart. There are also some older legacy sites that might show my interactions as a trackback or pingback, but these seem few and far between these days, particularly as those systems are major targets for spam and the Webmention protocol has a richer interaction/display model.

screencaputure showing how Jeremy Keith displays my read post as a bookmark. The relevant section reads: "# Bookmarked by Chris Aldrich on Thursday, April 11th, 2019 at 1:31pm"
How Jeremy Keith displays shares, likes, and bookmarks (including my read post) in the comment section of his website.
Facepiled Likes, Reads, and Mentions in the comment section of the online newspaper with a heading "Reading" under which appears an avatar indicating one person has read the article.
The display of a read post on ColoradoBoulevard.net

A new itch

But as I think about these read posts, lurking, and being more civil on the internet, I have a new itch for some functionality I’d like to add to my website. I very frequently use my website as a digital commonplace book to collect links of things I’ve read, watched, and listened to. I’ll collect quotes, highlights, and even my own marginalia. As I mentioned above, my read posts sometimes have comments, and quite often those comments are really meant just for me and not for the author of the original post. In many cases, when my comments may be too egregious, sensitive, or perhaps even insulting to the original author, I’ll make these posts private so that only I can see them on my site.  Of course when they’re private, no notifications are sent to the site at the other end of the line.

Sometimes I would like to be able to send a read notification to the site, but also keep my commentary privately to myself. This allows me to have my notes on the piece and be highly critical without dragging down the original author or piece who I may not know well or the audience of that same piece which I haven’t properly lurked (in the positive community-based sense indicated above) to be as intelligently and sensitively commenting as I would otherwise like. Thus I’d like to build in some functionality so that I can publicly indicate I’ve read a piece (and send a notification), but also so that I can keep the commentary on my read private to either myself or a smaller audience.

I suspect that I can do this in a variety of meta-fields on my website which aren’t shown to the public, but which might be shown to either myself or logged in users. In some sense, this is a subset of functionality which many in the IndieWeb have been exploring recently around the ideas of private posts or by limiting the audience of a post. In my case, I’m actually looking at making a post public, but making smaller sub-portions of it private.

To begin with, I’ll most likely be looking at doing this at a small scale just for myself and my commonplace book, as I can definitely see second and third-order effects and a variety of context collapse issues when portions of posts are private, but others who may be privy to them are commenting on those pieces from the perspective of their public spheres which may not be as private or closed off as mine. i.e.: While I may have something marked as private, privy readers will always have the option of copy/pasting it and dragging it out into the public.

For those interested, I’ll briefly note that Sebastiaan Andeweg just wrote Private posts: the move of the checkins which has some useful and related background to private posts. (Of course I remember exactly when I read it.) I also highly suspect there will be a private posts related session(s) at the upcoming IndieWeb Summit in Portland in June (tickets are still available). I’m interested to see what others come up with on this front.

👓 The evolution of linkblogging | Manton Reece

Read The evolution of linkblogging by Manton Reece (manton.org)
In my posts about defining what makes a microblog post and guidelines for RSS, I talked a little about links but didn’t explore linkblogging. While many blog authors post primarily long essays, shorter link blogs are a common approach for bloggers who want to post new content several times a day. ...
Some subtle, but valuable disntinctions here. When is a bookmark not a bookmark.

Ideas for IndieWeb-ifying Hypothes.is

I use Hypothes.is regularly as part of my daily workflow. I’m also very interested in being able to “own” the data I generate with the tool and being able to keep it on my own digital commonplace book (aka website). As part of this, I’d like to be able to receive notifications from people publicly annotating, highlighting, and replying to my content and potentially display those directly on either my website in the comments section or as marginalia.

I’d promised to do a quick outline for the kind gang at Hypothes.is to outline how to make their product could be a bit more open and support some additional web standards to make it more IndieWeb friendly as well as to work toward supporting the Webmention protocol to send notifications of annotations on a page. A few weeks ago at IndieWebCamp New Haven I decided to finally sketch out some of the pieces which should be relatively easy for them to implement into the product. Below are some of the recommendations and some examples of what needs to be done to implement them into their platform to allow it to better interact with other content on the web. This post is in reply to a few prior conversations about Webmention, but primarily pertains to Microformats which will help in creating those. [1] [2] [3] [4]

Overview

To my knowledge Hypothes.is generates a hash for each annotation it has in the system and generates two separate, but related URLs for them. As an example, here are the two URLs for a response Jon Udell made on my website recently:

The first URL is where a stand-alone copy of the annotation lives on the web, separate from the content it is related to. screen capture of the content at URL https://hypothes.is/a/_tLJyA-cEemE-qPndyfQow The second URL resolves to the page on which the annotation was made and both will automatically open up Hypothesis’ side drawer UI to the annotation in question and will–on most browsers–auto-scroll down the page to show the point at which the annotation was made. Essentially this second URL shows the annotation in-situ in conjunction with the Hypothes.is user interface. I’ll note that they can also have some human readable trailing data in the URL that indicates the site on which the annotation was made like so: https://hyp.is/_tLJyA-cEemE-qPndyfQow/boffosocko.com/?p=55708991. However, in practice, one could remove or replace the boffosocko.com and trailing portion with any other URL and the correct page will still resolve.

It is great that they make the first URL available with the relevant data. This in itself is very IndieWeb friendly to have each annotation in the system have its own stand-alone URL. Sadly all the data on this particular page seems to be rendered using JavaScript rather than being raw HTML. (See also js;dr.) This makes the page human readable, but makes it much more difficult for machines to read or parse these pages. I’d recommend three simple things to make Hypothes.is more (Indie)Web friendly:

  1. Render the annotation on the first URL example in full HTML instead of JavaScript;
  2. Add the appropriate microformats classes on those pages;
  3. Add the canonical URL for the page on which the annotation is in reference to either instead of or in addition to the Hypothes.is prefixed URL which already appears on these pages. Webmention functioning properly will require this canonical URL to exist on the page to be able to send notifications and have them be received properly.

These things would make these pages more easily and usefully parseable on the open web. If/when Hypothes.is may support Webmention (aka web notifications) then all of these prerequisite pieces will already be in place. In the erstwhile, even without Hypothes.is running code to support sending Webmentions, users could force manual Webmentions using services like Telegraph, mention-tech.appspot, or even personal endpoints generated on individual posts (see the one below) or on custom endpoint pages like mine on WordPress. Aaron Parecki’s article Sending your First Webmention from Scratch is a useful tutorial for those with little experience with Microformats or Webmention.

Types of Annotations and Microformats Markup

To my knowledge there are three distinct types of annotations that might occur which may need slightly different microformats mark up depending on the type. These are:

  1. Unassigned page notes (or sometimes orphaned page notes): For all intents and purposes are the equivalent of bookmarks (and are used this way by many) though they go by a different name within the service.
  2. Highlights of particular passages: In IndieWeb parlance, these are roughly equivalent to quotations of content.
  3. Highlights and annotations of particular passages: In IndieWeb terms these again are quotes of content which also have what might be considered a reply or comment to that segment of quoted text. Alternately the annotation itself might be considered a note related to what was highlighted, but I suspect from a UI and semantic viewpoint, treating these as replies is probably more apropos in the majority of cases.

Each of these can obviously have one or more potential tags as well. Some of the examples below include the p-category microformats for how these would logically appear. Using the example URL above and several others for the other cases, I’ll provide some example HTML with proper microformats classes to make doing the mark up easier. I’ve created some minimal versions of text and mark up, though Hypothes.is obviously includes much more HTML (and a variety of divs for CSS purposes. While some of the mark up is a bit wonky, particularly with respect to adding the hyp.is and the original posts’ canonical URLs, it could be somewhat better with some additional reworking of the presentation, but I wanted to change as little as possible of their present UI. For the minimal examples, I’ve stripped out the native Hypothes.is classes and only included the semantic microformats. Because microformats are only meant for semantic mark up, the developers should keep in mind it is good practice NOT to use these classes for CSS styling.

Page note with no annotations (bookmarks)

Example from https://hypothes.is/a/_tLJyA-cEemE-qPndyfQow (but without the annotation portion)


<div class="h-entry">
    <a class="p-author h-card" href="https://hypothes.is/users/judell">judell</a>
    Public on <https://hyp.is/_tLJyA-cEemE-qPndyfQow/boffosocko.com/?p=55708991>"Chris Aldrich on the IndieWeb"</a> (<a class="u-bookmark-of" href="https://boffosocko.com/?p=55708991">boffosocko.com</a>)
    <time class="dt-published" datetime="2019-01-11 18:052:00" title="Friday, Jan 11, 2019, 6:52 PM"><a href="https://hypothes.is/a/_tLJyA-cEemE-qPndyfQow" target="_blank" rel="noopener">Jan 11</a></time>
    
<div class="p-category">tag-name1</div>
 
<div class="p-category">tag-name2</div>
 
<div class="p-category">tag-name3</div>
</div>

Page note with an annotation

(aka a reply, but could alternately be marked up as above as a bookmark) Example from https://hypothes.is/a/_tLJyA-cEemE-qPndyfQow


<div class="h-entry">
    <a class="p-author h-card" href="https://hypothes.is/users/judell">judell</a>
    Public on <https://hyp.is/_tLJyA-cEemE-qPndyfQow/boffosocko.com/?p=55708991>"Chris Aldrich on the IndieWeb"</a> (<a class="u-in-reply-to" href="https://boffosocko.com/?p=55708991">boffosocko.com</a>)
    <time class="dt-published" datetime="2019-01-11 18:052:00" title="Friday, Jan 11, 2019, 6:52 PM"><a href="https://hypothes.is/a/_tLJyA-cEemE-qPndyfQow" target="_blank" rel="noopener">Jan 11</a></time>
    
<div class="e-content">
        
<p>This is web thinking in action.</p>
<p>https://blog.jonudell.net/2011/01/24/seven-ways-to-think-like-the-web/</p>
<p>Well done!</p>

    </div>

    
<div class="p-category">tag-name</div>
</div>

Highlights (aka quotes)

Example from https://hypothes.is/a/_tLJyA-cEemE-qPndyfQow


<div class="h-entry">
    <a class="p-author h-card" href="https://hypothes.is/users/judell">judell</a>
    Public on <a href="https://hyp.is/gBZPQucmEeaPBQvYzSRo-Q/www.theatlantic.com/magazine/archive/1945/07/as-we-may-think/303881/">"As We May Think"</a> (<a class="u-quotation-of h-cite" href="https://www.theatlantic.com/magazine/archive/1945/07/as-we-may-think/303881/">www.theatlantic.com</a>)
    <time class="dt-published" datetime="2017-04-30 08:40:00" title="Sunday, Apr 30, 2017, 08:40 AM"><a href="https://hypothes.is/a/_tLJyA-cEemE-qPndyfQow" target="_blank" rel="noopener">Apr 30, 2017</a></time>
    
<blockquote>First he runs through an encyclopedia, finds an interesting but sketchy article, leaves it projected. Next, in a history, he finds another pertinent item, and ties the two together.</blockquote>

    
<div class="p-category">IAnnotate2017</div>
</div>

Annotations (replies)

Example from https://hypothes.is/a/9JrX5lf9RraeLKKn9WwmMQ


<div class="h-entry">
    <a class="p-author h-card" href="https://hypothes.is/users/jeremydean">jeremydean</a>
    Public on <a href="https://hyp.is/9JrX5lf9RraeLKKn9WwmMQ/www.theatlantic.com/magazine/archive/1945/07/as-we-may-think/303881/">"As We May Think"</a> (<a class="u-in-reply-to" href="https://www.theatlantic.com/magazine/archive/1945/07/as-we-may-think/303881/">www.theatlantic.com</a>)
    <time class="dt-published" datetime="2015-09-02 15:11:00" title="Wednesday, Sep 2, 2015, 03:11 PM"><a href="https://hypothes.is/a/_tLJyA-cEemE-qPndyfQow" target="_blank" rel="noopener">Sep 2, 2015</a></time>
    
<blockquote class="p-in-reply-to h-cite">This has not been a scientist's war; it has been a war in which all have had a part.
<blockquote>
    
   
<div class="e-content">
        
<p>It kind of blows me mind that the end of WWII is the context for these early dreams of the Internet. Is it the hope experienced in patriotic collaboration toward technological innovation? That's what Bush seems to acknowledge explicitly. It's a techno-militaristic union that haunts us to this day (#prism). But I wonder too if it's the precarious of knowledge, or perhaps the destructiveness of knowledge, that also inspires Bush…</p>

    </div>

    
<div class="p-category">tag-name</div>
</div>

I’ll also note that there’s the potential of a reply on Hypothes.is to a prior reply to a canonical URL source. In that case it could be either marked up as a reply to the “parent” on Hypothesis and/or a reply to the canonical source URL, or even both so that webmentions could be sent further upstream. (My experience in this is more limited, not having dealt with it personally in the past.) Once these pieces are implemented, they can be tested against a variety of microformats parsers to ensure they’re outputting the correct (and properly nested) information. I often find that pin13 is a pretty solid modern and up-to-date choice for this.

Additional resources with examples

I’ll also leave the caveat here, that while I’ve got a stronger grasp of Microformats than the average bear, that the above examples may have some subtle quirks that others may catch or which could be improved upon. I find that the Microformats web chat can be a good source for helps from some of the world’s best experts in the area. (Other methods for engaging in chat via IRC, Slack, etc. can be utilized as well.)

If Dan, Jon, or any of the gang has questions about any of this, I’m happy to chat via phone, video conference, or other to help get them going.

Read a post by Daniel Goldsmith (View from ASCRAEUS)

I wanted a simple self-hosted read-it-later service, something akin to Instapaper and Pocket, but without the overheads involved in running something like Wallabag.

Failing to find one, I wrote my own, and have just released it to the wilds.

It is very very simple, and uses Andres Rey’s php port of Mozilla’s Readability.js to grab pages for reading. There’s no interface to speak of, just a lightweight api with POST and a DELETE calls exposed. All files are saved as flat html, with a json index. No databases.

While writing it I’ve been prototyping it on my own site, and have been loving the experience. Its like the web, but the way it should be. If anyone else finds it useful, that’s a bonus.

👓 Bookmark: Using Inoreader as an IndieWeb feed reader | Digging the Digital

Read Bookmark: Using Inoreader as an IndieWeb feed reader by Frank Meeuwsen (Digging the Digital)
Ik onderzoek weer hoe ik deze pagina’s beter kan gebruiken als een commonplace book, een plaats waar ik allerlei gedachten, ideeën en losse flodders kan plaatsen met minimale barrieres. Het is een rode draad in mijn blog-ontwikkeling en ik denk dat het een belangrijk element wordt op de IndieWebC...