davidbgk
/
larlet-fr-david-cache

<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang=fr>
<!-- Has to be within the first 1024 bytes, hence before the <title>
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset=utf-8>
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
<!-- Required to make a valid HTML5 document. -->
<title>How Google warped the hyperlink (archive) — David Larlet</title>
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/static/david/icons/favicon.ico">
<meta name="apple-mobile-web-app-title" content="David Larlet">
<meta name="application-name" content="David Larlet">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- That good ol' feed, subscribe :p. -->
<link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://www.wired.co.uk/article/google-link-hyperlink-seo">

<style>
/* http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, em, img, ins,
small, strike, strong, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* http://practicaltypography.com/equity.html */
/* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
/* https://www.filamentgroup.com/lab/js-web-fonts.html */
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ConcourseT3';
  src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
       url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}


/* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
body {
  /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  font-family: "EquityTextB", Palatino, serif;
  background-color: #f0f0ea;
  color: #07486c;
  font-kerning: normal;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: "kern", "liga", "clig", "calt";
}
pre, code, kbd, samp, var, tt {
  font-family: 'TriplicateT4c', monospace;
}
em {
  font-style: italic;
  color: #323a45;
}
strong {
  font-weight: bold;
  color: black;
}
nav {
  background-color: #323a45;
  color: #f0f0ea;
  display: flex;
  justify-content: space-around;
  padding: 1rem .5rem;
}
  nav:last-child {
    border-bottom: 1vh solid #2d7474;
  }
  nav a {
    color: #f0f0ea;
  }
  nav abbr {
    border-bottom: 1px dotted white;
  }

h1 {
  border-top: 1vh solid #2d7474;
  border-bottom: .2vh dotted #2d7474;
  background-color: #e3e1e1;
  color: #323a45;
  text-align: center;
  padding: 5rem 0 4rem 0;
  width: 100%;
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
}
  h1.single {
    padding-bottom: 10rem;
  }
  h1 span {
    position: absolute;
    top: 1vh;
    left: 20%;
    line-height: 0;
  }
    h1 span a {
      line-height: 1.7;
      padding: 1rem 1.2rem .6rem 1.2rem;
      border-radius: 0 0 6% 6%;
      background: #2d7474;
      font-size: 1.3rem;
      color: white;
      text-decoration: none;
    }
h2 {
  margin: 4rem 0 1rem;
  border-top: .2vh solid #2d7474;
  padding-top: 1vh;
}
h3 {
  text-align: center;
  margin: 3rem 0 .75em;
}
hr {
  height: .4rem;
  width: .4rem;
  border-radius: .4rem;
  background: #07486c;
  margin: 2.5rem auto;
}
time {
  display: bloc;
  margin-left: 0 !important;
}
ul, ol {
  margin: 2rem;
}
ul {
  list-style-type: square;
}
a {
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.09em;
}
article {
  max-width: 50rem;
  display: flex;
  flex-direction: column;
  margin: 2rem auto;
}
  article.single {
    border-top: .2vh dotted #2d7474;
    margin: -6rem auto 1rem auto;
    background: #f0f0ea;
    padding: 2rem;
  }
  article p:last-child {
    margin-bottom: 1rem;
  }
p {
  padding: 0 .5rem;
  margin-left: 3rem;
}
  p + p,
  figure + p {
    margin-top: 2rem;
  }

blockquote {
  background-color: #e3e1e1;
  border-left: .5vw solid #2d7474;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  margin: 1.5rem;
}
  blockquote cite {
    font-style: italic;
  }
  blockquote p {
    margin-left: 0;
  }

figure {
  border-top: .2vh solid #2d7474;
  background-color: #e3e1e1;
  text-align: center;
  padding: 1.5rem 0;
  margin: 1rem 0 0;
  font-size: 1.5rem;
  width: 100%;
}
  figure img {
    max-width: 250px;
    max-height: 250px;
    border: .5vw solid #323a45;
    padding: 1px;
  }
figcaption {
  padding: 1rem;
  line-height: 1.4;
}
aside {
  display: flex;
  flex-direction: column;
  background-color: #e3e1e1;
  padding: 1rem 0;
  border-bottom: .2vh solid #07486c;
}
  aside p {
    max-width: 50rem;
    margin: 0 auto;
  }

/* https://fvsch.com/code/css-locks/ */
p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  font-size: 1rem;
  line-height: calc( 1.5em + 0.2 * 1rem );
}
h1 {
  font-size: 1.9rem;
  line-height: calc( 1.2em + 0.2 * 1rem );
}
h2 {
  font-size: 1.6rem;
  line-height: calc( 1.3em + 0.2 * 1rem );
}
h3 {
  font-size: 1.35rem;
  line-height: calc( 1.4em + 0.2 * 1rem );
}
@media (min-width: 20em) {
  /* The (100vw - 20rem) / (50 - 20) part
     resolves to 0-1rem, depending on the
     viewport width (between 20em and 50em). */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
    margin-left: 0;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
}
@media (min-width: 50em) {
  /* The right part of the addition *must* be a
     rem value. In this example we *could* change
     the whole declaration to font-size:2.5rem,
     but if our baseline value was not expressed
     in rem we would have to use calc. */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * 1rem );
    line-height: 1.5em;
  }
  p, li, pre, details {
    margin-left: 3rem;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * 1rem );
    line-height: 1.2em;
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * 1rem );
    line-height: 1.3em;
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * 1rem );
    line-height: 1.4em;
  }
  figure img {
    max-width: 500px;
    max-height: 500px;
  }
}

