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
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.
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.
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.
Code
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>
<!-- 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>
<!-- 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>
<!-- 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>
<!-- 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
Read more