biggest SEO & Google Page Speed optimizations

astro.config.mjs

@@ -6,5 +6,6 @@ import preact from "@astrojs/preact";
 export default defineConfig({
   integrations: [preact({ compat: true })],
   output: 'server',
+  site: 'https://visperto.com',
   adapter: cloudflare({ mode: "directory" }),
 });

src/components/Header.astro

@@ -6,13 +6,13 @@ const {title, subhead, image, travelCountryName, travelCountryNameId} = Astro.pr
 <header>
     <section class="brand">
         <a href="/">
-            <img alt="visperto" class="brand_logo" src="/assets/logo.svg">
+            <img alt="visperto" width="192.967" height="28.8" class="brand_logo" src="/assets/logo.svg">
         </a>
         <nav class="brand_nav">
             <ul>
                 <li>
-                    <a href="/blog">
-                        <img class="brand_nav_item_icon" alt="Travel Tips and Tricks" src="/assets/travel.svg">
+                    <a href="/article">
+                        <img alt="Travel Tips and Tricks" width="23" height="20" class="brand_nav_item_icon" src="/assets/travel.svg">
                         <span class="brand_nav_item_text">TRAVEL TIPS AND TRICKS</span>
                     </a></li>
             </ul>
@@ -45,7 +45,6 @@ const {title, subhead, image, travelCountryName, travelCountryNameId} = Astro.pr
     }
 
     .brand_logo {
-        height: var(--hg-logo);
         grid-column: 1/2;
         grid-row: 1/2;
         justify-self: start;

src/components/recent-article/RecentArticle.tsx

@@ -13,7 +13,7 @@ export default function RecentArticle(props: Props) {
 
     const regex = /<a(.*?)>/g;
     const modifiedHtmlString = {__html: props.photoCredit.__html.replace(regex, '<a$1 target="_blank">')};
-    const postUrl = `/blog/article?id=${props.id}&${props.slug}`;
+    const postUrl = `/article/${props.id}/${props.slug}`;
 
     return (<div class="recent-articles-list_item">
         <a target="_self" href={postUrl}>

src/layouts/Layout.astro

@@ -7,9 +7,9 @@ export interface Props {
 
 const {
 	title,
-	websiteURL = 'https://visperto.com',
+	websiteURL = Astro.site,
 	description = 'Unlock seamless travel experiences with Visperto.com - Your ultimate destination to effortlessly check visa requirements and entry restrictions for countries worldwide. Navigate your next adventure with ease and ensure a hassle-free journey. Your passport to worry-free travel starts here!',
-	ogImage = 'https://visperto.com/assets/og-image.png'
+	ogImage = `${Astro.site}/assets/og-image.png`
 } = Astro.props;
 ---
 
@@ -32,9 +32,6 @@ const {
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 		<meta name="generator" content={Astro.generator} />
 		<link rel="canonical" href={websiteURL} />
-		<link rel="preconnect" href="https://fonts.googleapis.com">
-    	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    	<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
 		<!-- Google tag (gtag.js) -->
 		<script async src="https://www.googletagmanager.com/gtag/js?id=G-5RY48XQR8L"></script>
 		<script>
@@ -56,7 +53,6 @@ const {
 		--wd-container: 						80%;
 		--container-sides-padding:				0;
 		--container-mar-top: 					3.5rem;
-    	--hg-logo: 								1.8rem;
 		--header-bor-radius:					1rem;
 		--country-cards-padding:				3.5rem var(--container-sides-padding) 1.5rem var(--container-sides-padding);
 		--country-cards-gap:					1.75rem;
@@ -147,6 +143,115 @@ const {
 		*/
 	}
 
+	/* latin-ext */
+	@font-face {
+		font-family: 'Outfit';
+		font-style: normal;
+		font-weight: 200;
+		font-display: swap;
+		src: url("../../assets/fonts/Outfit-200-ext.woff2") format('woff2');
+		unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+	}
+	/* latin */
+	@font-face {
+		font-family: 'Outfit';
+		font-style: normal;
+		font-weight: 200;
+		font-display: swap;
+		src: url("../../assets/fonts/Outfit-200.woff2") format('woff2');
+		unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+	}
+	/* latin-ext */
+	@font-face {
+		font-family: 'Outfit';
+		font-style: normal;
+		font-weight: 300;
+		font-display: swap;
+		src: url("../../assets/fonts/Outfit-300-ext.woff2") format('woff2');
+		unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+	}
+	/* latin */
+	@font-face {
+		font-family: 'Outfit';
+		font-style: normal;
+		font-weight: 300;
+		font-display: swap;
+		src: url("../../assets/fonts/Outfit-300.woff2") format('woff2');
+		unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+	}
+	/* latin-ext */
+	@font-face {
+		font-family: 'Outfit';
+		font-style: normal;
+		font-weight: 400;
+		font-display: swap;
+		src: url("../../assets/fonts/Outfit-400-ext.woff2") format('woff2');
+		unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+	}
+	/* latin */
+	@font-face {
+		font-family: 'Outfit';
+		font-style: normal;
+		font-weight: 400;
+		font-display: swap;
+		src: url("../../assets/fonts/Outfit-400.woff2") format('woff2');
+		unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+	}
+	/* latin-ext */
+	@font-face {
+		font-family: 'Outfit';
+		font-style: normal;
+		font-weight: 500;
+		font-display: swap;
+		src: url("../../assets/fonts/Outfit-500-ext.woff2") format('woff2');
+		unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+	}
+	/* latin */
+	@font-face {
+		font-family: 'Outfit';
+		font-style: normal;
+		font-weight: 500;
+		font-display: swap;
+		src: url("../../assets/fonts/Outfit-500.woff2") format('woff2');
+		unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+	}
+	/* latin-ext */
+	@font-face {
+		font-family: 'Outfit';
+		font-style: normal;
+		font-weight: 600;
+		font-display: swap;
+		src: url("../../assets/fonts/Outfit-600-ext.woff2") format('woff2');
+		unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+	}
+	/* latin */
+	@font-face {
+		font-family: 'Outfit';
+		font-style: normal;
+		font-weight: 600;
+		font-display: swap;
+		src: url("../../assets/fonts/Outfit-600.woff2") format('woff2');
+		unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+	}
+	/* latin-ext */
+	@font-face {
+		font-family: 'Outfit';
+		font-style: normal;
+		font-weight: 700;
+		font-display: swap;
+		src: url("../../assets/fonts/Outfit-700-ext.woff2") format('woff2');
+		unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+	}
+	/* latin */
+	@font-face {
+		font-family: 'Outfit';
+		font-style: normal;
+		font-weight: 700;
+		font-display: swap;
+		src: url("../../assets/fonts/Outfit-700.woff2") format('woff2');
+		unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+	}
+
 	* {
 		font-family: 'Outfit', sans-serif;
 	}

src/pages/blog/article.astro → src/pages/article/[id]/[article].astro

@@ -1,30 +1,39 @@
 ---
 export const prerender = false;
-import Layout from "../../layouts/Layout.astro";
-import Header from "../../components/Header.astro";
-const postId = Astro.url.searchParams.get('id');
-const postRes = await fetch(`https://hafenhost.com/travel-blog/wp-json/wp/v2/posts/${postId}?_fields=id,date,slug,title,content,featured_media`);
+const {id, article} = Astro.params;
+import Layout from "../../../layouts/Layout.astro";
+import Header from "../../../components/Header.astro";
+// Get article JSON
+const postRes = await fetch(`https://hafenhost.com/travel-blog/wp-json/wp/v2/posts/${id}?_fields=id,date,slug,title,content,featured_media,excerpt`);
 const post = await postRes.json();
+// Article image
 const featuredImageRes = await fetch(`https://hafenhost.com/travel-blog/wp-json/wp/v2/media/${post.featured_media}?_fields=id,caption,media_details`);
 const featuredImage = await featuredImageRes.json();
 const postHeaderBg = `url(${featuredImage?.media_details?.sizes?.large?.source_url})`;
-const title = `who needs a visa? | ${post.title?.rendered}`;
+// Short description
+const description = post?.excerpt?.rendered?.replace(/<[^>]*>|\[[^\]]*\]/g, '');
+// Title
+const title = `${post.title?.rendered} | visperto`;
 ---
-<Layout title={title}>
+<Layout
+        title={title}
+        websiteURL={`${Astro.site}article/${id}/${article}`}
+        description={description}
+        ogImage={`${featuredImage?.media_details?.sizes?.large?.source_url}`}>
     <Header
-        image="../assets/hero_image_country.jpg"
-        subhead="Navigating Visa Requirements and Travel Restrictions for your Next Adventure">
+            image="../../assets/hero_image_country.webp"
+            subhead="Navigating Visa Requirements and Travel Restrictions for your Next Adventure">
     </Header>
     <div class="post-container">
         <div class="post-header">
-            <h1 set:html={post.title?.rendered} />
+            <h1 set:html={post.title?.rendered}/>
         </div>
         <div class="image_credits" set:html={featuredImage.caption?.rendered}></div>
-        <Fragment set:html={post.content?.rendered} />
+        <Fragment set:html={post.content?.rendered}/>
     </div>
 </Layout>
 
-<style define:vars={{ postHeaderBg }}>
+<style define:vars={{postHeaderBg}}>
     .post-container {
         color: var(--dark-grey);
         margin: 2rem 0 0 0;
@@ -48,16 +57,18 @@ const title = `who needs a visa? | ${post.title?.rendered}`;
 
         > p, ul > li, ol > li {
             font-size: 1.2rem;
+
             > a, a:visited, a:active {
                 color: var(--blue);
+
                 &:hover {
                     text-decoration: underline;
                 }
             }
         }
 
         .post-header {
-            background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.7)), var(--postHeaderBg);
+            background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7)), var(--postHeaderBg);
             background-repeat: no-repeat;
             background-size: cover;
             background-position-y: 20%;
@@ -68,7 +79,7 @@ const title = `who needs a visa? | ${post.title?.rendered}`;
             padding: 0 3rem 1rem 3rem;
             color: var(--white);
             @media (max-width: 944px) {
-                background: linear-gradient(rgba(92, 92, 92, 0.37),rgba(24, 22, 20, 0.9)),var(--postHeaderBg);
+                background: linear-gradient(rgba(92, 92, 92, 0.37), rgba(24, 22, 20, 0.9)), var(--postHeaderBg);
             }
         }
 

src/pages/blog/index.astro → src/pages/article/index.astro

@@ -3,11 +3,12 @@ import Header from "../../components/Header.astro";
 import Layout from "../../layouts/Layout.astro";
 import RecentArticles from "../../components/recent-articles/RecentArticles";
 
-const title = `who needs a visa? | Travel Tips and Tricks`;
+const title = `Travel Tips and Tricks | visperto`;
+const url = new URL(Astro.url.pathname, Astro.site);
 ---
-<Layout title={title}>
+<Layout title={title} websiteURL={url}>
     <Header
-            image="../assets/hero_image_country.jpg"
+            image="../assets/hero_image_country.webp"
             subhead="Navigating Visa Requirements and Travel Restrictions for your Next Adventure">
     </Header>
     <RecentArticles client:only="preact" title="Travel Tips and Tricks" numberOfArticles="10" />

src/pages/index.astro

@@ -5,14 +5,14 @@ import Header from '../components/Header.astro';
 import Layout from '../layouts/Layout.astro';
 ---
 
-<Layout title="visperto | who needs a visa?">
+<Layout title="visperto | Visa & Travel Simplified for Your Next Adventure">
 	<Header
-		image="../assets/hero_image.jpeg"
+		image="../assets/hero_image.webp"
 		title="Visa & Travel Simplified for Your Next Adventure"
 		subhead="Your passport to hassle-free travel check visa requirements and restrictions here">
 	</Header>
-	<CountryCards client:only="preact"></CountryCards>
-	<RecentArticles client:only="preact" title="Recent Articles" numberOfArticles="3" />
+	<CountryCards client:idle></CountryCards>
+	<RecentArticles client:idle title="Recent Articles" numberOfArticles="3" />
 </Layout>
 
 <style>

src/pages/travel/[country].astro

@@ -53,12 +53,13 @@ const {
   capitalCoordinates,
   timezone
 } = Astro.props;
-const title = `who needs a visa? | ${country}`;
+const title = `${country} | visperto`;
 const listOfLanguages: string[] = Object.values(languages);
 const currency: string[] = Object.keys(currencies).map((curr) => curr);
 const callingCodes = Object.values(callingCode.suffixes).map((cc) => cc).map((code) => callingCode.root + code);
 const targetCurrency: string = Object.keys(currencies)[Object.keys(currencies).length - 1];
 const targetCurrencySymbol: string = currencies[targetCurrency].symbol;
+const url = new URL(`${Astro.url.pathname}${Astro.url.search}`, Astro.site);
 const transformItems = (items: string[]) => {
   if (items.length > 1) {
     return items.join(', ')
@@ -71,9 +72,9 @@ const transformItems = (items: string[]) => {
         title={title}
         ogImage={flags.png}
         description={`Discover essential travel info for ${country}, including visa requirements, official languages, currency, and calling code. Stay informed about COVID-19 restrictions, risk levels, entrance forms, and mask requirements. Find the latest updates for a seamless journey to ${country}`}
-        websiteURL={Astro.url}>
+        websiteURL={url}>
     <Header
-            image="../assets/hero_image_country.jpg"
+            image="../assets/hero_image_country.webp"
             subhead="Navigating Visa Requirements and Travel Restrictions for your Next Adventure"
             travelCountryName={country}
             travelCountryNameId={id}>