Domains, power, the commons, credit, SEO, and some code implications

How to provide better credit on the web using the standard rel=“canonical” by looking at an example from the Open Learner Patchbook

A couple of weeks back, I noticed and began following Cassie Nooyen when I became aware of her at the Domains 2019 conference which I followed fairly closely online.

She was a presenter and wrote a couple of nice follow up pieces about her experiences on her website. I bookmarked one of them to read later, and then two days later I came across this tweet by Terry Green, who had also apparently noticed her post:

But I was surprised to see the link in the tweet points to a different post in the Open Learner Patchbook, which is an interesting site in and of itself.

This means that there are now at least two full copies of Cassie’s post online:

While I didn’t see a Creative Commons notice on Cassie’s original or any mention of permissions or even a link to the source of the original on the copy on the Open Patchbook, I don’t doubt that Terry asked Cassie for permission to post a copy of her work on his site. I’ll also suspect that it may have been the case that Cassie might not have wanted any attention drawn to herself or her post on her site and may have eschewed a link to it. I will note that the Open Patchbook did have a link to her Twitter presence as a means of credit. (I’ll still maintain that people should be preferring links to their own domain over Twitter for credits like these–take back your power!)

Even with these crediting caveats aside, there’s a subtle technical piece hiding here relating to search engines and search engine optimization that many in the Domain of One’s Own space may not realize exists, or if they do they may not be sure how to fix. This technical subtlety is that search engines attempt to assign proper credit too. As a result there’s a very high chance that Open Patchbook could rank higher in search for Cassie’s own post than Cassie’s original. As researchers and educators we’d obviously vastly prefer the original to get the credit. So what’s going on here?

Search engines use a web standard known as rel=“canonical”, a microformat which is most often found in the HTML <header> of a web page. If we view the current source of the copy on the Open Learner Patchbook, we’ll see the following:

<link rel="canonical" href="http://openlearnerpatchbook.org/technology/patch-twenty-five-my-domain-my-place-to-grow/" />

According to the Microformats wiki:

By adding rel=“canonical” to a hyperlink, a page indicates that the destination of that hyperlink should be considered the preferred or definitive version of the current page. This helps search engines avoid duplicate content, and is useful for deciding how to link to a page when citing it.

In the case of our example of Cassie’s post, search engines will treat the two pages as completely separate, but will suspect that one is a duplicate of the other. This could have dramatic consequences for one or the other sites in which search engines will choose one to prefer over the other, and, in some cases, search engines may penalize one site for having duplicate content and not stating that fact (in their metadata). Typically this would have more drastic and averse consequences for Cassie’s original in comparison with an institutional site. 

How do we fix the injustice of this metadata? 

There are a variety of ways, but I’ll focus on several in the WordPress space. 

WordPress core has built-in functionality that should set the permalink for a particular page as the canonical one. This is why the Open Patchbook page displays the incorrect canonical link. Since most people are likely to already have an SEO related plugin installed on their site and almost all of them have this capability, this is likely the quickest and easiest method for being able to change canonical links for pages and posts. Two popular choices for this are Yoast and All in One SEO which have simple settings for inputting and saving alternate canonical URLs. Yoast documents the steps pretty well, so I’ll provide an example using All in One SEO:

  • If not done already, click the checkbox for canonical URLs in the “General Settings” section for the plugin generally found at /wp-admin/admin.php?page=all-in-one-seo-pack%2Faioseop_class.php.
  • For the post (or page) in question, within the All in One SEO metabox in the admin interface (pictured) put the full URL of the original posts’ location.
  • (Re-)publish the post.

Screenshot of the AIOSEO metabox with the field for the Canonical URL outlined in red

If you’re using another SEO plugin, it likely handles canonical URLs similarly, so check their documentation.

For aggregation websites, like the Open Learner Patchbook, there’s also another solid option for not only setting the canonical URL, but for more quickly copying the original post as well. In these cases I love PressForward, a WordPress plugin from the Roy Rosenzweig Center for History and New Media which was designed with the education space in mind. The plugin allows one to quickly gather, organize, and republish content from other places on the web. It does so in a smart and ethical way and provides ample opportunity for providing appropriate citations as well as, for our purposes, setting the original URL as the canonical one. Because PressForward is such a powerful and diverse tool (as well as a built-in feed reader for your WordPress website), I’ll refer users to their excellent documentations.

