Dario Evaristo Bellotta

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.