Contact

Keep up to date with our latest Digital Insights

Want to keep up with the very latest developments in the digital marketing world? Of course you do…

Code Every Digital Marketer Needs To Know

Posted in Technical SEO

18/05/15

Working in digital marketing means at some point in the day you will dabble in the world of code.

Whether you’re adding content through a WYSIWYG (What You See Is What You Get) editor or making a landing page for your paid traffic, you will more than likely end up on W3 Schools trying to skim for the tag you need.

To save you time we’ve amalgamated the most common lines of code we use in one handy place.


Links

Inbound and internal links are the bread and butter of any organic search strategy. Below are the three types of links I use from day to day.

Followed link

<a href=https://www.returnondigital.com>Return On Digital</a>

No followed link

<a href=”https://www.returnondigital.com” rel=”nofollow”>Return On Digital</a>

Open in new window

<a href=”url” target=”_blank”>this blog!</a>


No Follow No Index

This piece of code is placed between the <head> </head> tags and tells search engines not to index the page, meaning it will not show in search engine results pages.

These are typically found on landing pages created for paid search, where there is duplicate content from various organic landing pages.

<META NAME=”ROBOTS” CONTENT=”NOINDEX, NOFOLLOW”/>


Quick Text Edits

Add these tags around your text to apply the changes.

Bold

<strong> </strong>

Italics

<em> </em>

Unordered list (bullet points)

<ul> </ul>

Ordered list (numbers)

<ol> </ol>

List points

<li> </li>

Indent list

<ul style=”list-style-position: inside”> </ul>

<ol style=”list-style-position: inside”> </ol>

Change text colour

<span style=”color:#000000″> </span>

Change text size

<span style=”font-size:14px”> </span>


Images

Formatting images is simple when using a WYSIWYG editor, but sometimes it just doesn’t want to play along. Use the code below to battle common problems such as bad alignment or content being too close together.

Link to an image

Whether you’re calling an image from a folder or an image url, the code is the same.

<img src=”example.png” alt=”Return On Digital” height=”250px” width=”300px”/>

 

Padding

The padding clears an area around the content (inside the border) of an element.

Padding top

<img style=”padding-top: 25px”  src=”example.png”/>

Padding right

<img style=” padding-right: 25px”  src=”example.png”/>

Padding bottom

<img style=”padding-bottom: 25px”  src=”example.png”/>

Padding left

<img style=”padding-left: 25px”  src=”example.png”/> 

 

Alignment

The code below allows you to define the alignment of an image according to the surrounding element.

<img align=“middle” src=”example.png”/>

<img align=“left” src=”example.png”/>

<img align=“middle” src=”example.png”/>


Twitter Cards

Twitter Cards let you attach photos, videos and copy to Tweets that will help drive more traffic to your website. The most common Twitter Cards we use can be found below. Simply add the code between the <head> </head> tags.

 

Summary Card

The Summary Card can be used for many kinds of web content, from blog posts and news articles, to products and restaurants. It is 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=”@example” />

<meta name=”twitter:title” content=”example title”/>

<meta name=”twitter:description” content=”example description.” />

<meta name=”twitter:image” content=”https://example.jpg” />

<meta name=”twitter:url” content=”https://www.exapmle.com” />

 

Summary Card with Large Image

The Summary Card with Large Image features a large, full-width prominent image alongside a tweet. It is 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=“@example” />

<meta name=“twitter:creator” content=“@example”/>

<meta name=“twitter:title” content=“example title”/>

<meta name=“twitter:description” content=“example description.” />

<meta name=“twitter:image” content=“https://example.jpg”/ >

 

Photo Card

The Photo Card puts the image front and centre in the Tweet. Clicking on the photo expands it to a richer, detailed view.

<meta name=“twitter:card” content=“photo” />

<meta name=“twitter:site” content=“@example” />

<meta name=“twitter:title” content=“example title”/>

<meta name=“twitter:image” content=“https://example.jpg” />

