Branch: master
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
92 lines (74 sloc) 2.68 KB
Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at
The complete set of authors may be found at
The complete set of contributors may be found at
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at
Utility method that updates the page's open graph and Twitter card metadata.
It takes an object as a parameter with the following properties:
title | description | url | image.
If the `url` is not specified, `window.location.href` will be used; for
all other properties, if they aren't specified, then that metadata field will not
be set.
Example (in your top level element or document, or in the router callback):
import { updateMetadata } from 'pwa-helpers/metadata.js';
title: 'My App - view 1',
description: 'This is my sample app',
url: window.location.href,
image: '/assets/view1-hero.png'
export const updateMetadata = ({
}: {
title?: string,
description?: string,
url?: string,
image?: string,
imageAlt?: string
}) => {
if (title) {
document.title = title;
setMetaTag('property', 'og:title', title);
if (description) {
setMetaTag('name', 'description', description);
setMetaTag('property', 'og:description', description);
if (image) {
setMetaTag('property', 'og:image', image);
if (imageAlt) {
setMetaTag('property', 'og:image:alt', imageAlt);
url = url || window.location.href;
setMetaTag('property', 'og:url', url);
Utility method to create or update the content of a meta tag based on an
attribute name/value pair.
Example (in your top level element or document, or in the router callback):
import { setMetaTag } from 'pwa-helpers/metadata.js';
setMetaTag('name', 'twitter:card', 'summary');
This would create the following meta tag in the head of the document (or
update the content attribute if a meta tag with name="twitter:card" exists):
<meta name="twitter:card" content="summary">
export function setMetaTag(attrName:string, attrValue:string, content:string) {
let element = document.head!.querySelector(`meta[${attrName}="${attrValue}"]`);
if (!element) {
element = document.createElement('meta');
element.setAttribute(attrName, attrValue);
element.setAttribute('content', content || '');