MetaTags.svelte
1 <script lang="ts"> 2 import type { Opt } from '@jet/environment/types/optional'; 3 import type { Organization, WithContext } from 'schema-dts'; 4 import type { WebRenderablePage } from '@jet-app/app-store/api/models/web-renderable-page'; 5 6 import MetaTags from '@amp/web-app-components/src/components/MetaTags/MetaTags.svelte'; 7 import type { SeoData } from '@amp/web-app-components/src/components/MetaTags/types'; 8 import { getLocale } from '@amp/web-app-components/src/utils/internal/locale'; 9 import { getPageDir } from '@amp/web-apps-localization/src'; 10 11 import { getI18n } from '~/stores/i18n'; 12 13 export let page: WebRenderablePage; 14 15 const i18n = getI18n(); 16 const locale = getLocale(); 17 18 const organizationSchema: WithContext<Organization> = { 19 '@context': 'https://schema.org', 20 '@id': 'https://apps.apple.com/#organization', 21 '@type': 'Organization', 22 name: 'App Store', 23 url: 'https://apps.apple.com', 24 logo: 'https://apps.apple.com/assets/app-store.png', 25 sameAs: [ 26 'https://www.wikidata.org/wiki/Q368215', 27 'https://twitter.com/AppStore', 28 'https://www.instagram.com/appstore/', 29 'https://www.facebook.com/appstore/', 30 ], 31 parentOrganization: { 32 '@type': 'Organization', 33 name: 'Apple', 34 '@id': 'https://www.apple.com/#organization', 35 url: 'https://www.apple.com/', 36 }, 37 }; 38 39 // This cast of `.seoData` is technically a little risky, but our app fully 40 // defines this property, which should make it fairly safe. Whatever is returned 41 // for the page from the `SEO` dependency on the Object Graph will be the value 42 // reflected here. 43 $: seoData = (page.seoData as Opt<SeoData>) ?? undefined; 44 45 // Provide default title for pages not yet set up with SEO data 46 $: defaultTitle = $i18n.t('ASE.Web.AppStore.Meta.SiteName'); 47 $: pageDir = getPageDir(locale.language) ?? 'ltr'; 48 </script> 49 50 <MetaTags 51 {defaultTitle} 52 {locale} 53 {pageDir} 54 {seoData} 55 origin={'https://apps.apple.com/'} 56 > 57 <svelte:fragment slot="schemaOrganizationData"> 58 {#if import.meta.env.SSR} 59 <svelte:element 60 this="script" 61 id="organization" 62 type="application/ld+json" 63 > 64 {JSON.stringify(organizationSchema)} 65 </svelte:element> 66 {/if} 67 </svelte:fragment> 68 </MetaTags>