Rel=me links are wrong

Hosting on Micro.blog
1

I changed some settings for my micro.blog today and to verify some changes I looked on the generated source of my blog and saw that for whatever reason Micro.blog generated some old/wrong link rel=me in the header.
The thing is, I can’t find the setting in Design, Plugins or account were to change these names. The config.json refers to a TWITTER_USERNAME, GITHUB_USERNAME and so on, but were is this configured?
It even shows a Instagram rel=me which I don’t use anymore:

<link rel="me" href="https://micro.blog/renem" />

	<link rel="me" href="https://twitter.com/rretsiem" />


	<link rel="me" href="https://github.com/rretsiem" />


	<link rel="me" href="https://instagram.com/rene.meister" />

Any tips would be helpful.

2

Nevermind, I found it, of course after posting here.
I did not expect that to be deep in the Account → Apps → below all the Access Tokens section.

3

I think we need to remove that setting, or at least move it somewhere else. You’re right, it’s pretty confusing… It was under “Apps” because originally it was used for signing in with IndieAuth via other services like Twitter.

3 Likes
4

Some sort of area dedicated to account settings that become Hugo parameters would likely be helpful. I remembered finding the Twitter username setting once and then totally failed to find it again when I was writing my social media links plugin.

The plugin injects <meta> relationship tags in head via the use of a data file.

My data file looks like this:

# This file holds the array of social media platforms to link.
#
# The value of Href will be generated by substituting the value 
# of USERNAME (as well as SERVER when set).
#
# Replace [BRACKETED] values and uncomment or create your own entries
# for platforms not listed.
#
[[Platforms]]
Name = "Twitter"
Href = "https://twitter.com/@USERNAME"
Username = "moondeerdotblog"

[[Platforms]]
Name = "Github"
Href = "https://github.com/USERNAME"
Username = "moonbuck"

[[Platforms]]
Name = "Tumblr"
Href = "https://USERNAME.tumblr.com"
Username = "moondeerdotblog"

[[Platforms]]
Name = "Medium"
Href = "https://USERNAME.medium.com"
Username = "Moondeer"

[[Platforms]]
Name = "Facebook"
Href = "https://www.facebook.com/USERNAME"
Username = "moondeerdotblog"

[[Platforms]]
Name = "Instagram"
Href = "https://www.instagram.com/USERNAME"
Username = "moondeerdotblog"

[[Platforms]]
Name = "Mastodon"
Href = "https://SERVER/@USERNAME"
Server = "mastodon.online"
Username = "moondeer"

which then generates these links in my page <head>.

<link rel="me" href="https://micro.blog/Moondeer">
<link rel="me" href="https://twitter.com/@moondeerdotblog">
<link rel="me" href="https://github.com/moonbuck">
<link rel="me" href="https://moondeerdotblog.tumblr.com">
<link rel="me" href="https://Moondeer.medium.com">
<link rel="me" href="https://www.facebook.com/moondeerdotblog">
<link rel="me" href="https://www.instagram.com/moondeerdotblog">
<link rel="me" href="https://mastodon.online/@moondeer">

The lookup is generalized in a way that should allow for a user to enter additional platforms:

 
layouts/partials/head/social-media-links.html

{{- /* Pulls from data/plugin_sml/params.toml to generate the social media links */ -}}
{{ partial "head/social-media-link.html" (dict "Name" "Micro.blog" "Username" site.Author.username "Href" "https://micro.blog/USERNAME") }}
{{- $platforms := site.Data.plugin_sml_params.Platforms | default site.Data.plugin_sml.params.Platforms -}}
{{- range $platforms }}
{{ partial "head/social-media-link.html" . }}
{{- end }}

 
layouts/partials/head/social-media-link.html

{{- if (and .Name .Href) }}
{{- if .Username }}
{{- if (or .Server (not (in .Href "SERVER"))) }}

{{- $href := .Href }}
{{- if (in $href "SERVER") }}{{ $href = $href | replaceRE "SERVER" .Server }}{{ end }}
{{- $href = $href | replaceRE "USERNAME" .Username }}
<link rel="me" href="{{ $href | safeHTMLAttr }}" />

{{- end }}
{{- end }}
{{- end }}

The plugin also includes a partial that users can inject into their custom theme for displaying links (perhaps as part of a profile section):

 
layouts/partials/profile/social-media-links.html

{{- /* Pulls from data/plugin_sml/params.toml to generate the social media links */ -}}
<div id="social-media-links">
  {{ partial "profile/social-media-link.html" (dict "Name" "Micro.blog" "Username" site.Author.username "Href" "https://micro.blog/USERNAME") }}
  {{- $platforms := site.Data.plugin_sml_params.Platforms | default site.Data.plugin_sml.params.Platforms -}}
  {{-  range $platforms }}
  {{ partial "profile/social-media-link.html" . }}
  {{- end }}
</div>

 
layouts/partials/profile/social-media-link.html

{{- if (and .Name .Href) }}
{{- if .Username }}
{{- if (or .Server (not (in .Href "SERVER"))) }}

{{- $href := .Href }}
{{- if (in $href "SERVER") }}{{ $href = $href | replaceRE "SERVER" .Server }}{{ end }}
{{- $href = $href | replaceRE "USERNAME" .Username }}
<div id="{{ .Name }}" class="sml-container">
  <a id="{{ .Name }}" 
     class="sml" 
     rel="me" 
     href="{{ $href | safeHTMLAttr }}">@{{ .Username }}</a>
     <span id="{{ .Name }}" class="sml"> {{ .Name }}</span>
</div>

{{- end }}
{{- end }}
{{- end }}

Using the data file from above, my custom theme uses the plugin partial to stick the links in my profile:

 
layouts/partials/profile.html

<section id="author-profile" class="h-card">
  <a class="u-url" rel="me" href="https://moondeer.blog/about">
{{- with site.Author.profileavatar | default site.Author.avatar }}
    <img id="avatar" class="u-photo" src="{{ . }}" />
{{- end }}
  </a>
  <h1 class="p-name" rel="me">{{ site.Author.name }}</h1>
{{- partial "plugins/social-media-links.html" . }}
{{- $bio := cond .IsHome site.Author.briefbio site.Author.aboutbio -}}
  <p id="brief-bio" class="p-note">{{ $bio }}</p>
</section>

 
layouts/partials/plugins/social-media-links.html

{{- if templates.Exists "partials/profile/social-media-links.html" -}}
<div id="social-media-links" class="p-role">
{{ partial "profile/social-media-links.html" . }}
</div>
{{- end -}}

image
image974×1879 445 KB

1 Like
5

One of my high school CS tutees was asking me this last week: Is there any tangible benefit to rel=me in a anchor tag, beyond perhaps verifying site ownership e.g. for Mastodon?

6

Somewhere to view all the parameters passed to Hugo, and to edit what makes sense to edit, would be super appreciated

1 Like
7

One way to see exactly what Micro.blog sends through Hugo is to use Posts → “…” → Export → “Export theme and Markdown”. That will show you the config file and frontmatter for each post.

1 Like