Porsche Design System

Meta Tags And Icon Links

Table of Contents

Supported options
Examples

Function name: getMetaTagsAndIconLinks()

Meta Icons are a set of icons to be used for the following purposes: Favicon, Apple Touch Icons, Android Touch Icons and Microsoft Windows Tiles. To simplify the implementation process we provide a getMetaTagsAndIconLinks partial.

Therefore, we provide a ready to use partial in all @porsche-design-system/components-{js|angular|react|vue} packages which needs to be injected into the <head> of your index.html.

This partial also provides some default Open Graph and Twitter meta tags which will display a thumbnail image when sharing a link on social media. If you want to define your own information you can set the ogImage option to false.

Supported options#

Option

Description

Type

Default

appTitle

Mandatory: Title of your app which will be reflected in the meta tag.

string

undefined

cdn

Decides from which CDN the resources are loaded.

'auto' | 'cn'

'auto'

format

Defines the output format of the partial. By default, it returns a html string, with jsx it returns valid jsx elements. When using the js option a javascript object is returned.

'html' | 'jsx' | 'js'

'html'

ogImage

Boolean attribute to decide whether the Open Graph and Twitter meta tags should be included.

boolean

true

When using jsx in the format option, it is necessary to have react/jsx-runtime as a dependency in the project included.

Examples#

Project integration differs based on the project setup. The following showcases the most common ways.

<!-- index.html -->
<head>
  <!--PLACEHOLDER_META_TAGS_AND_ICON_LINKS-->
</head>

<!-- package.json (tested on macOS, the script may need to be adjusted depending on the operating system used) -->
<!-- make sure to adjust the path to the index.html file -->
"scripts": {
  "prestart": "yarn replace",
  "replace": "placeholder='<!--PLACEHOLDER_META_TAGS_AND_ICON_LINKS-->' && partial=$placeholder$(node -e 'console.log(require(\"@porsche-design-system/components-js/partials\").getMetaTagsAndIconLinks({ appTitle: \"TITLE_OF_YOUR_APP\" }))') && regex=$placeholder'.*' && sed -i '' -E -e \"s^$regex^$partial^\" index.html"
  <!-- Alternative: Force using China CDN -->
  "replace": "placeholder='<!--PLACEHOLDER_META_TAGS_AND_ICON_LINKS-->' && partial=$placeholder$(node -e 'console.log(require(\"@porsche-design-system/components-js/partials\").getMetaTagsAndIconLinks({ appTitle: \"TITLE_OF_YOUR_APP\", cdn: \"cn\" }))') && regex=$placeholder'.*' && sed -i '' -E -e \"s^$regex^$partial^\" index.html"
}

Output

The result of this partial looks like this:

<meta property=og:title content="TITLE_OF_YOUR_APP">
<meta property=og:image content=https://cdn.ui.porsche.com/porsche-design-system/meta-icons/og-image.c880d39.png>
<meta name=twitter:title content="TITLE_OF_YOUR_APP">
<meta name=twitter:card content=summary_large_image>
<meta name=twitter:image content=https://cdn.ui.porsche.com/porsche-design-system/meta-icons/og-image.c880d39.png>
<meta name=theme-color content=#FFF media=(prefers-color-scheme:light)>
<meta name=theme-color content=#0E1418 media=(prefers-color-scheme:dark)>
<meta name=mobile-web-app-capable content=yes>
<meta name=apple-mobile-web-app-status-bar-style content=default>
<meta name=apple-mobile-web-app-title content="TITLE_OF_YOUR_APP">
<meta name=msapplication-TileImage content=https://cdn.ui.porsche.com/porsche-design-system/meta-icons/mstile-270x270.f58081f.png>
<meta name=msapplication-TileColor content=#FFF>
<link rel=icon sizes=any href=https://cdn.ui.porsche.com/porsche-design-system/meta-icons/favicon.ed9a926.ico>
<link rel=icon type=image/png sizes=32x32 href=https://cdn.ui.porsche.com/porsche-design-system/meta-icons/favicon-32x32.d42ac28.png>
<link rel=apple-touch-icon href=https://cdn.ui.porsche.com/porsche-design-system/meta-icons/apple-touch-icon-180x180.bdf11cc.png>
<link rel=manifest href=https://cdn.ui.porsche.com/porsche-design-system/meta-icons/manifest.b904b15.webmanifest>

// Alternative: Force using China CDN
<meta property=og:title content="TITLE_OF_YOUR_APP">
<meta property=og:image content=https://cdn.ui.porsche.cn/porsche-design-system/meta-icons/og-image.c880d39.png>
<meta name=twitter:title content="TITLE_OF_YOUR_APP">
<meta name=twitter:card content=summary_large_image>
<meta name=twitter:image content=https://cdn.ui.porsche.cn/porsche-design-system/meta-icons/og-image.c880d39.png>
<meta name=theme-color content=#FFF media=(prefers-color-scheme:light)>
<meta name=theme-color content=#0E1418 media=(prefers-color-scheme:dark)>
<meta name=mobile-web-app-capable content=yes>
<meta name=apple-mobile-web-app-status-bar-style content=default>
<meta name=apple-mobile-web-app-title content="TITLE_OF_YOUR_APP">
<meta name=msapplication-TileImage content=https://cdn.ui.porsche.cn/porsche-design-system/meta-icons/mstile-270x270.f58081f.png>
<meta name=msapplication-TileColor content=#FFF>
<link rel=icon sizes=any href=https://cdn.ui.porsche.cn/porsche-design-system/meta-icons/favicon.ed9a926.ico>
<link rel=icon type=image/png sizes=32x32 href=https://cdn.ui.porsche.cn/porsche-design-system/meta-icons/favicon-32x32.d42ac28.png>
<link rel=apple-touch-icon href=https://cdn.ui.porsche.cn/porsche-design-system/meta-icons/apple-touch-icon-180x180.bdf11cc.png>
<link rel=manifest href=https://cdn.ui.porsche.cn/porsche-design-system/meta-icons/manifest.cn.7d59be6.webmanifest>