feat: add meta tags to course pages

This commit is contained in:
Rotimi Best
2023-12-06 15:54:44 +03:00
parent 7767cec004
commit 15f6d57300
2 changed files with 29 additions and 14 deletions
@@ -95,20 +95,6 @@
}
</script>
<svelte:head>
<title>{editMode ? '[app] - ' : ''}{get(courseData, 'title', '')}</title>
<meta name="description" content={get(courseData, 'description', '')} />
<meta name="theme-color" content="#ffffff" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta property="og:title" content={get(courseData, 'title', '')} />
<meta property="og:description" content={get(courseData, 'description', '')} />
<meta property="og:type" content="website" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="280" />
<meta property="og:image:height" content="200" />
<meta property="og:image:secure_url" content={get(courseData, 'logo', '')} />
</svelte:head>
<div class="w-full bg-white dark:bg-black flex flex-col items-center">
<!-- Header Section -->
<header id="header" class="banner w-full flex items-center justify-center p-">
@@ -1,4 +1,5 @@
<script lang="ts">
import get from 'lodash/get';
import CourseLandingPage from '$lib/components/CourseLandingPage/index.svelte';
import type { Course } from '$lib/utils/types';
@@ -19,4 +20,32 @@
$: setCourseData(data.course);
</script>
<svelte:head>
<title>{get(data.course, 'title', '')}</title>
<meta name="description" content={get(data.course, 'description', '')} />
<meta name="theme-color" content="#ffffff" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta property="og:title" content={get(data.course, 'title', '')} />
<meta property="og:description" content={get(data.course, 'description', '')} />
<meta property="og:type" content="website" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="280" />
<meta property="og:image:height" content="200" />
<meta property="og:image:secure_url" content={get(data.course, 'logo', '')} />
<meta property="og:type" content="website" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1920" />
<meta property="og:image:height" content="1080" />
<meta property="og:image:secure_url" itemprop="image" content={get(data.course, 'logo', '')} />
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:domain" content="classroomio.com" />
<meta property="twitter:url" content="https://www.classroomio.com/" />
<meta name="twitter:title" content={get(data.course, 'title', '')} />
<meta name="twitter:description" content={get(data.course, 'description', '')} />
<meta name="twitter:image" content={get(data.course, 'logo', '')} />
</svelte:head>
<CourseLandingPage {courseData} />