<meta name=“twitter:url” content=“https://www.exapmle.com” />

 

Gallery Card

The Gallery Card allows you to represent collections of photos within a Tweet. This Card type is designed to let the user know that there’s more than just a single image at the URL shared, but rather a gallery of related images.

<meta name=“twitter:card” content=“gallery” />

<meta name=“twitter:site” content=“@example” />

<meta name=“twitter:creator” content=“@example”>

<meta name=“twitter:title” content=“example title”/>

<meta name=“twitter:description” content=“example description.” />

<meta name=“twitter:url” content=“https://www.exapmle.com” />

<meta name=“twitter:image0” content=“https://example0.jpg” />

<meta name=“twitter:image1” content=“https://example1.jpg” />

<meta name=“twitter:image2” content=“https://example2.jpg” />

<meta name=“twitter:image3” content=“https://example3.jpg” />

 

Product Card

The Product Card is a great way to represent product and retail items on Twitter. This Card type is designed to showcase your products via an image, a description, and allow you to highlight two other key details about your product.

<meta name=“twitter:card” content=“product” />

<meta name=“twitter:site” content=“@example” />

<meta name=“twitter:creator” content=“@example”>

<meta name=“twitter:title” content=“example title”/>

<meta name=“twitter:image” content=“https://example.jpg” />

<meta name=“twitter:label1”content=“Genre”/>

<meta name=“twitter:data1”content=“Classic Rock”>

<meta name=“twitter:label2”content=“Location”/>

<meta name=“twitter:data2”content=“National”/>


Facebook Open Graph Meta

Dictate what content is shown when your url is shared, liked or recommended on Facebook. Simply amend the code and add in between the <head> </head> tags on your website.

<meta property=”og:title” content=”Facebook Open Graph META Tags”/>

<meta property=”og:image” content=”http://returnondigital.com/images/exapmle.png”/>

<meta property=”og:site_name” content=”Return On Digital”/>

<meta property=”og:description” content=”A quick summary of your content or page.”/>


Pinterest Rich Pins

Product Pins

Make your product, recipe, movie, article or place Pins more useful.

<meta property=”og:title” content=”Name of your product” />

<meta property=”og:type” content=”product” />

<meta property=”og:price:amount” content=”1.00″ />

<meta property=”og:price:currency” content=”USD” />

 

Recipe Pins

For recipes, Pinterest support Schema.org and hRecipe formats.

<div itemscope itemtype=”http://schema.org/Recipe”>

<span itemprop=”name”>Orange-Pineapple-Carrot Smoothie</span>

<span itemprop=”description”>

Description of your recipe.</span>

<meta itemprop=”url” content=”http://myrecipesite.com/pinapple.html” />

<span itemprop=”recipeYield”>Serves 1</span>

Ingredients:
<span itemprop=”ingredients”>ingredient 1</span>,

<span itemprop=”ingredients”>ingredient 2</span>,

<span itemprop=”ingredients”>ingredient 3</span>,

<span itemprop=”ingredients”>ingredient 4</span>,

<span itemprop=”ingredients”>

add as many ingredient tags as you need</span>.

Instructions:

<span itemprop=”recipeInstructions”>

Put the pineapple, ice, orange juice, carrot and banana in a blender. Blend until smooth. </span>

</div>

 

Article Pins

For articles, Pinterest support Schema.org and hRecipe formats.

<meta property=”og:title” content=”Title of your Article” />

<meta property=”og:description” content=”Description of what your article” />

<meta property=”og:type” content=”article” />

 

Place Pins

For places, Pinterest support Schema.org and hRecipe formats.

<meta property=”og:title” content=”Name of the place ” />

<meta property=”og:type” content=”place” />

<meta property=”og:title” content=”Name of the place” />

<meta property=”og:description” content=”Description of the place” />

<meta property=”place:location:latitude” content=”37.7792418232402″ />

<meta property=”place:location:longitude” content=”-122.41431589072604″ />


tips and tricks CTA

Leave a Comment

Your email address will not be published.