.htaccess – force trailing slash for url

This little .htaccess code does the trick on solving the SEO problem of bad url’s… let’s say that you have a https://www.example.com/images/ url that works ok, but someone forgets to add the last trailing slash and he/she accesses the https://www.example.com/images that, normally gives you a 404 error page and not the real stuff like photos and videos…

You just need to add this little code to your .htaccess file and if anyone forgets to add the last / after the url, it will be forced redirected to the right url with the / at the end.


RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*[^/])$ /$1/ [L,R=301] 

Deferring images for faster pages & Better Page Speed Score


This simple trick that I got from here helped me speed up the loading time of a page really nice...

I use this trick only on the hidden images that I call via JavaScript/jQuery or to the images that normally don't show up on the main screen(located at the middle and the bottom of the page...

How to Optimize Your Website And Obtain a Google Page Speed of 98-100?

First, please backup your files before you start modifying anything I write in this post.

Thank You!

First, why you should follow my advice? Well, almost anyone can tell you that a fast website is a good website and a good website is a mobile and desktop 100% compatible website but, as a developer, you need to test your site with Google’s Page Speed tool(https://developers.goo…).

Obtaining a good grade there can help your search engine traffic… So, what Google Page Speed score your project gets?

I’ve done a few projects with 98-99 out of 100, and a few with perfect 100.

I will list here a few “secrets” I used to boost my grade from 68/100 to 99/100.

1. Use only inline CSS

You need to use only inline css, period. Don’t link to any external frameworks(Bootstrap, etc.), don’t link to any Google Fonts file, to any particular style…

If you want to be productive, you ca use PHP to include_once(“”); your css files into the interpreted file.

If you want to use fontawesome or Google Fonts, you can put fontawesome file before you close your </body> tag.

You can also modify the Google Fonts .css file and include it inline into your source via PHP. Also, you can remove all the Vietnamese or Greek fonts from the Google Fonts file and use only the Latin style, works with english projects and most of the languages.

2. Insert the .js files at the end of the file

This is no secret that, inserting the .js files before you close </body> tag can get you a good Page Speed grade.

3. Use Server Side compression(gzip)

This is a pretty easy step, I provided instructions here on another post on how to do that.

4. Optimize images

Don’t exaggerate with images, use a low resolution image thumbnail, I use only < 10kb images. Specify the width and height of the image. You can use a free online tool to reduce the size of the images.

5. Minify css, js and html

This step gives anyone a lot of work if you are updating your site constantly… You can use free online tools to minify your css, html and js code.

6. Reduce the Server Response Time

Don’t load your server with requests, use, as much as you can only static content or make Ajax requests to content.

Bonus Point!

Transform your favicon in BASE64 text and include the code via PHP and get rid of a few connections that can slow down your website… I use this tool to convert my favicons: https://xaviesteve.co…

 

Hope this experience helps, try and play with this list and tell me your result.

Take a look at a sample page that I’ve recently made and got a great score: https://developers.google.com…

Redirect all 404 to 301 (.htaccess)

This is the simple code that I use to redirect all 404 errors (Not Found) to 301 (Moved Permanently). This will help you a lot if you had a previously WordPress site or another popular CMS that used a lot of permalinks to display content (eg.: tags, categories etc.).

This will also help with Google Search Console not found errors. After a new Google Crawl Index it will show a clean domain with no 404’s.

Hope it helps…

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule . / [L,R=301]

Twitter Cards Guide (with examples)

What Are Twitter Cards?

Twitter Cards allow you to go beyond text and attach rich media experiences such as photos or videos to your tweets. They’re perfect for introducing new products, sharing articles and increasing conversions. Without leaving Twitter, your followers can make an impression on your content and think before clicking on your card.

Types of Twitter Cards

This are the five types of Twitter Cards:

  • 1.   Summary Card   (title, description, thumbnail, and Twitter account attribution)
  • 2.   Summary Card With Large Image   (similar to a Summary Card, but with a featured large image)
  • 3.   App Card   (Card to detail a mobile app with direct download)
  • 4.   Player Card   (Card to provide video/audio/media)

1. Summary Card

The Summary Card, limited to 140 characters — can be used for many kinds of web content, from blog posts to products and restaurants. This type of card was specially designed to give the reader a preview of the content before clicking through to your website.

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@yourtwitterusername" />
<meta name="twitter:title" content="Title of the card goes here" />
<meta name="twitter:description" content="Here goes the description of the card." />
<meta name="twitter:image" content="http://www.example.com/image.jpg" />

2. Summary Card With Large Image

The Summary Card with Large Image features a large, full-width image. This type of card was designed to give the reader a rich photo experience, and clicking on the image brings the user to your website.

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@yourtwitterusername">
<meta name="twitter:creator" content="@authorusername">
<meta name="twitter:title" content="Your title goes here">
<meta name="twitter:description" content="Your description goes here">
<meta name="twitter:image" content="http://www.example.com/image.jpg">

3. App Card

App Cards work better on mobile devices, the cards display limited info on desktops.

The App Card was designed to represent mobile applications on Twitter and to drive installs. The App Card allows to display a name, description and icon, and also to highlight attributes such as the rating and the price.

<meta name="twitter:card" content="app">
<meta name="twitter:site" content="@twitteruser">
<meta name="twitter:description" content="Here goes the description of your app/game">
<meta name="twitter:app:country" content="US"> // language
<meta name="twitter:app:name:iphone" content="App Name iOS">
<meta name="twitter:app:id:iphone" content="iOS app id #">
<meta name="twitter:app:url:iphone" content="app url/iOS">
<meta name="twitter:app:name:ipad" content="App name iPad">
<meta name="twitter:app:id:ipad" content="iOS app id #">
<meta name="twitter:app:url:ipad" content="iPad url">
<meta name="twitter:app:name:googleplay" content="Google Play App Name">
<meta name="twitter:app:id:googleplay" content="Google Play App ID">
<meta name="twitter:app:url:googleplay" content="Google Play App URL">

**Note**
Platform-specific URLs are deep links into your app. If you do not support a particular platform, omit tags for that platform from your website.

**Note**
If you have an iPhone app, but no iPad-optimized app, you may want to include the iPhone app id, name, and url for both iPhone and iPad-related tags. If no value is provided, the Cards will simply render a “View on web” link pointing to website of the card.

4. Player Card

The Player Card supports streaming media experiences by putting a live video or audio player inside your Tweet.

More info about Twitter Player Card here.

Facebook Open Graph META Tags Example

Open Graph LogoThe Open Graph(OG) protocol enables any web page to become a rich object in a social graph using Meta Tags. As marketers create a lot digital content to attract users and engage them on social media – anyone who creates content must know about the Open Graph protocol and how to use the content and images to display the best social media experience for its users.

In this short example I will show you how to use the OG protocol to display a rich social media display for your links.

First of all, we need know the simple syntax of the META tag.

<meta property="og:title" content="Your page title goes here" />

Open Graph uses a few attributes that you need to edit and integrate into your META tags.

There is no need to explain them all here, let me just show you how they look in plain code:

<meta property="og:title" content="Your title here" />
<meta property="og:url" content="http://www.yourdomain.com/canonical-url" />
<meta property="og:type" content="website" />
<meta property="og:description" content="Your description goes here" />
<meta property="og:image" content="http://www.yourdomain.com/image.jpg" />
<meta property="article:publisher" content="https://www.facebook.com/your-page/" />
<meta property="article:author" content="https://www.facebook.com/your-page-profile-etc/" />

You can use the Facebook Debugger to see how your Open Graph tags look before publishing your content.

Check out a live DEMO of this example.