This article is based on my experience. Follow me on Instagram: @darioevaristobellotta

1. Normal websites e.g. company pages

What is been used for ‘normal websites’ like a gym, a tattoo studio or a portfolio?

• WordPress or other CMS like Typo3 or Joomla but mainly WordPress
• CSS Frameworks mainly Bootstrap or other similar like Tailwind
• JQuery as JavaScript libraries
• Or just Vanilla Websites without a CMS only Bootstrap and JQuery but it’s not that popular
• No Code Websites there are a lot of no code websites too with as example WordPress + Elementor or with Wix.com but i wouldn’t recommend to do it

* WordPress is used in 40% -45% of all the websites, Joomla in 2% – 3%, Drupal in 1% – 2%, Magento in 1% – 2%, Wix in 1% – 2%, Sqaurespace in 1% – 2%, TYPO3 in 1%

(I use MDB Bootstrap https://mdbootstrap.com/, WordPress: https://wordpress.com/, JQuery: https://jquery.com/)

2. Bigger Projects websites / webapps

For big projects like Facebook, Twitter or other webapps like Canva, or for big clients you will use:

• JS Frondend Frameworks like React, Angular, Vue or Svelte JS
• JS Backend Frameworks like Node, Next or NestJS
• I know that some big websites like hosting companies are build with PHP as foundation

* React.js in 40% of all websites, Vue.js in 30%, Angular,js 20%, Sveite.js 5%, Ember.js 3%, Backbone.js 1%, Meteor.js 1%

(ReactJs: https://reactjs.org/, AngularJS: https://angular.io/, VueJS: https://vuejs.org/, SvelteJS: https://svelte.dev/)

* Node.js in 60% of the websites, Next.js in 20%, Nest.js in 10%, Koa.js 5%, Hapi.js 3%, Fastify 2%

(Node.js: https://nodejs.org/en, Next.js: https://nextjs.org/, Nest.js: https://nestjs.com/, Koa.js: https://koajs.com/, Hapi.js: https://hapi.dev/, Fastify.js: https://fastify.dev/)

3. Online Shops

• Shopify my favorite because it feels always the best as a user
• Shopware no free option this is paid only upfront
• WordPress + Woocommerce free

* Woocommerce in 30% of all websites, Shopify 20%, Magento 12%, Big Commerce 4% – 5%, Shopware 2% – 3%, Others like (including PrestaShop, OpenCart, Wix, etc.) Remaining percentage

(Shopify: https://www.shopify.com/, Shopware: https://www.shopware.com/, Woocommerce: https://woocommerce.com/)

Differences:

We make differences in Front and Backend Development

Frontend = HTML, CSS, JS (everything that works on the user side) React.js, Vue.js Angular,js and so on

Backend = PHP, MySQL, JSON etc (everything that works on the server) Node.js, Next.js, Nest.js and so on

Vanilla Websites

I mentioned vanilla websites in the first section it’s mainly just a combination of PHP, Bootstrap and JQuery without anything but its not that popular anymore. For a NFT Website for a friend of mine as example I did it vanilla so there are some usecases for it.

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.

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

These are all of my code snippets I post on Instagram to copy and paste.

If you like it you can leave me a follow on Instagram: @darioevaristobellotta

Async & Defer to not render block

“Async – means execute code when it is downloaded and do not block DOM construction during downloading process. Defer – means execute code after it’s downloaded and browser finished DOM construction and rendering process.” Source: stackoverflow.com

<!-- JS files defer and async -->
<script src=""></script>
<script defer src=""></script>
<script async src=""></script>

Anonymize User IPs on Google Analytics

“When a customer of Universal Analytics requests IP-address anonymization, Analytics anonymizes the address as soon as technically feasible.” Source: support.google.com

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR-ID"></script>
<script>
var gaProperty = 'YOUR-ID';
var disableStr = 'ga-disable-' + gaProperty;
if (document.cookie.indexOf(disableStr + '=true') > -1) {
 window[disableStr] = true;
}
function gaOptout() {
 document.cookie = disableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
 window[disableStr] = true;
 alert('Google Analytics tracking has been disabled in your browser for this website.');
}
var gaOptOut='ga-disable-YOUR-ID';
if (document.cookie.indexOf(gaOptOut+'=true')>-1) window[gaOptOut]=true;
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'YOUR-ID', { 'anonymize_ip': true });
</script>    

JQuery load more button

Without any frameworks or libraries. xcept from JQuery 😁

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".content").slice(0, 3).show();
$("#loadMore").on("click", function(e){
e.preventDefault();
$(".content:hidden").slice(0, 3).slideDown();
if($(".content:hidden").length == 0) {
$("#loadMore").text("No Content").addClass("noContent");
} }); })
</script>