Another useful reason I’ll mention for using rel-canonical mark up is that I’ve seen cases in which using it will allow other web standards-based tools like Hypothes.is to match pages for highlights and annotations. I suspect that if the Open Patchwork page did have the canonical link specified that any annotations made on it with Hypothes.is should mirror properly on the original as well (and vice-versa). 

I also suspect that there are some valuable uses of this sort of small metadata-based mark up within the Open Educational Resources (OER) space.

In short, when copying and reposting content from an original source online, it’s both courteous and useful to mark the copy as such by putting a tag onto the URL of the original to provide it with the full credit as the canonical source.

An annotation example for Hypothes.is using <blockquote> markup to maintain annotations on quoted passages

A test of some highlighting functionality with respect to rel-canonical mark up. I’m going to blockquote a passage of an original elsewhere on the web with a Hypothes.is annotation/highlight on it to see if the annotation will properly transclude it.

I’m using the following general markup to make this happen:

<blockquote><link rel="canonical" href="https://www.example.com/annotated_URL">
Text of the thing which was previously annotated.
</blockquote>

Let’s give it a whirl:

This summer marks the one-year anniversary of acquiring my domain through St. Norbert’s “Domain of One’s Own” program Knight Domains. I have learned a few important lessons over the past year about what having your own domain can mean.

SECURITY

The first issue that I never really thought about was the security and privacy on my domain. A few months after having my domain, I realized that if you searched my name, my domain was one of the first things that popped up. I was excited about this, but I soon realized that this meant everything I blogged about was very much in the open. This meant all of my pictures and also every person I have mentioned. I made the decision to only use first names when talking about others and the things we have done together. This way, I can protect their privacy in such an open space. With social media you have some control over who can see your post based on who “friends” or “follows you”; on a domain, this is not as much of a luxury. Originally, I thought my domain would be something I only shared with close friends and family, like a social media page, but understanding how many people have the opportunity to see it really shocked me and pushed me to think about the bigger picture of security and safety for me and those around me.

—Cassie Nooyens in What Having a Domain for a year has Taught Me

Unfortunately, however, I’m noticing that if I quote multiple sources this way (at least in my Chrome browser), only the last quoted block of text transcludes the Hypothes.is annotations. Based on prior experiments using rel-canonical mark up I’ve noticed this behavior, but I suspect it’s simply the fact that the rel-canonical appears on the page and matches one original. It would be awesome if such a rel-canonical link which was nested into any number of blockquote tags would cause the annotations from the originals

Perhaps Jon Udell and friends could shed some light on this and or make some tweaks so that blockquoting multiple sources within the same page could also allow the annotations on those quoted passages to be transcluded onto them?

Separately, I’m a tad worried that any annotations now made on my original could also be mistakenly pushed back to the quoted pages because of the matching rel-canonical without anything taking into account the nested portions of the page or the blockquoted pieces. I’ll make a test on a word or phrase like “security and privacy” to see if this is the case. We’ll all notice that of course this test fails by seeing the highlight on Cassie’s original. Oh well…

So the question becomes, is there a way within the annotation spec to allow us to write simple HTML documents that blockquote portions of other texts in such a way that we can bring over the annotations of those other texts (or allow annotating them on our original page and have them pushed back to the original) within the blockquoted portions, yet still not interfere with annotating our own original document? Ideally what other HTML tags could/should this work on? Further could this be common? Generally useful? Or simply just a unique edge case with wishful thinking made from this pet example? Perhaps there’s a better way to implement it than my just having thrown in the random link on a whim? Am I misguidedly attempting to do something that already exists?

👓 Toast | Adactio: Journal

Read a post by Jeremy KeithJeremy Keith (adactio.com)
Shockwaves rippled across the web standards community recently when it appeared that Google Chrome was unilaterally implementing a new element called toast. It turns out that’s not the case, but the confusion is understandable. First off, this all kicked off with the announcement of “intent to i...

<details> tags, Fragment URLs, and the HTML spec

A few weeks ago I read a post by Jamie Tanna on Using <details> tags for HTML-only UI toggles.

I thought it was a pretty slick use of HTML to create some really simple and broadly useful UI.

