Dario Evaristo Bellotta | Webdesign, SEO and Marketing
instagram.com/darioevaristobellotta
linkedin.com/dario-evaristo-bellotta

About

Short intro about me: Bellotta Dario, 32 years old from Frankfurt am Main. My main focus is on web development, both front-end and back-end. Search engine optimization is my second big passion, and search engine advertising as well as social media marketing are also part of my expertise. I’ve worked with various clients, collaborated with advertising agencies, and served as a full-stack developer for an online shop. Currently, I’m expanding into graphic design, as it complements web development well. I also enjoy 3D design using Unity, Blender, or the Unreal Engine. As you can see, I’m very curious and always eager to learn new things. Personally, I would describe myself as pleasant. I bet no one reads the text up to this point.

Skills

HTML

CSS

JS

PHP

SQL

Bootstrap

WordPress

Woocommerce

On Page SEO

OFF Page SEO

SEA

Google Analytics

Google Search Console

Google Tag Manager

Google Ads

Google MyBusiness / Maps

Google PageSpeed / Lighthouse

Schema.org / Rich Snippets

Facebook Business / Ads

Adobe Photoshop

Wordpress Developer Kit

Wordpress-Developer-Kit_By-Dario-Evaristo-Bellotta

Blog

The perfect meta data for wordpress

This guide provides step-by-step instructions for the perfect meta data title, description, url and image tailored to your Wordpress website.

By Dario Bellotta

Code

Difficulity: More advanced

What you need is the: Yoast SEO Plugin for WordPress.

Follow me on Instagram: @darioevaristobellotta

Start:

To ensure that both your pages and posts have optimal meta-data – including titles, descriptions, URLs, and images – as you see here:

(you can check your OG meta data here: https://www.opengraph.xyz/)

You just have to replace your <title> aswell as your <meta name=”description”> in your header.php located in: /wp-content/themes/your-theme/header.php with this code:

<title><?php
$meta_title = get_post_meta(get_the_ID(), '_yoast_wpseo_title', true);
// If the meta description is not set, you can use the excerpt as a fallback
if (empty($meta_title)) {
$meta_title = get_the_title();
}
echo $meta_title;
?></title>

<meta name="description" content=" <?php 
$meta_description = get_post_meta(get_the_ID(), '_yoast_wpseo_metadesc', true);
// If the meta description is not set, you can use the excerpt as a fallback
if (empty($meta_description)) {
$meta_description = get_the_excerpt();
}
echo $meta_description;
?>
"/>

<!-- Open Graph protocol -->
<meta property="og:url" content="<?php echo $url ?>">
<meta property="og:type" content="website">
<meta property="og:title" content="<?php echo $meta_title; ?>">
<meta property="og:description" content="<?php echo $meta_description; ?>">
<meta property="og:image" content="
<?php
$social_image = get_post_meta(get_the_ID(), '_yoast_wpseo_opengraph-image', true);
// If the social image is not set, you can use a default fallback
if (empty($social_image)) {
$social_image = 'your-backup-image.png';
}

echo $social_image;
?>
">

<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="<?php wp_title( '|', true, 'right' ); ?>">
<meta property="twitter:url" content="<?php echo $url ?>">
<meta name="twitter:title" content="<?php echo $meta_title; ?>">
<meta name="twitter:description" content=" <?php echo $meta_description; ?>">
<meta name="twitter:image" content="<?php echo $social_image; ?>">

It should look like this:

now you can edit the meta title, the meta description and the OG Image for sharing inside your wordpress pages with YOAST SEO Plugin. Just scroll to the bottom of your pages or blog posts.

Admin Backend -> Pages -> Edit -> Scroll down to “Yoast Seo Plugin”

Admin Backend -> Posts -> Edit -> Scroll down to “Yoast Seo Plugin”

and there you can edit the title, the description and the image

The URL will be inserted automatically, and for a backup image, you can substitute ‘your-backup-image.png’ in the provided code with the URL of your backup image.

26. March 2024
Read more

WordPress Social Media Share Buttons

This guide provides step-by-step instructions for crafting custom social media share buttons tailored to your Wordpress website.

By Dario Bellotta

Code

Dario-Evaristo-Bellotta_Wordpres-Social-Media-Share-Butttons_02

Difficulity: More advanced

What you need is: Yoast SEO Plugin for WordPress and XYZ PHP Code for WordPress and for the social media buttons Fontawesome.com

Follow me on Instagram: @darioevaristobellotta

Start:

First you need to get the permalink of your current page.

<?php
// Get the current post ID
$post_id = get_the_ID();
// Get the current post permalink
$post_permalink = get_permalink($post_id);
// Encode the post permalink for Twitter
$encoded_permalink = urlencode($post_permalink);
?>

With your current URL you just need this HTML code for twitter sharing

<a href="https://twitter.com/intent/tweet?url=<?php echo $encoded_permalink; ?>" target="_blank" rel="noopener noreferrer">
<i class="fa-brands fa-x-twitter"></i>Share on X (Twitter)
</a>

and optionally the following codes for LinkedIn sharing

<!-- Custom LinkedIn Sharing Button -->
<a href="https://www.linkedin.com/sharing/share-offsite/?url=<?php echo $encoded_permalink; ?>" target="_blank" rel="noopener noreferrer">
<i class="fa-brands fa-linkedin-in"></i>Share on LinkedIn
</a>

Whatsapp

<!-- Custom WhatsApp Sharing Button -->
<a href="https://api.whatsapp.com/send?text=<?php echo $encoded_permalink; ?>" target="_blank" rel="noopener noreferrer">
<i class="fa-brands fa-whatsapp"></i>Share on WhatsApp
</a>

Facebook

<!-- Custom Facebook Sharing Button -->
<a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $encoded_permalink; ?>" target="_blank" rel="noopener noreferrer">
<i class="fa-brands fa-facebook-f"></i>Share on Facebook
</a>

Facebook Messenger

<!-- Custom Facebook Messenger Sharing Button -->
<a href="https://www.facebook.com/dialog/send?link=<?php echo $encoded_permalink; ?>&app_id=YOUR_APP_ID" target="_blank" rel="noopener noreferrer">
<i class="fa-brands fa-facebook-messenger"></i>Share on Facebook Messenger
</a>

Telegram

<!-- Custom Telegram Sharing Button -->
<a href="https://t.me/share/url?url=<?php echo $encoded_permalink; ?>" target="_blank" rel="noopener noreferrer">
<i class="fa-brands fa-telegram"></i>Share on Telegram
</a>

Pinterest

<!-- Custom Pinterest Sharing Button -->
<a href="https://www.pinterest.com/pin/create/button/?url=<?php echo $encoded_permalink; ?>&media=<?php echo $post_thumbnail_url; ?>" target="_blank" rel="noopener noreferrer">
<i class="fa-brands fa-pinterest-p"></i>Pin it on Pinterest
</a>

Reddit

<!-- Custom Reddit Sharing Button -->
<a href="https://www.reddit.com/submit?url=<?php echo $encoded_permalink; ?>" target="_blank" rel="noopener noreferrer">
<i class="fa-brands fa-reddit-alien"></i>Share on Reddit
</a>

and that’s basically it.

How to insert this code into your pages:

To insert this code into your pages you need to copy this code with the social media buttons you want to have into XYZ PHP Code.

1. Add new PHP code snippet

2. Insert the code with your chosen social media buttons 

Finally you can add this shortcode into you pages where you want the share buttons to be 

How to insert this code into your blog posts

You need to insert it into /wp-content/themes/your-theme/single.php

How to get the perfect meta data for your links:

For your link url, the title and the image to appear correctly you now need the Yoast SEO Plugin and the right OG meta data.

In your /wp-content/themes/your-theme/header.php you need to insert this code

the code is:

<title><?php
$meta_title = get_post_meta(get_the_ID(), '_yoast_wpseo_title', true);
// If the meta description is not set, you can use the excerpt as a fallback
if (empty($meta_title)) {
$meta_title = get_the_title();
}
echo $meta_title;
?></title>

<meta name="description" content=" <?php 
$meta_description = get_post_meta(get_the_ID(), '_yoast_wpseo_metadesc', true);
// If the meta description is not set, you can use the excerpt as a fallback
if (empty($meta_description)) {
$meta_description = get_the_excerpt();
}
echo $meta_description;
?>
"/>

<!-- Open Graph protocol -->
<meta property="og:url" content="<?php echo $url ?>">
<meta property="og:type" content="website">
<meta property="og:title" content="<?php echo $meta_title; ?>">
<meta property="og:description" content="<?php echo $meta_description; ?>">
<meta property="og:image" content="
<?php
$social_image = get_post_meta(get_the_ID(), '_yoast_wpseo_opengraph-image', true);
// If the social image is not set, you can use a default fallback
if (empty($social_image)) {
$social_image = '/wp-content/uploads/2023/06/Dario-Evaristo-Bellotta_Open-Graph01.png';
}

echo $social_image;
?>
">

<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="<?php wp_title( '|', true, 'right' ); ?>">
<meta property="twitter:url" content="<?php echo $url ?>">
<meta name="twitter:title" content="<?php echo $meta_title; ?>">
<meta name="twitter:description" content=" <?php echo $meta_description; ?>">
<meta name="twitter:image" content="<?php echo $social_image; ?>">

now you can edit the meta title, the meta description and the OG Image for sharing inside your wordpress pages with YOAST SEO Plugin. Just scroll to the bottom of your pages.

And for the image you go to “social” tab and insert there the image

How install Fontawesome.com for the sharing icons:

To install the sharing icons you just need to put this code into your /wp-content/themes/your-theme/header.php

<script src="https://kit.fontawesome.com/0d2f09bcd0.js" crossorigin="anonymous"></script>

If your link is not rendert correctly try to append “?v=2.0” at the end of your link on social media like this:

https://darioevaristobellotta.de?v=2.0
17. March 2024
Read more

Guides