Skip to content

fix(seo): optimize open graph image format, favicons, and meta tags for whatsapp preview #89

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Saackboi merged 1 commit into from
Aug 23, 2026
Merged

fix(seo): optimize open graph image format, favicons, and meta tags for whatsapp preview #89

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added public/apple-touch-icon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/favicon-16x16.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/favicon-32x32.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/favicon.ico
View file
Open in desktop
Binary file not shown.
Binary file added public/og-image.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 5 additions & 4 deletions src/app/features/landing/landing.page.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,10 +49,11 @@ export class LandingPage implements OnInit {


ngOnInit(): void {
const title = 'Portfolio | Kevin Sánchez';
const description = 'A visual, terminal-inspired portfolio showcasing experiments, projects, and process.';
const url = location.origin;
const image = `${location.origin}/assets/projects/detail/self/self-03.png`;
const title = 'Kevin Sánchez — Desarrollador Full-Stack | .NET & Angular';
const description =
'Desarrollador Full-Stack especializado en .NET y Angular. Construyo sistemas completos y escalables de inicio a fin, combinando arquitectura sólida, automatización y buenas prácticas de infraestructura.';
const url = 'https://portfolio.sackboi.win/';
const image = 'https://portfolio.sackboi.win/og-image.jpg';

this.seo.setTitle(title);
this.seo.setDescription(description);
Expand Down
Binary file added src/assets/og-image.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
27 changes: 19 additions & 8 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!doctype html>
<html lang="es" class="scroll-smooth dark">
<html lang="es" class="scroll-smooth dark" itemscope itemtype="http://schema.org/WebSite">
<head>
<meta charset="utf-8">
<title>Kevin Sánchez — Desarrollador Full-Stack | .NET & Angular</title>
Expand All @@ -10,27 +10,38 @@
<meta name="keywords" content="Kevin Sánchez, Full-Stack, .NET, C#, Angular, SQL Server, Docker, Azure, TypeScript, Portfolio, Desarrollador Web">
<link rel="canonical" href="https://portfolio.sackboi.win/">

<!-- Open Graph / Facebook -->
<!-- Schema.org / Google / WhatsApp Fallbacks -->
<meta itemprop="name" content="Kevin Sánchez — Desarrollador Full-Stack | .NET & Angular">
<meta itemprop="description" content="Desarrollador Full-Stack especializado en .NET y Angular. Construyo sistemas completos y escalables de inicio a fin, combinando arquitectura sólida, automatización y buenas prácticas de infraestructura.">
<meta itemprop="image" content="https://portfolio.sackboi.win/og-image.jpg">
<link rel="image_src" href="https://portfolio.sackboi.win/og-image.jpg">

<!-- Open Graph / Facebook / WhatsApp -->
<meta property="og:site_name" content="Kevin Sánchez Portfolio">
<meta property="og:type" content="website">
<meta property="og:url" content="https://portfolio.sackboi.win/">
<meta property="og:title" content="Kevin Sánchez — Desarrollador Full-Stack | .NET & Angular">
<meta property="og:description" content="Desarrollador Full-Stack especializado en .NET y Angular. Construyo sistemas completos y escalables de inicio a fin, combinando arquitectura sólida, automatización y buenas prácticas de infraestructura.">
<meta property="og:image" content="https://portfolio.sackboi.win/og-image.png">
<meta property="og:image" content="https://portfolio.sackboi.win/og-image.jpg">
<meta property="og:image:secure_url" content="https://portfolio.sackboi.win/og-image.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Kevin Sánchez — Portafolio Desarrollador Full-Stack">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://portfolio.sackboi.win/">
<meta name="twitter:title" content="Kevin Sánchez — Desarrollador Full-Stack | .NET & Angular">
<meta name="twitter:description" content="Desarrollador Full-Stack especializado en .NET y Angular. Construyo sistemas completos y escalables de inicio a fin, combinando arquitectura sólida, automatización y buenas prácticas de infraestructura.">
<meta name="twitter:image" content="https://portfolio.sackboi.win/og-image.png">
<meta name="twitter:image" content="https://portfolio.sackboi.win/og-image.jpg">

<!-- Favicon & Icons -->
<!-- Favicon & Touch Icons -->
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="assets/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon.svg">
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<meta name="theme-color" content="#0b0b0b">

<!-- Fonts & Icons -->
Expand Down
Loading