Added SEO data

This commit is contained in:
Rafael González 2022-08-19 23:06:13 -05:00
parent ef99356330
commit 864814c9ee
6 changed files with 271 additions and 99 deletions

View File

@ -1,43 +1,47 @@
{
"name": "Rafael González | Links",
"display": "standalone",
"start_url": "/",
"icons": [
{
"src": "\/android-icon-36x36.png",
"sizes": "36x36",
"type": "image\/png",
"density": "0.75"
},
{
"src": "\/android-icon-48x48.png",
"sizes": "48x48",
"type": "image\/png",
"density": "1.0"
},
{
"src": "\/android-icon-72x72.png",
"sizes": "72x72",
"type": "image\/png",
"density": "1.5"
},
{
"src": "\/android-icon-96x96.png",
"sizes": "96x96",
"type": "image\/png",
"density": "2.0"
},
{
"src": "\/android-icon-144x144.png",
"sizes": "144x144",
"type": "image\/png",
"density": "3.0"
},
{
"src": "\/android-icon-192x192.png",
"sizes": "192x192",
"type": "image\/png",
"density": "4.0"
}
]
"name": "Rafael González Page, Links and Blog",
"display": "standalone",
"start_url": "/",
"short_name": "Rafael González",
"theme_color": "#111827",
"background_color": "#111827",
"description": "Mexican web developer, Shopify Expert and founder of Acromático Developement. Husband and father, allways builiding stuff personally and professionally 🚀",
"icons": [
{
"src": "/android-icon-36x36.png",
"sizes": "36x36",
"type": "image/png",
"density": "0.75"
},
{
"src": "/android-icon-48x48.png",
"sizes": "48x48",
"type": "image/png",
"density": "1.0"
},
{
"src": "/android-icon-72x72.png",
"sizes": "72x72",
"type": "image/png",
"density": "1.5"
},
{
"src": "/android-icon-96x96.png",
"sizes": "96x96",
"type": "image/png",
"density": "2.0"
},
{
"src": "/android-icon-144x144.png",
"sizes": "144x144",
"type": "image/png",
"density": "3.0"
},
{
"src": "/android-icon-192x192.png",
"sizes": "192x192",
"type": "image/png",
"density": "4.0"
}
]
}

View File