figure.unsquared {
  margin-bottom: 1.5rem;
}
  figure.unsquared img {
    height: inherit;
  }


@media print {
  body { font-size: 100%; }
  a:after { content: " (" attr(href) ")"; }
  a, a:link, a:visited, a:after {
    text-decoration: underline;
    text-shadow: none !important;
    background-image: none !important;
    background: white;
    color: black;
  }
  abbr[title] { border-bottom: 0; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  img { page-break-inside: avoid; }
  @page { margin: 2cm .5cm; }
  h1, h2, h3 { page-break-after: avoid; }
  p3 { orphans: 3; widows: 3; }
  img {
    max-width: 250px !important;
    max-height: 250px !important;
  }
  nav, aside { display: none; }
}

ul.with_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_columns {
    column-count: 2;
  }
}
@media (min-width: 50em) {
  ul.with_columns {
    column-count: 3;
  }
}
ul.with_two_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_two_columns {
    column-count: 1;
  }
}
@media (min-width: 50em) {
  ul.with_two_columns {
    column-count: 2;
  }
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
  .gallery figure img {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .gallery figure figcaption {
    font-family: 'ConcourseT3'
  }

footer {
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
  border-top: 3px solid white;
  padding: 4rem 0;
  background-color: #07486c;
  color: white;
}
  footer > * {
    max-width: 50rem;
    margin: 0 auto;
  }
  footer a {
    color: #f1c40f;
  }
  footer .avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    float: left;
    -webkit-shape-outside: circle();
    shape-outside: circle();
    margin-right: 2rem;
    padding: 2px 5px 5px 2px;
    background: white;
    border-left: 1px solid #f1c40f;
    border-top: 1px solid #f1c40f;
    border-right: 5px solid #f1c40f;
    border-bottom: 5px solid #f1c40f;
  }
</style>

<h1>
  <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  How Google warped the hyperlink (archive)
  <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
</h1>
<section>
  <article>
    <h3><a href="https://www.wired.co.uk/article/google-link-hyperlink-seo">Source originale du contenu</a></h3>
    <p class="bb-p">The fourth doctor, Tom Baker, stands on a scrap heap of CRTs, dressed in a tux and red cumberbund, addressing a bemused Douglas Adams. It’s the opening of the 1994 BBC documentary <em class="bb-em">Hyperland</em> and Baker, a software agent, is trying to coax Adams into going on a “ramble” through the internet. </p>

<p class="bb-p">Baker chaperones Adams as he jumps around various media, clicking hyperlinks to access everything from Robert Abel’s educational tool on <em class="bb-em">Guernica</em> to a live feed of the Atlantic Ocean. This intellectual ramble, which seems wonderfully naïve decades later, has its roots in proto-web information science concepts such as the “associative trails” of discovery through <a href="https://www.theatlantic.com/magazine/archive/1945/07/as-we-may-think/303881/" class="bb-a">automated, cross-referenced documents</a> that Vannevar Bush, head of the US Office of Scientific Research and Development and later a major influence on internet pioneers, outlined in 1945.</p>

<p class="bb-p">You might think of the hyperlink as a relatively recent invention, but, at least conceptually, it’s not. But more than 70 years later, it’s warped beyond all recognition from what was first proposed. In the 1960s Ted Nelson introduced the concepts of hypertext and hyperlinking between text and media, proclaiming “everything is deeply intertwingled” in 1974, and, to race through history, a succession of pioneering, local, collaborative systems including Doug Engelbart’s NLS, HyperTIES, Microcosm and Brown University’s Intermedia, followed. </p>

<p class="bb-p">Tim Berners-Lee cited Ben Schneiderman and Dan Ostroff’s HyperTIES, the first electronic journal, as the inspiration behind the link concept for his WorldWideWeb proposal at CERN in 1989. The original impetus behind Berners-Lee’s work? To develop a system for automated information sharing across universities and research institutions. </p>

<p class="bb-p">“The early hypertext pioneers envisioned systems geared primarily for scholarly research and knowledge production; for the most part they did not envision the kind of commercial, consumer-oriented environment that has come to characterise the modern internet,” says Alex Wright, lecturer at the School of Visual Arts and author of <a href="https://alexwright.com/books/" class="bb-a"><em class="bb-em">Glut: Mastering Information Through The Ages</em>.</a> “In certain crucial respects the web is still a much more limited version of what Bush, Nelson, Engelbart, and others had in mind. Hyperlinks still only work in one direction; it’s all but impossible to follow user ‘trails’ among documents in the way that Bush envisioned; and there’s no single, universal mechanism for managing your identity across platforms.”</p>

<p class="bb-p">If the link is the <a href="https://www.youtube.com/watch?v=3Va3oY8pfSI" class="bb-a">connecting studs of a LEGO brick</a>, in this sense it’s far from broken. Search engines aside, links are shared in WhatsApp groups, emails, on Twitter and Google Drive and you still browse the web in homage to the innocent, curious, proto and early web thinkers, every time you get lost down a rabbit hole. The web is global, not simply a local connected library. And yet Google, Apple, Facebook and Amazon have skewed the original ambitions for hyperlinks, who they are for and how far they can lead you. </p>

<p class="bb-p">The impact that Google’s PageRank algorithms have had on how the commercial web chooses to deploy hyperlinks can be seen in just about any SEO (search engine optimisation) blog. Publishers and businesses are encouraged to prioritise internal links over external links that may boost the competition in Google’s rankings.</p>

<p class="bb-p">“Since the very moment Google came on the scene, links moved from being the defining characteristic of the web, to being a battleground. Google’s core insight was that you could treat every link as, essentially, a vote for the site,” says Adam Tinworth, a <a href="https://onemanandhisblog.com/" class="bb-a">digital publishing strategist</a>. Tinworth explains that Google tries to minimise the effect of these ‘unnatural linking patterns’, which includes comment spam and ‘guest posts’, but it remains part of “how the shadier side of the SEO industry operates”. </p>

<p class="bb-p">With clear, financial incentives to serve Google’s web spiders, which regularly ‘crawl’ website content to determine its placement in searches, a common strategy involves placing hyperlinks on specific ‘anchor text’ - the actual words that you click on - that benefit that site’s PageRank for keywords rather than tailor links to readers. That’s not inherently a problem but research from the University of Southampton, published in February, suggests it doesn’t go unnoticed.</p>

<p class="bb-p">Researchers used eye-tracking tech on 30 participants to find out how hyperlinks affect human readers’ experience of a web page. Confirming pre-web research on signalling theory, they found that people reading passages of text containing blue, underlined hyperlinks, or simply blue words, were more likely to re-read sentences when uncommon words were linked and therefore highlighted. (Berners-Lee doesn’t remember who decided on the standard blue, underlined hyperlinks though early browsers like Mosaic undoubtedly popularised them.)</p>

<p class="bb-p">“What does your brain do when you’re looking at a blue word and a bunch of black words?” says Gemma Fitzsimmons, a web science researcher who led the study. “The main thing is that when you have a blue or bold word on its own and it’s the only unique thing that stands out, everyone thinks, ‘I need to look at that, it might be important.’ The less hyperlinks you have, the more important they seem.” If hyperlinks were completely geared towards human readers of texts, <a href="https://journals.plos.org/plosone/article?id=10.1371/journal.pone.0210900" class="bb-a">they’d point towards relevant, contextual information</a> using anchor text that contains the most important points on the page.</p>

<p class="bb-p">In the cases of Apple and Facebook, the question isn’t so much how we link and how we react to them, as where we can link to and where we can follow links to. Facebook’s Instant Articles, Google AMP (and indeed apps like Apple News) all propose variations on limited systems of linking back to sources of information. As for Instagram, it’s based on a two-tier system: users can’t add external links to posts (#linkinbio) unless they buy adverts whereas accounts with a large number of followers are able to add external links to Stories. </p>

<p class="bb-p">Facebook’s linking rules aren’t as explicitly limited but its news feed algorithm encourages people to pay to boost posts with external links that take users out of its network. As computer scientist and internet pioneer Dame Wendy Hall puts it, “Facebook would love us to just live inside of Facebook.” Truly surfing the entire web, hopping from link to link, hasn’t made business sense, it seems, hence the silos. If working today, Vannevar Bush, whose Memex concept was concerned with books and microfilm, might effectively consider Instagram as one book, Facebook as another book, with information inside in need of liberation via associative trails (links). </p>

<p class="bb-p">Hall describes changes in linking practices as a “side effect”, not a cause, of <a href="https://www.cigionline.org/publications/four-internets-geopolitics-digital-governance" class="bb-a">the fracturing of the internet</a> based on the key issue of who controls data. So perhaps shifting trends in hyperlinking can at best be seen as symptoms of wider concerns around the web at 30. </p>

<p class="bb-p">“The whole phenomenon of fake news and information silos has been facilitated by platforms like Facebook taking control of content, even preventing outbound links by displaying content within the app, and feeding you content they think you want to see,” says Belinda Barnet, senior lecturer in media at Swinburne University of Technology and author of <em class="bb-em"><a href="https://www.cambridge.org/core/books/memory-machines/3020E1AC5BB9D4AD640CA1E2D7509418" class="bb-a">Memory Machines: The Evolution of Hypertext</a></em>. “To free us from these ‘echo chambers’, we need to open those platforms up or at least make their workings more transparent. It’s not enough just to change the hyperlinks we need to crack the whole thing open.”</p>

<p class="bb-p">In tackling what’s broken in online news and information, there’s a renewed focus on provenance. “The basic ethics of linking are simple,” says Adam Tinworth. “If you sourced information or content from elsewhere, link to that source. It’s what the web was built for, and it’s just good manners.” Where things get “murky”, though, are instances where media outlets are considering linking to problematic or dangerous content in which case ‘no follow’ links can be used to signal to Google that it should ignore that site for ranking purposes.</p>

<p class="bb-p">Returning to PageRank, in 2016 Google advised that social media influencers use no-follow links when including affiliate links on their posts, in which they receive a product sales commission in return for freebies, gifts and sponsorship. With Amazon’s international affiliate scheme, in particular, offering a revenue stream to social media creators and media organisations, money is now flowing directly through hyperlinks, tagged to the influencer or publisher, with the onus on the creator of the links to make that fact known to readers, viewers and subscribers. (WIRED is a member of affiliate schemes). </p>

<p class="bb-p">It’s unlikely that the hyperlink will get a makeover in the near future because a large part of the web’s success lies in its simplicity - attempts at backlinks, labels and hovering windows tend to feel cluttered. If hyperlinks were to be given an update, though, there’s no shortage of suggestions from thinkers and computer scientists who began working before the web. </p>

<p class="bb-p">Berners-Lee’s links were designed to be one-way, unlike the two way hyperlinks first suggested by Ted Nelson. In Nelson’s ongoing Project Xanadu, “links must be bivisible and bifollowable,” says Barnet, “capable of being seen and followed from the destination document as well as the originating document.” And Nelson went further, with a method of citing text or media by integrating parts of the original into the first ‘window’ or ‘document’, something he refers to as a “parallel presentation” in Werner Herzog’s documentary <em class="bb-em">Lo and Behold: Reveries of the Connected World</em>. These were hyperlinked so that the user could click through to get the full context with a mechanism for micropayments to the original author.</p>

<p class="bb-p">“The system we were working on at Southampton Microcosm [the pre-web hypermedia system developed in the 1980s] had very sophisticated two way linking,” says Dame Wendy Hall, professor of computer science at the University of Southampton. “It was very prescient of the Semantic Web – you used the links to describe why you were making that relationship between those two data objects.” </p>

<p class="bb-p">The Semantic Web, first proposed by Berners-Lee in 1994, moves away from 20th-century ideas of interlinked documents and pages towards a web of data, that can be processed by machines.. Barnet similarly suggests a “more intelligent linking system”, something she says the Semantic Web is seeking to rectify: “Is there a more efficient way of linking that could identify content by what it is, not just where it is?”  </p>

<p class="bb-p">Then there’s the question of whether the many hidden functions of hyperlinks could be made more transparent. Designer Ted Hunt, a resident at Somerset House Studios, suggests an alternate timeline in which Nelson’s nonlinear links influence everything from the authority of information online to copyright. In 2016, Hunt took Nelson’s concepts and combined them with the +/- classifications of Paul Otlet, an earlier influential thinker on information science, working in the 1930s, about more sophisticated relationships between information.</p>

<p class="bb-p">In a one-day project, he created a <a href="http://www.ted-hunt.com/HYPERLINKS/index.html" class="bb-a">speculative system of classifying links</a>. A double underline indicates a citation of a source document and dash, dot and wave underlines signal agreement, disagreement and other relationships. “Otlet proposed ideas about how information has its own social world,” Hunt says. “You could relate documents that disagreed with each other, or cited each other or built on each other and XYZ.” </p>

<p class="bb-p">It’s an interesting experiment into the user interface of hyperlinks but, says Hall, this kind of functionality can’t be retrofitted into what we have now. “If you’ve got a way of building links between data objects, as [Berners-Lee] proposed in the Semantic Web, or the way we were doing it, then of course you build in about whether you like or dislike something. But you can’t build it into the vanilla web because they’re static links embedded in documents.” Alex Wright sees linked data movements as “in some ways harkening back to <a href="https://www.nytimes.com/2008/06/17/science/17mund.html" class="bb-a">Paul Otlet’s vision</a> of a more organised, structured networked information environment.”</p>

<p class="bb-p">Hyperlinks are doing a lot more work than was originally intended and at the same time, the core component of links between ‘pages’ and ‘documents’, not just within them, has been altered. Barnet points out that as wholesome and pure as early, small-scale visions seem now, “you can’t just meander about and find what you need, any more than you can wander around the Library of Congress and arrive at the exact document you need.” Still, for anyone interested in a ramble, here’s a <a href="https://www.youtube.com/watch?v=Bqx6li5dbEY" class="bb-a">link</a>.</p>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="https://www.wired.co.uk/article/google-link-hyperlink-seo">Source originale</a> |
    <a href="/david/stream/2019/">Accueil du flux</a>
  </p>
</nav>

<footer>
  <div>
    <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
    <p>
      Bonjour/Hi!
      Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>
      Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).
    </p>
    <p>
      Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.
    </p>
    
    <p>
      Voici quelques articles choisis :
      <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
      <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
      <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
      <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
      <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
      <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
      <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
      <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
      <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
      <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
      <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
      <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
      <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
      <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
      <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
      et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
    </p>
    <p>
      On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.
    </p>
    <p>
      Je ne traque pas ta navigation mais mon
      <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
      conserve des logs d’accès.
    </p>
  </div>
</footer>
<script type="text/javascript">
  ;(_ => {
    const jumper = document.getElementById('jumper')
    jumper.addEventListener('click', e => {
      e.preventDefault()
      const anchor = e.target.getAttribute('href')
      const targetEl = document.getElementById(anchor.substring(1))
      targetEl.scrollIntoView({behavior: 'smooth'})
    })
  })()
</script>