Then earlier today I noticed that Jeremy Keith has recently switched to using this on his personal site in the comments section to provide toggles for his various webmention types including shares, likes, bookmarks, etc. But this is where I’m noticing a quirky UI issue that isn’t as web friendly as it could be. Jeremy and others (including myself own my own site) will often provide ID tags so that one can give permalinks to the individual comments using fragments of the form:

https://adactio.com/journal/15050#comment70567 or
https://adactio.com/journal/15050#comment71896

But here’s where the UI problem lies. The first fragment URL only resolves to the page instead of the specific bookmark hiding behind a  <details> tag whereas the second fragment URL resolves to the page and automatically scrolls down to a comment by DominoPivot. It does this in both Chrome and FireFox and I would presume operates similarly in other browsers.

I suspect that most users would expect/prefer that the fragment URL should automatically expand the <details> tag and scroll down the page to that ID  or fragment as well.

Perhaps Jamie, Jeremy, Tantek, Kevin or others may have some trickery to make this happen? Otherwise, do we need to start digging into specs and browsers to get them to better support this sort of fragment related functionality?  Perhaps it’s this section of the HTML spec, the URL of which has such a fragment and therefor scrolls down properly if you click on it? (Meta pun intended.)

Watched For Patients, by Patients: Pioneering a New Approach in Med-Tech Design by  Innovate Pasadena: Friday Coffee Meetup Innovate Pasadena: Friday Coffee Meetup from YouTube

I was ten years into a career as a user experience designer making new digital products when diabetes blew my family's life apart. The complexity and relentlessness of the burden of care that came with my youngest daughter's diagnosis at 1.5 years old, were overwhelming. I learned that people with diabetes are always 10 minutes of inattention away from a coma. Run your blood sugar too low and risk brain injury or death. Run too high and you do cumulative damage to your organs, nerves and eyes. And as a designer and hardware hacker I couldn't accept the limitations and poor User Experience I was seeing in all the tools we were given to deal with it.