@ -1,6 +1,6 @@
{
"name": "Rafael González",
"description": "Mexican web developer, Shopify Expert and foundero of Acromático Developement. Husband and father, allways builiding stuff personally and professionally 🚀",
"description": "Mexican web developer, Shopify Expert and founder of Acromático Developement. Husband and father, allways builiding stuff personally and professionally 🚀",
"personalLinks": [
{
"name": "GitHub",

View File

@ -1,58 +1,168 @@
---
import profileData from '../data/profile.json';
import '../styles/base.css';
import profileData from "../data/profile.json";
import "../styles/base.css";
const profileName = profileData.name;
const { frontmatter, title: titleProp, description: descriptionProp, blog } = Astro.props;
const {
frontmatter,
title: titleProp,
description: descriptionProp,
blog,
} = Astro.props;
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png"
/>
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png"
/>
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png"
/>
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png"
/>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png"
/>
<link
rel="icon"
type="image/png"
sizes="192x192"
href="/android-icon-192x192.png"
/>
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/manifest.json" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
<meta name="theme-color" content="#ffffff" />
<meta name="viewport" content="width=device-width" />
<title>{frontmatter?.title ? `${frontmatter?.title} | ${profileName} Blog` : titleProp ? `${titleProp} | ${profileName} Blog` : `${profileName} | Links`}</title>
<meta name="description" content={frontmatter?.description ? frontmatter.description : descriptionProp ? descriptionProp : profileData.description}>
<meta name="robots" content="index, follow">
<title>
{
frontmatter?.title
? `${frontmatter?.title} | ${profileName} Blog`
: titleProp
? `${titleProp} | ${profileName} Blog`
: `${profileName} | Links`
}
</title>
<meta
name="description"
content={frontmatter?.description
? frontmatter.description
: descriptionProp
? descriptionProp
: profileData.description}
/>
<meta name="robots" content="index, follow" />
<meta property="og:type" content="website" />
<meta property="og:title" content={frontmatter?.title ? `${frontmatter?.title} | ${profileName} Blog` : titleProp ? `${titleProp} | ${profileName} Blog` : `${profileName} | Links`} />
<meta property="og:description" content={frontmatter?.description ? frontmatter.description : descriptionProp ? descriptionProp : profileData.description} />
<meta property="og:image" content={frontmatter?.image ? frontmatter?.image : "https://res.cloudinary.com/acromatico-development/image/upload/c_fill,f_auto,h_1200,w_1200/v1641392022/Rafa%20Page/6575E4EB-3F86-47E7-A315-9CD51E5279EB_mm7ctf"} />
<meta property="og:url" content={Astro.site} />
<link rel="canonical" href={Astro.site}>
<meta
property="og:title"
content={frontmatter?.title
? `${frontmatter?.title} | ${profileName} Blog`
: titleProp
? `${titleProp} | ${profileName} Blog`
: `${profileName} | Links`}
/>
<meta
property="og:description"
content={frontmatter?.description
? frontmatter.description
: descriptionProp
? descriptionProp
: profileData.description}
/>
<meta
property="og:image"
content={frontmatter?.image
? frontmatter?.image
: "https://res.cloudinary.com/acromatico-development/image/upload/c_fill,f_auto,h_1200,w_1200/v1641392022/Rafa%20Page/6575E4EB-3F86-47E7-A315-9CD51E5279EB_mm7ctf"}
/>
<meta property="og:url" content={Astro.url} />
<link rel="canonical" href={Astro.url} />
<script
type="application/ld+json"
set:html={`
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "Rafa Page",
"url": "https://rafa.page"
}
`}
></script>
<script
type="application/ld+json"
set:html={`{
"@context": "https://schema.org",
"@type": "Person",
"name": "Rafael González Vázquez",
"url": "https://rafa.page",
"sameAs": [
"https://www.linkedin.com/in/rafagonvaz/",
"https://www.instagram.com/rafaremo/",
"https://twitter.com/RafaRemo"
],
"image": "https://res.cloudinary.com/acromatico-development/image/upload/c_fill,f_auto,h_1200,w_1200/v1641392022/Rafa%20Page/6575E4EB-3F86-47E7-A315-9CD51E5279EB_mm7ctf"
}`}
></script>
{
frontmatter && (
<script
type="application/ld+json"
set:html={`
{
"@context": "https://schema.org",
"@type": "NewsArticle",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "${Astro.url}"
},
"headline": "${frontmatter.title}",
"image": [
"${frontmatter.image}"
],
"datePublished": "2015-02-05T08:00:00+08:00",
"dateModified": "2015-02-05T09:20:00+08:00",
"author": {
"@type": "Person",
"name": "Rafael González Vázquez",
"url": "${Astro.site}"
}
}
`}
/>
)
}
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-45FLVCCPTZ"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-45FLVCCPTZ"
></script>
<script>
// @ts-ignore
// @ts-ignore
window.dataLayer = window.dataLayer || [];
// @ts-ignore
function gtag(){dataLayer.push(arguments);}
// @ts-ignore
gtag('js', new Date());
// @ts-ignore
gtag('config', 'G-45FLVCCPTZ');
function gtag() {
// @ts-ignore
dataLayer.push(arguments);
}
// @ts-ignore
gtag("js", new Date());
// @ts-ignore
gtag("config", "G-45FLVCCPTZ");
</script>
</head>
<body class={`bg-white dark:bg-gray-900`}>
<header class="w-full flex flex-col justify-center items-center pt-10 ">
<header class="w-full flex flex-col justify-center items-center pt-10">
<img
class="w-1/3 md:w-52 rounded-full border-4 border-gray-900 dark:border-white aspect-square"
loading="lazy"
@ -67,16 +177,41 @@ const { frontmatter, title: titleProp, description: descriptionProp, blog } = As
https://res.cloudinary.com/acromatico-development/image/upload/c_fill,f_auto,h_1200,w_1200/v1641392022/Rafa%20Page/6575E4EB-3F86-47E7-A315-9CD51E5279EB_mm7ctf 1200w,
https://res.cloudinary.com/acromatico-development/image/upload/c_fill,f_auto,h_1500,w_1500/v1641392022/Rafa%20Page/6575E4EB-3F86-47E7-A315-9CD51E5279EB_mm7ctf 1500w"
alt="Rafael González"
/>
<h1
class="font-mono text-center font-bold underline underline-offset-8 uppercase text-4xl my-4 tracking-wide dark:text-white"
>
<h1 class="font-mono text-center font-bold underline underline-offset-8 uppercase text-4xl my-4 tracking-wide dark:text-white">{profileName}</h1>
<p class="font-mono text-center text-l my-4 sm:mt-4 sm:mb-0 mx-auto w-11/12 max-w-5xl tracking-wide dark:text-white">{profileData.description}</p>
<a href="/main.vcf" target="_blank" rel="noopener" class="md:hidden"><button class="mt-4 p-4 bg-black text-white dark:text-black dark:bg-white border-2 border-black rounded-md font-bold uppercase tracking-wide">Agregar a Contactos</button></a>
{profileName}
</h1>
<p
class="font-mono text-center text-l my-4 sm:mt-4 sm:mb-0 mx-auto w-11/12 max-w-5xl tracking-wide dark:text-white"
>
{profileData.description}
</p>
<a href="/main.vcf" target="_blank" rel="noopener" class="md:hidden"
><button
class="mt-4 p-4 bg-black text-white dark:text-black dark:bg-white border-2 border-black rounded-md font-bold uppercase tracking-wide"
>Agregar a Contactos
</button>
</a>
</header>
<main class={`font-mono text-l my-16 sm:mb-8 mx-auto w-11/12 max-w-5xl tracking-wide dark:text-white ${blog || frontmatter ? "blog": ""}`}>
<slot/>
<main
class={`font-mono text-l my-16 sm:mb-8 mx-auto w-11/12 max-w-5xl tracking-wide dark:text-white ${
blog || frontmatter ? "blog" : ""
}`}
>
<slot />
</main>
<footer class="px-3 py-8">
<p class="dark:text-white text-center">Powered by <a class="underline" href="https://acromatico.dev" target="_blank" rel="noopener">Acromático Development</a></p>
<p class="dark:text-white text-center">
Powered by <a
class="underline"
href="https://acromatico.dev"
target="_blank"
rel="noopener"
>Acromático Development
</a>
</p>
</footer>
</body>
</html>

View File

@ -1,10 +1,43 @@
---
import MainLayout from "../layouts/main.astro";
const posts = await Astro.glob("../pages/blog/*.mdx");
const postByDate = posts
.sort((a, b) => {
return (
new Date(b.frontmatter.date).getTime() -
new Date(a.frontmatter.date).getTime()
);
})
.reverse();
---
<MainLayout title="Recent Blog Entries" description="List of my most resent blog entries." blog={true}>
<h1 class="text-4xl">Recent Blog Entries</h1>
<div class="grid grid-cols-2 md:grid-cols-4">
</div>
<MainLayout
title="Recent Blog Entries"
description="List of my most resent blog entries."
blog={false}
>
<h1 class="text-4xl text-center uppercase font-bold mb-8">Recent Blog Entries</h1>
<section class="grid grid-cols-2 md:grid-cols-4 gap-4">
{
postByDate.map((post) => (
<a href={`${post.url}`} class="">
<article class="border-2 border-gray-800 dark:border-gray-200 dark:text-gray-200 dark:hover:text-white text-gray-800 hover:text-black">
<img src={post.frontmatter.image} />
<div class="p-4">
<h3 class="mb-4 uppercase">
{post.frontmatter.title}
</h3>
<p class="text-s mb-2">
{post.frontmatter.exerpt}
</p>
<p class="text-s text-gray-600 dark:text-gray-400 text-sm">
{new Date(post.frontmatter.date).toLocaleDateString("es-US")}
</p>
</div>
</article>
</a>
))
}
</section>
</MainLayout>

View File

@ -1,14 +1,14 @@
---
layout: ../../layouts/main.astro
date: 2022-08-18
title: Optimizing performance of an old Shopify Theme
description:
Some tips and recommendations for optimizing and boosting performance of an
old Shopify theme.
exerpt:
In this first blog post I want to share some of the things I've learned during
this process, that way maybe I can help other jump through some of the hard
parts of successfully optimizing a Shopify theme.
image: https://images.unsplash.com/photo-1506818144585-74b29c980d4b?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzNTMzMzl8MHwxfGFsbHx8fHx8fHx8fDE2NjA3OTI2NjA&ixlib=rb-1.2.1&q=80&w=1600&ar=16:9&fit=crop
Some tips and recommendations for optimizing and boosting performance of an
old Shopify theme.
image: https://images.unsplash.com/photo-1506818144585-74b29c980d4b?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzNTMzMzl8MHwxfGFsbHx8fHx8fHx8fDE2NjA3OTI2NjA&ixlib=rb-1.2.1&q=80&w=350&ar=16:9&fit=crop
---
# Optimizing an old Shopify Theme

View File

@ -3,7 +3,7 @@
@tailwind components;
@tailwind utilities;
@layer components {
@layer utilities {
main.blog h1 {
@apply text-4xl font-bold mb-8 text-center uppercase;
}