<img class="content" src="Image01.png" />
<img class="content" src="Image02.png" />
<img class="content" src="Image03.png" />
<img class="content" src="Image04.png" />
<img class="content" src="Image05.png" />
<img class="content" src="Image06.png" />

<a href="#" id="loadMore">Load More</a>

Forcing a reload of your files

?v=X Its mainly used to take care of browser cache.
You can force a file to reload and not be stuck in cache.

<!-- image example -->
<img src="folder/file.png?v=2" />

<!-- script example -->
<script src="js/files.js?v=3"></script>

<!-- stylesheet example -->
<link rel="stylesheet" href="css/file.css?v=4">

Preloading your Fonts

“The preload value of the <link> element’s rel attribute lets you declare fetch requests in the HTML’s <head>, specifying resources that your page will need very soon, which you want to start loading early in the page lifecycle, before browsers’ main rendering machinery kicks in. This ensures they are available earlier and are less likely to block the page’s render, improving performance.”

Source: developer.mozilla.org

<!-- Preload Fonts -->
<link rel="preload" as="font" href="FIRST" type="font/otf" crossorigin="anonymous">
<link rel="preload" as="font" href="SECOND" type="font/ttf" crossorigin="anonymous">

Help Google crawling your site

“Schema.org is a collaborative, community activity with a mission to create, maintain, and promote schemas for structured data on the Internet, on web pages, in email messages, and beyond.”

Source: schema.org

<!-- Schema.org -->
<script type="application/ld+json"> 
{ "@context" : "http://schema.org", "@type" : "LocalBusiness", 
"name" : "NAME", 
"image": "IMAGE", 
"email": "EMAIL", 
"url": "URL", 
"address" : { "@type" : "PostalAddress", 
"addressLocality" : "STREET", 
"postalCode" : "POSTALCODE", 
"addressCountry": "DE" 
} } 
</script>

Open Graph for Facebook sharing

“Open Graph meta tags are snippets of code that control how URLs are displayed when shared on social media. They’re part of Facebook’s Open Graph protocol and are also used by other social media sites, including LinkedIn and Twitter (if Twitter Cards are absent). You can find them in the <head> section of a webpage. Any tags with og: before a property name are Open Graph tags.”

Source: ahrefs.com

<!-- Open Graph protocol -->
<meta property="og:url" content="">
<meta property="og:type" content="">
<meta property="og:title" content="">
<meta property="og:description" content="">
<meta property="og:image" content="">

Link sharing on Twitter

“With Twitter Cards, you can attach rich photos, videos and media experiences to Tweets, helping to drive traffic to your website. Simply add a few lines of markup to your webpage, and users who Tweet links to your content will have a “Card” added to the Tweet that’s visible to their followers.”

Source: developer.twitter.com

<!-- Twitter Cards -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="">
<meta property="twitter:url" content="">
<meta name="twitter:title" content="">
<meta name="twitter:description" content="">
<meta name="twitter:image" content="">

Selection: for text selection color

“The ::selection selector matches the portion of an element that is selected by a user.”

Source: w3schools.com

/* text selection color */ 
::-moz-selection { 
color: #262626; 
background: #f2dcbf;
} 
::selection { 
color: #262626; 
background: #f2dcbf; 
}

Mod-Deflate and Mod-Gzip: for compression in your .htaccess

“The mod_deflate module provides the DEFLATE output filter that allows output from your server to be compressed before being sent to the client over the network. The mod_deflate module provides the DEFLATE output filter that allows output from your server to be compressed before being sent to the client over the network.”

Source: httpd.apache.org

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/opentype
# For Olders Browsers Which Can't Handle Compression
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</IfModule>

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_include mime ^text/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_include handler ^cgi-script$
</ifModule>

Webkit-Scrollbar: For a custom scrollbar

“Chrome, Edge, Safari and Opera support the non-standard ::-webkit-scrollbar pseudo element, which allows us to modify the look of the browser’s scrollbar.”

Source: w3schools.com

/* custom scrollbar */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    border-radius: 0px;
    background: #fff;
}
::-webkit-scrollbar-thumb {
    border-radius: 0px;
    background: #262626;
}

Theme-Color: For mobile interface color

“The theme-color value for the name attribute of the <meta> element indicates a suggested color that user agents should use to customize the display of the page or of the surrounding user interface.”

Source: developer.mozilla.org

<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#HASH">

<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#HASH">

<!-- iOS Safari -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

Last Update: September 08th 2022