Then I discovered Nightscout (a way to monitor my daughter's blood sugar in real time from anywhere in the world) and Loop (a DIY open sourced, artificial pancreas system that checks blood sugar and adjusts insulin dosing every five minutes 24/7) and the community that produced them. For the first time I saw the kinds of tools I needed and true power of solutions that come from the people living with the problem. When I learned about the Tidepool's project to take Loop through FDA approval and bring it to anyone who wants to use it to give the same freedom and relief that we've experienced from it, I had to get involved. Now we are taking an open source software through regulatory approval and using real-life user data from the DIY community for our clinical trial in a process that is turning heads in the industry. We'll get into the many ways this story demonstrates ways that user driven design, open source models and a counterculturally collaborative approach with regulators are shifting the incentives and changing the landscape toward one more favorable to innovation.

Here’s the video I mentioned yesterday. Those deeply enmeshed in the IndieWeb movement and many of its subtleties will get a ringing sense of déjà vu as they watch it and realize there’s a lot of overlap with how (and why) Matt Lumpkin is working to help those with type 1 diabetes and the IndieWeb. Perhaps there are some lessons to be learned here?

There was an eerie and surprisingly large overlap of a lot of what Matt Lumpkin said in his talk this morning and the IndieWeb movement. If you just change the disease from Type 1 Diabetes to Social Media, there are a tremendous number of similarities between the two approaches of problems to be solved in terms of giving people agency, ownership of their data, the silo nature of the big corporations in the space, and the lack of solid inter-operability and standards.

I can’t wait for Chuck Chugumulung and the gang to get the video for this week up on YouTube so I can share it with colleagues.

Based on what I’ve heard, it might not be a completely terrible thing to class what the IndieWeb is working on fixing as a broad public health issue–but in its case a mental health one instead of a pancreas and diet related one.

Matt Lumpkin on stage pointing at a slide on the screen stating "Restoring one's own agency is the most critical task for people working to negotiate a healthy relationship with a chronic disease."
Matt Lumpkin during his talk “For Patients, by Patients: Pioneering a New Approach in Med-Tech Design“.
Matt Lumpkin on stage with a slide displaying the text "Do the people who use the things you make feel their power returned to them?"
Another IndieWeb sentiment in a presentation on UX/UI for improving health of people dealing with type 1 diabetes.

📺 Taking Back The Web | Jeremy Keith | Webstock ’18

Watched Webstock '18: Taking Back The Web by Jeremy Keith from Vimeo

In these times of centralised services like Facebook, Twitter, and Medium, having your own website is downright disruptive. If you care about the longevity of your online presence, independent publishing is the way to go. But how can you get all the benefits of those third-party services while still owning your own data? By using the building blocks of the Indie Web, that’s how!

Presentation slide-deck: speakerdeck.com/adactio/taking-back-the-web

Managed to get a talk proposal together for WordCamp Santa Clarita on the topic of IndieWeb and WordPress (geared toward a general audience). I also submitted an idea for a lightning talk on the relatively new Micropub spec from the W3C and how it can be used in conjunction with WordPress to quickly and easily post a variety of different content types to the platform.

I can’t wait to attend this new camp just North of Los Angeles!

#WCSCV

👓 4 Reasons @GetClassicPress Should Add Native Microformats Support | Greg McVerry

Read 4 Reasons @GetClassicPress Should Add Native Microformats Support by Greg McVerryGreg McVerry (quickthoughts.jgregorymcverry.com)
Now that phase one of Gutenberg has dropped the interest in grows by the day. So many WordPress developers fear the loss of control they will face under the new regime of 5.0. Many just don't want to do the work of all that refactoring. and should join forces. w...

📺 cite and blockquote – reloaded | HTML5 Doctor

Read cite and blockquote – reloaded by Steve Faulkner (html5 Doctor)
The definitions of the blockquote and cite elements in the HTML specification have recently been updated. This article explains what the changes mean for developers.

Yes, <cite> and <blockquote> ought to be much easier and more standardized. I’ve got some crazy and extreme examples myself I’m sure. The bigger lurking trap is that cite is really a semantic thing, but the way I see it done more often implemented with CSS is as a typographic element indicating italics.

hat tip: Michael Bishop

Reply to Blog Engines and Indieweb Controlling Upstream by Brad Enslen

Replied to Blog Engines and Indieweb Controlling Upstream by Brad EnslenBrad Enslen (Brad Enslen)
All this WordPress 5.0 Gutenberg stuff got me thinking.  With WordPress it seems like the Indieweb starts making serious and cool progress and the WordPress people come along and knock the game board and pieces off the table.  And it sounds like the disruption from WordPress is going to continue f...

Brad, I like and agree with your general thoughts, but I think that looking at the long term broader picture, most of what you’re describing is covered under the umbrella principle of plurality. For things to grow and thrive, we all need plurality to flourish. As a result there are several hundred projects within the broader IndieWeb which are growing and thriving. It seems far slower because a large number of the projects are single-maintainer single-user ones which are being built for personal use.

It’s nice that there are mass-scale projects like WordPress, WithKnown, Get Perch, Grav, Drupal, and a few others which have one or more “IndieWeb-centric” developers working on them that allow those without the coding skills to jump in and enjoy the additional freedom and functionality. The occasional drawback is that those big-hearted developers also fit into the broader fabric of those massively distributed projects and sometimes their voices aren’t as well heard, if at all.

I’m aware of the disruption of the Gutenberg Editor within WordPress v5.0 and how it applies to those using IndieWeb technology on WordPress. I’m sure it will eventually get sorted out in a reasonable fashion. Sadly, throwing out the baby out with the bathwater as it comes to WordPress and IndieWeb may not be the best solution for many people and may actually be a painful detriment to several hundreds.

While it would be interesting to see a larger group of developers converge on building an open and broadly used IndieWeb system as you suggest, it takes a massive amount of work and community collaboration to get such a thing moving. I think this bears out if you look at the lay of the land as it already exists. Just think of the time effort and energy that the core IndieWeb community puts into the tremendous amount of resources that exist today.

Looking back on the past 4+ years of IndieWeb within the WordPress community, I’m really amazed to see exactly how far things have come and where things currently stand. There used to be a dozen or more pieces that required custom code, duct tape, and baling wire to get things working. Now it’s a handful of relatively stable and well set up pieces that—particularly for me—really makes WordPress deliver as an open source content management system and next generation social medial platform that aims to democratize publishing. In terms of building for the future, I suspect that helping to bring new people into the fold (users, developers, designers, etc.) will increase and improve the experience overall. To some degree, I feel like we’re just getting started on what is possible and recruiting new users and help will be the best thing for improving things moving forward. IndieWeb integration into large-scale projects like WordPress, Drupal, etc. are very likely to be the place that these ideas are likely to gain a foothold in the mainstream and change the tide of how the internet works.

While it may seem daunting at times, in addition to the heroic (part-time, it needs to be noted) developers like Mathias Pfefferle, David Shanske, Micah Cambre, Michael Bishop, Ashton McAllan, Jack Jamieson,  Ryan Barrett, Peter MolnarAmanda Rush; enthusiastic supporters like you, Greg McVerry, Aaron Davis, Manton Reece; and literally hundreds of others (apologies to those I’ve missed by name) who are using and living with these tools on a daily basis, there are also quieter allies like Brandon Kraft, Ryan Boren, Jeremy Herve and even Matt himself, even if he’s not directly aware of it, who are contributing in their own ways as well. Given the immense value of what IndieWeb brings to the web, I can’t imagine that they won’t ultimately win out.

If it helps, some of the current IndieWeb issues pale in comparison to some of the accessibility problems that Gutenberg has neglected within the WordPress community. Fortunately those a11ys are sticking with the greater fight to make things better not only for themselves, but for the broader community and the world. I suggest that, like them, we all suit up and continue the good fight.

Of course part of the genius of how IndieWeb is structured: anyone is free to start writing code, make better UI, and create something of their own. Even then they benefit from a huge amount of shared work, resources, and simple standards that are already out there. 

A reply to David Shanske regarding implementation of the DiSo Project

Replied to a post by David ShanskeDavid Shanske (David Shanske)

People continued working on it. Everything you need using W3C standards like Webmention, Microformats2…give it a try? https://IndieWeb.org/WordPress/Plugins

I suspect that @chrismessina could do it quickly, but for those who’d like to leave Twitter for with similar functionality (but greater flexibility and independence), I recorded a 2 hour video for an set up/walk through with some high level discussion a few months back. If you can do the 5 minute install, hopefully most of the rest is downhill with some basic plugin installation and minor configuration. The end of the walk through includes a live demonstration of a conversation between a WordPress site on one domain and a WithKnown site running on another domain.

tl;dr for the video:

Additional pieces are discussed on my IndieWeb Research Page (focusing mostly on WordPress), in addition to IWC getting started on WordPress wiki page. If you need help, hop into the IndieWeb WordPress chat.

For those watching this carefully, you’ll notice that I’ve replied to David Shanske’s post on his website using my own website and sent him a webmention which will allow him to display my reply (if he chooses). I’ve also automatically syndicated my response to the copy of his reply on Twitter which includes others who are following the conversation there. Both he and I have full copies of the conversation on our own site and originated our responses from our own websites. If you like, retweet, or comment on the copy of this post on Twitter, through the magic of Brid.gy and the Webmention spec, it will come back to the comment section on my original post (after moderation).

Hooray for web standards! And hooray for everyone in the IndieWeb who are helping to make this type of social interaction easier and simpler with every passing day.

👓 Facebook, Twitter and Google Plus shun HTML, causing the infographic plague. | Kevin Marks

Read Facebook, Twitter and Google Plus shun HTML, causing the infographic plague. by Kevin Marks (epeus.blogspot.com)
By choosing images over links, and by restricting markup, Facebook, Twitter and Google+ are hostile to HTML. This is leading to the plague of infographics crowding out text, and of video used to convey minimal information. The rise of so-called infographics has been out of control this year, though the term was unknown a couple of years ago. I attribute this to the favourable presentation that image links get within Facebook, followed by Twitter and Google plus, and of course though other referral sites like Reddit. By showing a preview of the image, the item is given extra weight over a textual link; indeed even for a url link, Facebook and G+ will show an image preview by default.

👓 The Infographic Plague is actually a plague of lazy journalists and bloggers | The Next Web

Read The Infographic Plague is Just Laziness by Martin Bryant (The Next Web)
I breathed a sigh of relief when I read Megan McCardle's Ending the Infographic Plague on The Atlantic a few days ago. Someone had said it at last! As useful as a really well-produced infographic can be, there's some real dross out there and it's time we talked about the problem.