homebrewery
homebrewery copied to clipboard
naturalcrit
Add brew metadata as meta tags into head on share render
Feature for v3: Some the metadata fields: title, description, and thumbnail should be placed within meta tags on the render of the share page.
https://github.com/naturalcrit/homebrewery/blob/master/client/template.js has been updated to include the brew title into the <title> element.
The brew is passed in via props, so nothing elsewhere needs updating.
There are some other html meta tweaks that need doing here too for proper validation.
The top of the template could look more like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>${title.length ? `${title} - The Homebrewery`: 'The Homebrewery - NaturalCrit'}</title>
<link href="//use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet" />
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
<link href=${`/${name}/bundle.css`} rel='stylesheet' />
<meta name="description" content="${props.brew.description}">
<meta name="author" content="${props.brew.authors.join()}">
<link rel="icon" href="/assets/homebrew/favicon.ico" type="image/x-icon" />
So .. add a lang="en", add a charset meta, add description meta, add author meta.
Eventually also props.brew.tags in some form just for completeness. (I'm unsure what html element to use there.)
The lang="en" for the share page should remain as en because the share page has english language UI elements.
Later, once the brew meta data includes an author specified lang option that would be inserted into the <div class="pages> element (i.e. not the outermost <html> element.)
With #1777 and #2080 merged now, I think this issue just needs the user selectable language attribute set - I imagine we can do this in a very similar way to the metadata template changes.
Can this issue be closed? The only remaining thing left here is the language tag, which is better covered by the issue (and attached PR) #1343 .
The lang attribute in the <html> element is for the document as a whole, which includes any UI elements. Generally, it should get set to en (because that is what we're using everywhere) .. but later when a user can change a user setting for the UI lang then it would go there.
However, we also now have brew.lang, which will be applied to the <div class="pages"> that wraps the rendered brew.
This brew.lang (#1343) should probably also be applied to these elements in the head
-
<meta property="og:title" content="¡Hola! La leyenda de la siesta." lang="es"> -
<meta property="og:description" content="Aquí está mi hermosa cerveza." lang="es"> -
<title lang="es">¡Hola! La leyenda de la siesta.</title>
But not this:
-
<meta property="og:site_name" content="The Homebrewery - Make your Homebrew content look legit!">
(not until we change the html document lang via user preferences)
